How to Automate Shadow DOM in Selenium WebDriver

How to Find Shadow DOM Elements Using Selenium WebDriver?

You can use getShadowRoot() and JavaScriptExecutor to access Shadow DOM. It returns a ShadowRoot for direct element access, handles nested shadow trees, and throws NoSuchShadowRootException if none exists.

How to Find Shadow DOM Using getShadowRoot() Method?

Selenium 4 introduced getShadowRoot() to access Shadow DOM elements directly from a Shadow Host. It returns a ShadowRoot object, which lets you interact with the component’s Shadow DOM. If no Shadow Root exists, it throws NoSuchShadowRootException.

As discussed earlier, this project on Shadow DOM in Selenium has been created using Maven. TestNG framework is used as a test runner. To learn more about Maven, you can go through this Maven tutorial for Selenium testing.

Once the project is created, we need to add the dependency for Selenium WebDriver and TestNG in the pom.xml file.

Versions of the dependencies are set in a separate properties block. This is done for maintainability, so if we need to update the versions, we can do it easily without searching the dependency throughout the pom.xml file.

Let’s move on to the test script of HomePage class. The Page Object Model (POM) has been used in this project as it helps reduce code duplication and improve test case maintenance.

public class HomePage {

   public SearchContext expandRootElement (WebElement element) {
       SearchContext shadowRoot = (SearchContext) ((JavascriptExecutor) getDriver ()).executeScript (
           "return arguments[0].shadowRoot", element);
       return shadowRoot;
   }
   public String getSomeText () {
       return getDriver ().findElement (By.cssSelector ("#shadow_content > span"))
           .getText ();
   }

   public String getShadowDomText () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRoot = shadowHost.getShadowRoot ();
       String text = shadowRoot.findElement (By.cssSelector ("#shadow_content > span"))
           .getText ();
       return text;
   }

   public String getNestedShadowText () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRoot = shadowHost.getShadowRoot ();
       WebElement shadowContent = shadowRoot.findElement (By.cssSelector ("#nested_shadow_host"));
       SearchContext shadowRootTwo = shadowContent.getShadowRoot ();
       String nestedText = shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div")).getText ();
       return nestedText;
   }

   public String getNestedText() {
     WebElement nestedText = getDriver ().findElement (By.id ("shadow_host")).getShadowRoot ()
         .findElement (By.cssSelector ("#nested_shadow_host")).getShadowRoot ()
         .findElement (By.cssSelector ("#nested_shadow_content > div"));
     return nestedText.getText ();
   }

   public String getNestedTextUsingJSExecutor () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRootOne = expandRootElement (shadowHost);
       WebElement nestedShadowHost = shadowRootOne.findElement (By.cssSelector ("#nested_shadow_host"));
       SearchContext shadowRootTwo = expandRootElement (nestedShadowHost);
       return shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div"))
           .getText ();

   }
}

First, we would find the locator for “some text” and “nested text” on HomePage.

public class HomePage {

   public SearchContext expandRootElement (WebElement element) {
       SearchContext shadowRoot = (SearchContext) ((JavascriptExecutor) getDriver ()).executeScript (
           "return arguments[0].shadowRoot", element);
       return shadowRoot;
   }
   public String getSomeText () {
       return getDriver ().findElement (By.cssSelector ("#shadow_content > span"))
           .getText ();
   }

   public String getShadowDomText () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRoot = shadowHost.getShadowRoot ();
       String text = shadowRoot.findElement (By.cssSelector ("#shadow_content > span"))
           .getText ();
       return text;
   }

   public String getNestedShadowText () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRoot = shadowHost.getShadowRoot ();
       WebElement shadowContent = shadowRoot.findElement (By.cssSelector ("#nested_shadow_host"));
       SearchContext shadowRootTwo = shadowContent.getShadowRoot ();
       String nestedText = shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div")).getText ();
       return nestedText;
   }

   public String getNestedText() {
     WebElement nestedText = getDriver ().findElement (By.id ("shadow_host")).getShadowRoot ()
         .findElement (By.cssSelector ("#nested_shadow_host")).getShadowRoot ()
         .findElement (By.cssSelector ("#nested_shadow_content > div"));
     return nestedText.getText ();
   }

   public String getNestedTextUsingJSExecutor () {
       WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
       SearchContext shadowRootOne = expandRootElement (shadowHost);
       WebElement nestedShadowHost = shadowRootOne.findElement (By.cssSelector ("#nested_shadow_host"));
       SearchContext shadowRootTwo = expandRootElement (nestedShadowHost);
       return shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div"))
           .getText ();

   }
}

Code Walkthrough:

• expandRootElement(): Uses JavaScript to manually return the Shadow Root of a given element, serving as a fallback when getShadowRoot() is not used.
• getSomeText(): Retrieves text from a standard DOM element using a CSS selector, without interacting with Shadow DOM.
• getShadowDomText(): Locates the Shadow Host, accesses its Shadow Root using getShadowRoot(), and then reads text from within the Shadow DOM.
• getNestedShadowText(): Handles nested Shadow DOM by accessing a second-level Shadow Root and extracting text from deeper elements.
• getNestedText()/getNestedTextUsingJSExecutor(): Demonstrate two ways to handle nested Shadow DOM: direct Selenium chaining and step-by-step expansion using JavaScript.

