A shadow DOM element is one that has been programmatically added to an element with the use of JavaScript and whose content does not show up in the browser’s DOM. Automating Selenium tests on your website can save you time and money by ensuring the changes you make are not breaking anything or negatively impacting your user experience. There are multiple ways to do this, but in this guide, we will be going over how to automate shadow DOM elements using Selenium WebDriver.
Locate the Host Element
The first step is to locate the host element. The host element is the element that contains the shadow tree. It can be any type of element, such as a div, section, or span. Once you have found the host element, you need to use the findElement command to find the shadow root. In order to perform an action on the shadow root, we need to use the executeScript command. To perform an action on one specific node in the tree (e.g., all button nodes), we must find and identify it within our script (e.g., button).
