Back to Blog

Dealing with ShadowDOM with jQuery

How to reach elements inside shadow DOM with jQuery, so you can open menus and search boxes before taking visual regression screenshots.

Yuriy Gerasymov
Yuriy Gerasymov
17 Aug 2023 · 1 min read

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.

Urban.org dropdown menu implemented as a shadow root component

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 search box with its autocomplete dropdown opened for a screenshot

Related Articles

More guides on visual regression testing, QA automation, and keeping your site pixel-perfect as it changes.