Skip to main content
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

How to Avoid False Positives when Doing Visual Testing

The biggest pain point of fulll-page screenshot visual regression testing are false positives. They usually happen because of the dynamic nature of the content. There are few ways of handling this situation. First, you could mask or remove dynamic elements completely. But then you’ll miss testing them.
6 mins read read

Everything You Need To Know About Performance Testing and Its Types

The software testing process does not end with the segregation of functional and non-functional types. Therefore, to develop a thorough understanding of the SDLC, you need to dig deeper. One of the non-functional testing types is performance testing and this type is further segregated into 4 types.

4 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs