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.
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.
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.
With Rapise, it is possible to view Shadow DOM elements using the built-in Web Spy
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
after manual editing
You can see an example of a simple page with Shadow DOM in the Rapise UI Testing Playground.
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.
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.
Rapise is able to show the child elements of a SLOT element in the Web Spy.
In addition, Rapise is able to generate minimized object selectors for SLOT nested elements automatically.