Web Components

Web Components

Rapise comes with built-in support for testing the latest generation of web technologies called Web Components including such key features as the ability to test the Shadow DOM and SLOT elements.

What Are Web Components?

Web Components are 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. Rapise includes support for the both Shadow DOM and SLOT elements, two key web component technologies that are heavily used by common applications such as Salesforce.com and ServiceNow.

Concepts

Web Components aims to solve the problems of code collisions when using multiple different custom UI elements on the same page. 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.

Shadow DOM Support

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.

Learning Shadow DOM Elements in Rapise

With Rapise, it is possible to view Shadow DOM elements using the built-in Web Spy

Shadow root elements are placed into #shadow-root nodes. 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

You can see an example of a simple page with Shadow DOM in the Rapise UI Testing Playground.

Piercing Shadow DOM

Rapise can pierce the Shadow DOM. This means that if a CSS selector doesn't use the @#@ delimiter mentioned earlier, Rapise will search for the element without considering Shadow DOM boundaries.

Recording Shadow DOM Elements in Rapise

In addition to its support for learning Shadow DOM elements, Rapise includes full support for recording tests on applications that use the Shadow DOM.

This allows business users and test analysts to more easily record tests with complex business applications such as Salesforce and ServiceNow.

SLOT Element Support

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.