July 7th, 2022 by inflectra
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!
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:
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.
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
Example of a locator:
automatically built by WebSpy
after manual editing
Find the example of a simple page with Shadow DOM on UI Testing Playground.
And if you have any questions, please email or call us at +1 (202) 558-6885
Are you looking for a platform that helps you deliver better software, faster?