← Back to Selenium Lab

SELENIUM WEBDRIVER · PRACTICE LAB

Shadow DOM

Learn how to identify and interact with elements inside Shadow DOM using modern Selenium WebDriver techniques.

SELENIUM 4 DOM

OBJECTIVE

What You Will Practice

Understand Shadow DOM.
Identify a shadow host.
Open a Shadow Root.
Locate elements inside Shadow DOM.
Interact with Shadow DOM inputs.
Click Shadow DOM buttons.
Work with nested Shadow DOM.
Practice Selenium 4 ShadowRoot.

Shadow Host

Identify the element that contains the Shadow DOM.

HOST

Shadow Host #user-profile-component

Selenium Java


                    WebElement host = driver.findElement(By.cssSelector("#user-profile-component"));

Open Shadow Root

Access the Shadow Root attached to the host element.

ROOT

Shadow Root Status OPEN

Selenium 4 Java


                    ShadowRoot shadowRoot = host.getShadowRoot();

Shadow DOM Input

Locate and enter text into an input inside Shadow DOM.

INPUT

Shadow DOM Component

Selenium 4 Java


                    WebElement input = shadowRoot.findElement(By.cssSelector("#shadowUsername"));
                    input.sendKeys("Selenium User");

Shadow DOM Button

Locate and click a button inside Shadow DOM.

CLICK

Shadow DOM Action

Selenium 4 Java


                    shadowRoot.findElement(By.cssSelector("#shadowClickTarget")).click();

Shadow DOM Text

Read text from an element located inside Shadow DOM.

GET TEXT

Shadow DOM Message Selenium Shadow DOM is working!

Selenium 4 Java


                    String text = shadowRoot.findElement(By.cssSelector("#shadowMessage")).getText();

Nested Shadow DOM

Practice accessing a Shadow Root inside another Shadow Root.

ADVANCED

Outer Shadow Root

Inner Shadow Root Nested Target Element

Selenium Concept


                    ShadowRoot outerRoot = host.getShadowRoot();
                    ShadowRoot innerRoot = innerHost.getShadowRoot();
                    innerRoot.findElement(By.cssSelector("#nestedTarget"));

Complete Shadow DOM Challenge

Locate the employee name and click the action button inside the component.

CHALLENGE

Employee Kavya Reddy

Role Automation Engineer

Selenium 4 Practice


                    ShadowRoot root = host.getShadowRoot();
                    WebElement employee = root.findElement(By.cssSelector("#shadowEmployeeName"));
                    WebElement action = root.findElement(By.cssSelector("#shadowEmployeeAction"));
                    action.click();

QUICK REFERENCE

Shadow DOM Selenium Cheat Sheet

Find Host

WebElement host =
    driver.findElement(
        By.cssSelector("#host")
    );

Get Shadow Root

ShadowRoot root =
    host.getShadowRoot();

Find Element

WebElement element =
    root.findElement(
        By.cssSelector("#element")
    );

Click

root.findElement(
    By.cssSelector("#button")
).click();

Enter Text

root.findElement(
    By.cssSelector("#input")
).sendKeys("Selenium");

Get Text

String text =
    root.findElement(
        By.cssSelector("#message")
    ).getText();