Note: Automate Shadow DOM with cloud Selenium Grid. Try TestMu AI Today!

How to Find Shadow DOM Using JavaScriptExecutor?

To access Shadow DOM elements using JavaScriptExecutor, execute a script that traverses the shadow roots. First, locate the Shadow Host element using standard selectors, then use element.shadowRoot to access the shadow DOM.

Let’s now see how to locate the Shadow Root elements using JavaScriptExecutor in Selenium WebDriver.

getNestedTextUsingJSExecutor() method has been created inside the HomePage Class, where we would be expanding the Shadow Root element based on the WebElement, we pass in the parameter.

Since in the DOM (as shown in the screenshot above), we saw that there are two Shadow Root elements we need to expand before we get to the actual locator for getting the text – nested text. Hence, the expandRootElement() method is created instead of copy-pasting the same JavaScriptExecutor code every time.

We would implement the SearchContext interface to help us with the JavaScriptExecutor and return the Shadow Root element based on the WebElement we pass in the parameter.

public SearchContext expandRootElement (final WebElement element) {
        return (SearchContext) ((JavascriptExecutor) getDriver ()).executeScript ("return arguments[0].shadowRoot",
            element);
    }

    public String getNestedShadowText () {
        final WebElement shadowHost = getDriver ().findElement (By.id ("shadow_host"));
        final SearchContext shadowRoot = shadowHost.getShadowRoot ();
        final WebElement shadowContent = shadowRoot.findElement (By.cssSelector ("#nested_shadow_host"));
        final SearchContext shadowRootTwo = shadowContent.getShadowRoot ();
        return shadowRootTwo.findElement (By.cssSelector ("#nested_shadow_content > div"))
            .getText ();
    }

Code Walkthrough:

• expandRootElement(): Uses JavaScript to return the Shadow Root of a given element, enabling access when direct Shadow DOM handling is required.
• getNestedShadowText(): Locates the main shadow_host element that contains the first Shadow DOM.
• First Shadow Root: Calls getShadowRoot() on the Shadow Host to access its internal structure.
• Nested Shadow Host: Finds nested_shadow_host inside the first Shadow Root and retrieves its own Shadow Root.
• Final Text Extraction: Reads and returns text from the deeply nested element inside the second Shadow DOM layer.

How to Automate Shadow DOM in Selenium WebDriver?

There are two main ways to run tests for automating Shadow DOM in Selenium. You can execute them directly from your IDE using TestNG for quick development and debugging, or run them from the command line using Maven, which is useful for automated builds and continuous integration setups.

How to Automate Shadow DOM Using TestNG?

You can use TestNG to run Selenium scripts that access Shadow Root through JavaScriptExecutor and locate inner elements. Execute the test from IDE or suite XML to validate Shadow DOM actions.

TestNG is used as a test runner. Hence, testng.xml has been created, using which we will run the tests by right-clicking on the file and selecting the option Run ‘…\testng.xml’. This file will be placed inside the root folder of the project.

To achieve scalability and reliability and test across different environments, we’ll run the tests on automation testing platforms such as TestMu AI.

TestMu AI offers an online Selenium Grid of over 3000 real browsers and operating systems to help you automate Shadow DOM in Selenium on the cloud. You can accelerate your Selenium testing with TestNG and reduce test execution time by multiple folds by running parallel tests on multiple browsers and OS configurations.

To get started, check out this guide on Selenium TestNG testing on TestMu AI.

But before running the tests, add the TestMu AI Username and Access Key. You can them from your Account Settings > Password & Security. Now add these credentials in the Run Configurations since we are reading the TestMu AI Username and Access Key from System Property.

Add values in the Run Configuration as mentioned below:

• Dusername = <TestMu AI username>
• DaccessKey = <TestMu AI accesskey>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Shadow DOM Automation Tests">
    <test name="Shadow DOM Tests on Watir Website">
        <parameter name="browser" value="remote-chrome"/>
        <classes>
            <class name="ShadowDomTests">
                <methods>
                    <include name="testShadowDomWatir"/>
                </methods>
            </class>
        </classes>
    </test> <!-- Test -->
    <test name="Shadow DOM Tests on Selenium Playground Website">
        <parameter name="browser" value="remote-chrome"/>
        <classes>
            <class name="ShadowDomTests">
                <methods>
                    <include name="testShadowDomSeleniumPlayground"/>
                </methods>
            </class>
        </classes>
    </test> <!-- Test -->


</suite>

Here is the screenshot of the test run locally for Shadow DOM in Selenium using Intellij IDE.

How to Automate Shadow DOM Using Maven?

To automate Shadow DOM using Maven, configure pom.xml with Selenium and TestNG, then run mvn test so the build executes scripts that access shadowRoot via JavaScriptExecutor for stable UI validation.

To run the tests using Maven, the following steps need to be run to automate Shadow DOM in Selenium:

• Open Command Prompt or your IDE Terminal.
• Navigate to the root folder of the project.
• Type the command: mvn clean install -Dusername=<TestMu AI username> -DaccessKey= <TestMu AI accessKey>

Following is the screenshot from IntelliJ, which shows the execution status of the tests using Maven:

Once the tests are run successfully, we can go to the TestMu AI Web Automation Dashboard and view all the video recordings, screenshots, device logs, and step-by-step granular test run details.