July 7th, 2022 by Adam Sandman
We are excited to be releasing the new 7.3 version of Rapise this week. One of its new key features is the ability to record and playback tests against the Shadow DOM. What is the Shadow DOM you ask, and why would you want to test it? Read on to find out!
What is the Shadow DOM?
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. The Shadow DOM allows hidden DOM (Document Object Model) trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM.
There are some bits of shadow DOM terminology to be aware of:
- Shadow host: The regular DOM node that the shadow DOM is attached to.
- Shadow tree: The DOM tree inside the shadow DOM.
- Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
- Shadow root: The root node of the shadow tree.
You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow DOM tree inside a <style> element. The difference is that none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation.
Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a <video> element, with the default browser controls exposed. All you see in the DOM is the <video> element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.
Shadow DOM Support in Rapise
With the new Rapise 7.3 release, it is possible to view Shadow DOM elements in the Web Spy (works with Selenium Browsers only).
Shadow root elements are marked with the bold label Shadow Root. You can use the Web Spy to build a locator for a Shadow DOM element and Learn it to add into the object repository.
A locator for a Shadow DOM element has two parts separated by @#@ delimiter. The first part (can be either XPATH or CSS) should point to the Shadow Root in the Light DOM. The second part (always CSS) should point to a child element of the Shadow Root. In the case of nested Shadow DOMs there will be multiple @#@ delimiters.
Example of a locator:
automatically built by WebSpy
/html/body[1]/section[1]/div/guid-generator[1]@#@css=input:first-of-type
after manual editing
//guid-generator@#@css=input
Find the example of a simple page with Shadow DOM on UI Testing Playground.