Shadow DOM element access in Selenium Java

Introduction

Shadow DOM hides parts of a webpage to keep them separate. Accessing Shadow DOM elements lets you test or interact with these hidden parts.

When you want to click a button inside a web component that uses Shadow DOM.

When you need to read text from a hidden part of a page inside Shadow DOM.

When automating tests for modern web apps that use Shadow DOM for encapsulation.

When you want to fill a form field inside a Shadow DOM element.

When debugging or verifying UI elements inside Shadow DOM.

Syntax

Selenium Java

WebElement shadowHost = driver.findElement(By.cssSelector("shadow-host-selector"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement shadowElement = shadowRoot.findElement(By.cssSelector("shadow-element-selector"));

Use getShadowRoot() on the shadow host element to get inside the Shadow DOM.

Then use findElement on the shadow root to access elements inside Shadow DOM.

Examples

Finds a button inside the Shadow DOM of my-component and clicks it.

Selenium Java

WebElement shadowHost = driver.findElement(By.cssSelector("my-component"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement button = shadowRoot.findElement(By.cssSelector("button.submit"));
button.click();

Types an email into an input field inside Shadow DOM.

Selenium Java

WebElement shadowHost = driver.findElement(By.id("shadow-host"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement input = shadowRoot.findElement(By.cssSelector("input[name='email']"));
input.sendKeys("[e-mail]");

Sample Program

This program opens a website that uses Shadow DOM, finds a shadow host element, accesses its Shadow DOM, finds the cart button inside it, and prints its text.

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.SearchContext;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class ShadowDomAccess {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://shop.polymer-project.org/");

            // Find the shadow host element
            WebElement shopApp = driver.findElement(By.tagName("shop-app"));

            // Access shadow root
            SearchContext shadowRoot = shopApp.getShadowRoot();

            // Find element inside shadow DOM
            WebElement cartButton = shadowRoot.findElement(By.cssSelector("a[href='/cart']"));

            // Print the text of the cart button
            System.out.println("Cart button text: " + cartButton.getText());

        } finally {
            driver.quit();
        }
    }
}

Important Notes

Shadow DOM elements are hidden inside their host elements, so normal findElement calls won't find them.

Always get the shadow root first, then search inside it.

Make sure your Selenium version supports getShadowRoot() (Selenium 4+).

Summary

Shadow DOM hides parts of a webpage to keep them separate and safe.

Use getShadowRoot() on the shadow host element to access inside Shadow DOM.

Then use findElement on the shadow root to find elements inside Shadow DOM.