17 August 2023

Dealing with ShadowDOM with jQuery

Recently we started testing https://urban.org and we wanted to take screenshots of the dropdown menu and search box, but they were implemented as components with shadowDOM.

double shadow dom

 

 

Thankfully there is a way to interact with elements in shadowDOM with jQuery.

if (window.location.hash == '#menu') {
  var header = jQuery('lbj-header')[0].shadowRoot;
  jQuery(header).find('.header__menu-toggle').click();
}

Besides opening menu it was also possible to test clicking on the search box and even showing the autocomplete dropdown in the search.

 

urban.org expanded menu, search box

Functional vs. Non Functional Testing: A Comparison Guide

Testing plays a vital role in successful software deployment, product releases, or end-to-end solutions building. Both functional and non functional testing hold equal importance in successfully executing the complete SDLC. 

This article will look at the comparative analysis for both of these testing types. Need a more in-depth look at non functional testing first? Check out our comprehensive guide on non functional testing. 

6 min read

Testing tabs, mobile menu, sliders

A lot web pages right now have some elements that gets activated by clicking on the pages. For example, sliders, or dropdown menu, or tabs. How to take screenshots of those pages too?
4 mins read read

Dealing with ShadowDOM with jQuery

Recently we started testing https://urban.org and we wanted to take screenshots of the dropdown menu and search box, but they were implemented as components with shadowDOM.
2 mins read read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free