如何使用 selenium 自动化影子 DOM 元素？

Question

I am using Java Selenium project for web page automation. The web page contains lots of multi-level shadow-root DOM elements that I am not able to interact with using selenium findElement method.

I have tried the following solutions:

• deep css (Don't work on latest chrome browser)
• JS Executor. (This is really tedious and becomes complex to maintain)

Note:

If you know any other solution other than listed above that I can implement in Selenium Java framework, please pass on the solution. Thanks in advance..

Answer 1

I am using Java Selenium project for web page automation. The web page contains lots of multi-level shadow-root DOM elements that I am not able to interact with using selenium findElement method.

I have tried the following solutions:

• deep css (Don't work on latest chrome browser)
• JS Executor. (This is really tedious and becomes complex to maintain)

Note:

If you know any other solution other than listed above that I can implement in Selenium Java framework , please pass on the solution. Thanks in advance !.

Answer 2

I am using Java Selenium project for web page automation. The web page contains lots of multi-level shadow-root DOM elements that I am not able to interact with using selenium findElement method.

I have tried the following solutions:

• deep css (Don't work on latest chrome browser)
• JS Executor. (This is really tedious and becomes complex to maintain)

Note:

If you know any other solution other than listed above that I can implement in Selenium Java framework , please pass on the solution. Thanks in advance !.

Answer 3

I am using Java Selenium project for web page automation. The web page contains lots of multi-level shadow-root DOM elements that I am not able to interact with using selenium findElement method.

I have tried the following solutions:

• deep css (Don't work on latest chrome browser)
• JS Executor. (This is really tedious and becomes complex to maintain)

Note:

If you know any other solution other than listed above that I can implement in Selenium Java framework , please pass on the solution. Thanks in advance !.

Answer 4

With Selenium 4 there is now WebElement.getShadowRoot() . For example:

driver.findElement(By.id("parentId")).getShadowRoot().findElement(By.cssSelector( "label" )).findElement(By.tagName("input"))

As normal with a #shadow-root , the navigation choices for the next hop are limited. Eg against Chrome By.cssSelector() and By.className() are valid, but By.id() and By.tagName() fail with org.openqa.selenium.InvalidArgumentException: invalid argument: invalid locator

Answer 5

Shadow DOM in Selenium

With the availability of Chrome v96, google-chrome has made its shadow root return values compliant with the W3C WebDriver specification .

As @titusfortner mentions in their comment :

Now that Chrome supports shadow root via the driver, shadowRoot JS calls are returned per the spec with a shadow root element key (shadow-6066-11e4-a52e-4f735466cecf). Selenium 4 has a new ShadowRoot class to support this, but we didn't include the translation code that we do when execute script calls return elements. This has been fixed and will be available in Selenium 4.1.

The only difference is that you'll need to cast to ShadowRoot instead of WebElement.

So moving forward using Selenium with Microsoft Edge and Google Chrome v96 and greater, we need to use the new shadow root method as follows:

• Java example :

   driver.get("http://watir.com/examples/shadow_dom.html"); WebElement shadowHost = driver.findElement(By.cssSelector("#shadow_host")); SearchContext shadowRoot = shadowHost.getShadowRoot(); WebElement shadowContent = shadowRoot.findElement(By.cssSelector("#shadow_content")); Assertions.assertEquals("some text", shadowContent.getText());

• Python example :

   driver.get('http://watir.com/examples/shadow_dom.html') shadow_host = driver.find_element(By.CSS_SELECTOR, '#shadow_host') shadow_root = shadow_host.shadow_root shadow_content = shadow_root.find_element(By.CSS_SELECTOR, '#shadow_content') assert shadow_content.text == 'some text'

• C# example :

   _driver.Navigate().GoToUrl("http://watir.com/examples/shadow_dom.html"); var shadowHost = _driver.FindElement(By.CssSelector("#shadow_host")); var shadowRoot = shadowHost.GetShadowRoot(); var shadowContent = shadowRoot.FindElement(By.CssSelector("#shadow_content"));

• Ruby example :

   @driver.get('http://watir.com/examples/shadow_dom.html') shadow_host = @driver.find_element(css: '#shadow_host') shadow_root = shadow_host.shadow_root shadow_content = shadow_root.find_element(css: '#shadow_content') expect(shadow_content.text).to eq 'some text'

---

tl; dr

Read more at:

• Issue 3958: since ChromeDriver 96. impossible to access a shadowroot-div anymore (fine under 95)
• [ Bug]: Confusing JAVA API documentation, failed to cast org.openqa.selenium.remote.ShadowRoot

Answer 6

I can access of multi-level of shadow-root DOM elements using this recursive function.

private getHTMLElementWithShadowRoot(htmlElement: HTMLElement, nameHtmlElements: string[]): HTMLElement {
            if (nameHtmlElements.length === 0) return htmlElement;
            return this.getHTMLElementWithShadowRoot(
                htmlElement.shadowRoot ?
                    htmlElement.shadowRoot.querySelector(nameHtmlElements[0]) :
                    htmlElement.querySelector(nameHtmlElements[0]), nameHtmlElements.slice(1)
            );
 }

I use in this way:

let appComponent = document.body.querySelector("app-component") as HTMLElement;
let appHeader = this.getHTMLElementWithShadowRoot(appComponent, ["main-component", "header-component", "#app-header"]);

Here you can see the DOM

You have to write the underline names in the array string nameHtmlElements without the first name, since the first name is passed in the first parameter of the function.