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

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.
2 mins read read

7 Must use WordPress plugins for business websites and why to use them

WordPress plugins are widely used to add some new functionality or to extend the existing functionality on the website.

There are several WordPress plugins are available for WordPress users.

If you’re running a business website, there are multiple plugins that you can install to improve the performance of your website.

If you’re looking to add the perfect plugin to your WP site, it will take a lot of time and effort.

We’ve already check reviewed some incredible and must-have WordPress plugins that are relevant to the business website.

4 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free