Shadow DOM Elements

Shadow DOM elements allow you to encapsulate and isolate styling and functionality in a webpage, maintaining a clean structure. The Document Object Model (DOM) attaches a hidden DOM to a chosen element, keeping local styles and markup separate. Although it benefits developers, it poses challenges for automation testing since shadow root elements do not exist in the main DOM.

To perform reliable tests, you need to find these elements. This guide will explain how Testsigma can help you locate and capture Shadow DOM elements for effective testing.

Prerequisites

Before you begin, ensure that you have referred to:

Documentation on creating projects.

Documentation on creating test cases.

Documentation on creating elements.

Documentation on recording test steps.

Identifying Shadow DOM in a Webpage

Follow the below steps to identify if a webpage uses Shadow DOM:

To open the Chrome Developer Tools and highlight webpage elements, right-click on the webpage and select Inspect.
Expand the <body> tag in the Elements tab and verify if it contains #shadow-root to indicate the presence of Shadow DOM on the webpage.

Identify Shadowdom Element

Basic Shadow DOM Terminologies

Shadow Host: The HTML element is the entry point for encapsulated components by attaching a shadow DOM.
Shadow Tree: A component encapsulates and isolates its internal structure and styling through a hidden tree of DOM elements within a shadow DOM.
Shadow Boundary: An invisible wall separates the shadow DOM from the main DOM, keeping styles and functionality isolated.
Shadow Root: The shadow DOM's starting point is the hidden tree's root node, where everything begins.

Shadow DOM diagram

Create Element for Shadow DOM

This section will demonstrate how to capture and store shadow DOM elements using Testsigma. For this demonstration, we'll use the shopping website shop.polymer-project.

Navigate to Create Tests > Elements in the left side navbar. Click on Create Element at the top right corner of the Elements List page to capture the Element on the webpage.
Click Create Element to open an overlay screen on the right side of the page. Click Record Element within this overlay to easily capture the Element. Open the webpage in a new tab and click on the Element you want to capture. Then, click Capture to record the Element in the Record Element pop-up menu.
Alternatively, manually fill in the Name and Screen Name, Element Type, Element Value, and Host Values fields to capture the Element.
Fill in the fields with the element Name and Screen Name. Then, choose CSS Selector as the Element Type from the dropdown menu since only CSS selectors can access elements within shadow DOM.
To obtain the CSS Selector, right-click on the webpage and choose Inspect to open Chrome Developer Tools. Then, you must locate the Element you need using the Select Element in the page to inspect it icon.
Once you have located the Element, right-click on it and choose Copy from the menu. Next, select Selector from the dropdown menu and copy the CSS selector value that appears. Finally, paste it into the Enter the value field.
Check the box Present inside Nested Context to specify the hosts from the parent host to the current element host in the order.
Follow the order from the Parent Host to the Current Host and specify each shadow host element's Shadow DOM and CSS Selector values.
Click Create Element and use it in Test Cases.

NOTE:

To create an element in a Test Case, use NLP to add a new step to the test case and include a placeholder for the Element. Capture elements on the webpage by clicking Create Element, or use Testsigma Record to capture the steps and their associated elements during test step recording.

Did you find it helpful?

Shadow DOM Elements

Identifying Shadow DOM in a Webpage

Basic Shadow DOM Terminologies

Create Element for Shadow DOM

Strategies for Formulating Elements

Verifying elements in Chrome DevTools

Yes

No

Learn how to execute low code tests across 3000+ device / browser environments.