How to traverse to an element which is inside a Shadow DOM using Selenium?

Question

I want to get shadow element using text "ShadowRootLabel" from below code :

<div id="example">
#shadow-root
<div id="root" part="root">
  <div id="label" part="label">ShadowRootLabel</div>
</div>
</ptcs-label>

Which Selenium clients are you using Java/Python/NodeJS? – undetected Selenium Jun 22 '20 at 09:29 — undetected Selenium, Jun 22 '20 at 09:29

undetected Selenium · Answer 1 · 2020-06-22T16:30:36.163

To identify the shadow-dom element using the text ShadowRootLabel using Selenium driven WebDriver you can use the following java based solution:

Code Block:

WebElement root = driver.findElement(By.cssSelector("div#example"));
WebElement shadow_root = expand_shadow_element(root);
WebElement ShadowRootLabel = shadow_root.findElement(By.xpath("//div[@id='root']/div[text()='ShadowRootLabel']"));

expand_shadow_element() method:

public static WebElement expand_shadow_element(WebElement element)
{
    WebElement shadowRoot = (WebElement)((JavascriptExecutor)driver).executeScript("return arguments[0].shadowRoot", element);
    return shadowRoot;
}

References

You can find a couple of relevant discussions in:

How to traverse to an element which is inside a Shadow DOM using Selenium?

1 Answers1

References