Automating Shadow DOM in Selenium WebDriver

When automating web applications with Selenium WebDriver, you may encounter elements that cannot be located using standard methods. This often happens when working with Shadow DOM in Selenium, where elements are encapsulated inside a Shadow Root and cannot be accessed through typical locators.

Because these elements are not part of the regular DOM tree, trying to interact with them directly will usually result in errors like NoSuchElementException. To automate elements inside a Shadow DOM, you need to first retrieve the Shadow Root and then locate the elements within it.

What Is Shadow DOM?

Shadow DOM is a functionality that allows the web browser to render elements of Document Object Model (DOM) without putting them into the main document DOM tree. This creates a barrier between what the developer and the browser can reach.

The developer cannot access the Shadow DOM the same way they would with nested elements, while the browser can render and modify that code the same way it would with nested elements.

By implementing it, you can keep the style and behavior of one part of the document hidden and separate from the other code of the same document so that there is no interference.

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree – the Shadow DOM tree starts with a Shadow Root, underneath which you can attach any element in the same way as the normal DOM.

Check out this blog to learn more about Shadow Root in Selenium.

Here are some Shadow DOM terminologies:

• Shadow Host: The regular DOM node to which the Shadow DOM is attached.
• Shadow Tree: The DOM tree inside the Shadow DOM.
• Shadow Boundary: The place where the Shadow DOM ends and the regular DOM begins.
• Shadow Root: The root node of the Shadow tree.

Why Use Shadow DOM in Selenium?

Shadow DOM in Selenium lets you access and test elements hidden from the normal DOM. It ensures stable locators and accurate interaction with modern web components.

Let’s take an example of the Watir Homepage and try to assert the Shadow DOM and the nested Shadow DOM text with Selenium WebDriver. Note it has 1 Shadow Root element before we reach text -> some text, and there are 2 Shadow Root elements before we reach the text > nested text.

Now, if we try to locate the element using the cssSelector(“#shadow_content > span”), it doesn’t get located, and Selenium WebDriver will throw NoSuchElementException.

To avoid NoSuchElementException in Selenium and locate the element correctly for the text, we need to go through the Shadow Root elements. Only then would we be able to locate “some text” and “nested text” on the page.

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.

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

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 LambdaTest 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.

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 LambdaTest.

LambdaTest 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 LambdaTest.

But before running the tests, add the LambdaTest 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 LambdaTest Username and Access Key from System Property.

Add values in the Run Configuration as mentioned below:

• Dusername = <LambdaTest username>
• DaccessKey = <LambdaTest accesskey>

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:

1. Open Command Prompt or your IDE Terminal.
2. Navigate to the root folder of the project.
3. Type the command: mvn clean install -Dusername=<LambdaTest username> -DaccessKey= <LambdaTest 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 LambdaTest Web Automation Dashboard and view all the video recordings, screenshots, device logs, and step-by-step granular test run details.

Conclusion

In this blog on automating Shadow DOM in Selenium, we discussed finding Shadow DOM elements and automating them using the getShadowRoot() method introduced in the Selenium 4 and above version.

We also discussed locating and automating the Shadow DOM in Selenium WebDriver using JavaScriptExecutor and running the tests on the LambdaTest platform, which shows granular details of the tests run with Selenium WebDriver logs.

Citations

Finding web elements: