Access and verify text inside a Shadow DOM element

Preconditions (3)

Step 1: Locate the Shadow DOM host element by id 'shadow-host'

Step 2: Access the Shadow Root of the host element

Step 3: Find the span element with class 'shadow-text' inside the Shadow Root

Step 4: Verify that the text of the span element is exactly 'Hello Shadow DOM'

✅ Expected Result: The span element inside the Shadow DOM contains the text 'Hello Shadow DOM'

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Assert that the text inside the Shadow DOM span element equals 'Hello Shadow DOM'

Best Practices:

Use explicit waits to ensure elements are present before accessing

Use JavaScriptExecutor to access Shadow DOM elements since Selenium does not support Shadow DOM natively

Use clear and maintainable locators (id for host, class for inner element)

Handle exceptions gracefully if elements are not found

Automated Solution

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.assertEquals;
import java.time.Duration;

public class ShadowDomTest {
    private WebDriver driver;
    private WebDriverWait wait;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        driver.get("https://example.com/shadowdompage"); // Replace with actual URL
    }

    @Test
    public void testShadowDomText() {
        // Wait for shadow host element to be present
        WebElement shadowHost = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("shadow-host")));

        // Use JavaScriptExecutor to get shadow root
        JavascriptExecutor js = (JavascriptExecutor) driver;
        WebElement shadowRoot = (WebElement) js.executeScript("return arguments[0].shadowRoot", shadowHost);

        // Find the span inside shadow root
        WebElement shadowText = shadowRoot.findElement(By.cssSelector("span.shadow-text"));

        // Assert the text content
        String actualText = shadowText.getText();
        assertEquals("Hello Shadow DOM", actualText, "Shadow DOM text should match expected value");
    }

    @AfterEach
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

The test starts by opening the browser and navigating to the page with the Shadow DOM.

We wait explicitly for the shadow host element with id 'shadow-host' to be present to avoid timing issues.

Since Selenium does not support Shadow DOM directly, we use JavascriptExecutor to get the shadow root of the host element.

Inside the shadow root, we locate the span element with class 'shadow-text' using a CSS selector.

We then get the text of this span and assert it equals the expected string 'Hello Shadow DOM'.

Finally, the browser is closed in the tearDown method to clean up.

Common Mistakes - 3 Pitfalls

Trying to locate Shadow DOM elements directly with Selenium locators without using JavaScriptExecutor

Not using explicit waits before accessing elements

Using brittle or overly complex XPath locators inside Shadow DOM

Bonus Challenge

Now add data-driven testing to verify shadow DOM text for 3 different shadow hosts with ids 'shadow-host1', 'shadow-host2', 'shadow-host3' and their expected texts.

Show Hint