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

Regression Testing: Your Step-by-Step Action Plan

Regression testing can be an overwhelming task. You can try to do too much and fail because of a lack of resources. In this article we will talk about how you can start with small practical steps to get results fast. Once you set up basic tests like visual regression testing you can start with more complex implementations including automation.
7 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free