Automating Shadow DOM with Selenium WebDriver
How to drive web elements inside a shadow root on a web page
3 min readDec 25, 2021
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")
