Web Components Support in Rapise 7.4

October 25th, 2022 by Adam Sandman

As you may remember, we recently introduced support for Shadow DOM in Rapise 7.3. Now with the release of Rapise 7.4 we take the Shadow DOM support to the next level and also enable support for another technology from the Web Components suite: HTML Templates; to be more specific - for SLOT element. Let’s deep dive into the details of Web Components as well as the new SLOT element, and how Rapise supports them for automated web testing.

What are Web Components?

Web Components is a set of different technologies that enable developers to isolate markup, code and style of reusable components and thus avoid collisions. A simple example of a collision is when styles from one reusable component turn the visual representation of another component into a mess.

For a test automation tool it is important to support those technologies that affect the browser DOM and how the XPath and CSS selectors work. This is why Rapise now includes support for the both Shadow DOM and SLOT elements.

Concepts and usage

As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.

Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.

Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

The basic approach for implementing a web component generally looks something like this:

Create a class in which you specify your web component functionality, using the class syntax.
Register your new custom element using the CustomElementRegistry.define() method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, what element it inherits from.
If required, attach a shadow DOM to the custom element using Element.attachShadow() method. Add child elements, event listeners, etc., to the shadow DOM using regular DOM methods.
If required, define an HTML template using <template> and <slot>. Again use regular DOM methods to clone the template and attach it to your shadow DOM.
Use your custom element wherever you like on your page, just like you would any regular HTML element.

Shadow DOM

A Shadow DOM component defines a DOM subtree that is not accessible by XPath and CSS selectors originating from the DOM tree that includes the component. A Shadow DOM tree is placed under a Shadow Root element in the parent DOM. It is important to understand that there are two Shadow Root modes: open and closed. The internal structure of a Closed Shadow DOM is completely inaccessible from the outside and we can do nothing about it. But most of the Shadow Roots in use typically have the Open Shadow DOM mode and it enables the usage of JavaScript code and CSS selectors to access its contents.

#1 Rapise shows Shadow DOM in the WebSpy.

#2 Rapise supports selectors that may dig into Shadow DOM. For this purpose use @#@ delimiter. For example:

//guid-generator@#@css=input#editField

Note: selecting an element within the Shadow DOM requires CSS selectors. The use of XPath is not supported.

#3 The WebSpy in Rapise 7.4 allows tracking elements within Shadow DOM. Such elements are highlighted with a red border (as any other element) and in addition they are filled with pink shading.
#4 Rapise 7.4 supports recording for Shadow DOM elements.

SLOT Element

The <slot> HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

The <slot> element is an insertion point in the Shadow DOM that can be filled with the content from the Light DOM (the term Light DOM is used to distinguish the standard DOM from the Shadow DOM). Since SLOT content contains the Light DOM - its nested elements can be accessed with XPath and thus the Shadow DOM border becomes transparent.

#1 Rapise shows child elements of a SLOT element in the Web Spy.