如何使用 Selenium Java 框架自动化 Shadow DOM

Question

I am using Selenium Java framework for test automation and recently the application was upgraded with Shadow DOM. We have tried to automate using javascript executor querySelector. The application is having more than 20 shadow roots in a single page and most of the shadow roots are child of the previous root. So to identify an element we need to traverse through many roots as in document.querySelector('root1').shadowRoot.querySelector('root2')....like wise till nth root to find an element.

WebElement DropDown = (WebElement) js.executeScript("return document.querySelector('sn-test-layouts > sn-test-main > sn-test-contents').shadowRoot.querySelector('testroot1').shadowRoot.querySelector('testroot2')");

After finding an element, the normal selenium click or select methods are not working. So am using javascript methods to perform click, enter text etc.

Could you please provide insight on any other solutions to automate Shadow DOM using selenium Java. Thanks in advance

Answer 1

Serenity offers a shadow DOM handler, and implementation looks like this:

public WebElementFacade getElementInShadowDOM(String shadow, String element) {
    return find(ByExpandedShadowDom.of(shadow))
            .find(By.cssSelector(element));
}

where element is the dropdown you want to access and shadow is the css selector of shadow root. WebElementFacade is a wrapper for WebElements provided by Serenity that offer many cool and more efficient methods.

Please note that currently SerenityBDD is not yet up to date with newest chrome and Selenium 4, from what i know the work is in progress.

It's my first time posting, finally time to give back:)

Answer 2

In Selenium 4.0, for Chromium versions 96+ you can use the getShadowRoot() method, then locate the child element. This shouldn't have any issues with nesting.

For older versions of Chrome or Safari, you need to cast to SearchContext instead of WebElement .

If you're working with Firefox or Selenium 3, there are more complicated workarounds. I've written them all out here: https://titusfortner.com/2021/11/22/shadow-dom-selenium.html