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

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free