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

Stabilizing Elementor website for Visual Regression Testing

Elementor is a very popular WordPress Website builder.

It has an extensive library of blocks (widgets) that you can use on your website.

Regarding visual regression testing, because of the dynamic nature of the widgets, it can sometimes be tricky to avoid false positives. Every time you take a screenshot, it looks slightly different: the slider can be in a different position, the animation can be in a different state, counters, and others.

4 mins read read

A Comprehensive Guide to Non Functional Testing: Types, Examples, and Tools

Testing is an essential part of the software development lifecycle. Any software application needs to be tested for its functional and non functional requirements. Testing helps to examine if the software application matches all requirements and standards, ensuring customer satisfaction. Various aspects of applications are checked using different tests, classified into functional and non functional testing categories.

17 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free