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

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

Top Visual Regressions that You Can Spot with and without Automated Testing

Visual bugs are typically considered easy to spot. You can often see what’s missing or what’s amiss on a web page.

A photo that’s too much to the left, the wrong fonts, a missing button -- these are things that you can spot at a simple glance. But not all visual bugs are that easy to catch, especially not with the naked (or untrained eye).

This is where automated visual regression tools like Diffy come into play. They can help you spot elusive visual bugs easily, even if you have to test hundreds of pages.

4 mins read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free