Web Components and Shadow DOM
Shadow DOM is a web standard that encapsulates the elements of a web component to keep styling and behavior consistent in any context.
Click DOM Tree Viewer to see the DOM of the <example-soup> web component.
See the #shadow-root? That's the root of the shadow DOM. It marks the shadow boundary between the regular DOM and the shadow DOM. You can't use standard CSS selectors to cross a shadow boundary, which makes end-to-end UI testing difficult.
Fortunately, UTAM makes crossing the shadow boundary easy. When you see a #shadow-root in the DOM, declare a shadow object in JSON. The shadow object represents a shadow boundary.
To learn how to cross a shadow boundary using UTAM, let's use a web component called <example-soup>.
Div Soup Recipe
1. Drag veggies into the bowl.
2. Enjoy!
Let's test that the ingredient list has seven items and that the soup exists. To get those elements, the test has to cross the shadow boundary.
In the JSON panel, look at the shadow on line 12 between the exampleSoup element and the listItems and soupArea elements. The shadow matches the location of the #shadow-root in the DOM Tree Viewer.
Inside the shadow object, declare an elements property, which is a nested tree of objects. After you jump over the shadow you can select anything until you hit the next shadow.
A page object can have elements scoped both inside and outside its shadow.