Spotlight on Rapise 7.3: Shadow DOM Support

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!

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).

Web Spy Showing Shadow DOM

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.

web testing shadow dom document object model

Spira Helps You Deliver Quality Software, Faster and with Lower Risk.

Get Started with Spira for Free

And if you have any questions, please email or call us at +1 (202) 558-6885

Free Trial