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

What Kind of Things Break During WordPress or Drupal Updates and How to Fix Them Quickly

Much of the modern Web is powered by open source content management systems (CMS) like WordPress or Drupal. Like all software, though, even the most reliable CMS needs bugfixes, and all world-class software gets new features in time. And sometimes, – we’ve all been there – no matter how good the intentions behind them are, some updates break things.
3 mins read read

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

Automation Testing 101: Benefits, Types & Tools

If you are familiar with software testing, you already know that there are two main types: manual and automation testing. Both aim to execute a test case and compare the expected results and actual results.  The difference between the two is that manual testing is performed by a human who checks the software to determine if it is working as expected. In contrast, automation testing requires using a software tool or framework to execute test cases. 
5 mins read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free