What is Shadow DOM elements

Shadow DOM is a web standard that encapsulates a web component's internal structure, style, and behavior to keep it separate from the rest of the page. It allows developers to create isolated, reusable components by creating a hidden DOM tree, called a shadow tree, attached to a regular DOM element (the shadow host). This encapsulation prevents styles and scripts from the main page from affecting the component, and vice versa, making code more modular and less prone to conflicts.

Automating web applications that utilize Shadow DOM elements requires specific approaches compared to traditional DOM elements, as Shadow DOM encapsulates its content, preventing direct access from the main document.

Automating Shadow DOM elements

Locate the Shadow Host

The first step is to identify and locate the element that serves as the "host" for the Shadow DOM. This element is part of the main DOM and can be located using standard methods like CSS selectors or XPath.
Using the browser's "Developer Tools (F12)", you can identify the host element by the #shadow-root tag.
In the example below, the <shadow-signup-form> element would be the DOM element that serves as the host.

Access the Shadow Root

Once the shadow host is located, you need to access its associated Shadow Root through the .shadowRoot property. This property returns an object representing the Shadow Root content. 
We can use the JavaScript code below to get the content from the Shadow Root of the <shadow-signup-form> element.

document.getElementById("shadow-signup-form").shadowRoot;

Locate elements within the Shadow Root

With access to the Shadow Root, you can then locate the desired elements within it using CSS selectors. 
XPath is typically not supported for elements directly inside a Shadow Root.
Using the structure of this website as an example:

We can obtain the <input name="username" /> element within the Shadow Root <shadow-signup-form> using the JavaScript code:
document.querySelector("shadow-signup-form").shadowRoot.querySelector("input[name='username']");

Using JavaScript in IBM RPA

IBM Robotic Process Automation does not have native integration with Shadow Root elements because they cannot be accessed directly with the selectors normally used in IBM Robotic Process Automation (XPath, CSS, etc.).
However, with the webExecuteJavaScript command, it is possible to locate and interact with any element within a Shadow Root.

Here is a simple script that demonstrates how to do this using IBM RPA:

You can download the entire script from here.
For more information, you can access our documentation.

#IBMRPA #RoboticProcessAutomation(RPA) #Automation