Automating Shadow DOM with Selenium WebDriver

How to drive web elements inside a shadow root on a web page

Courtney Zhan

--

A Shadow DOM is a self-contained web component in a web page. Google uses shadow DOMs extensively (link to their Shadow DOM introduction). By default, a standard automation driver is unable to driver web elements inside a shadow DOM.

The latest Selenium WebDriver v4 supports Shadow Roots (HTML elements for a shadow DOM). In this article I will show a quick and easy way to drive web elements inside a Shadow DOM using Selenium WebDriver.

An Example

The task: Add a new list item to the Editable List of the demo Fiddle site.

Screenshot of Luigi Demo Page which we are about to test

A typical Selenium script looks like this:

# add new list element
driver.find_element(:xpath, "//input[@class='add-new-list-item-input']").send_keys("Buy milk and eggs")
driver.find_element(:xpath, "//button[@class='add-new-list-item-input']").click# verify new element is there
expect(page_text).to include("Buy milk and eggs")

But it won’t work on the demo site. Why? The editable list is inside a Shadow DOM and inaccessible — for now.

Finding the Shadow DOM

Open Inspect Element in Chrome (or equivalent for other browsers).

Looking at the page, there is a stand-out tag: <luigi-wc-2f77632f6c6973742e6a73> (highlighted in the screenshot below).

Underneath it, it has one element #shadow-root (open) and that is how you can identify it. It is a bit like a frame (has a title tag …) ,except Selenium unable to find any elements within it.

Testing in a Shadow DOM

The approach:

1. Find the shadow root element

--

--