Automating Shadow DOM with Selenium WebDriver

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

A repost of my daughter’s article (her first on Medium) with permission. I added it here for the convenience of my blog subscribers.

This article is included in my “How to in Selenium WebDriver” series.

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.

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 is unable to find any elements…