Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Automated Testing of Shadow DOM Elements With Katalon Studio

DZone 's Guide to

Automated Testing of Shadow DOM Elements With Katalon Studio

Learn how to use Katalon Studio to script automated testing of Shadow DOM elements.

· Performance Zone ·
Free Resource

What Is Shadow DOM?

Shadow DOM is a technique to help web developers to better encapsulate their code. Shadow DOM works by allowing DOM elements to contain child node and CSS. Shadow DOM also keeps child node and CSS separate from the DOM of the main document. DOM subtree has a root node (Shadow Root) which is unaffected by any modification made to other elements.

Although shadow DOM is a useful solution for Web developers, it becomes a challenge for automation testing because those elements inside a shadow root technically do not exist in the main document DOM. Therefore, test automation frameworks that use the DOM query function would not work properly.

In this article, we will take a look at how Katalon Studio solves the problem and let you test shadow DOM elements in a straightforward way. We will use Chrome as the main browser for testing this feature as Chrome version 53 or later fully supports shadow DOM.

A Shadow DOM Demo Site

We’re going to use the demo site JavaScript Books. All the books in this demo website are comprised of elements that are contained within a shadow root. You can validate this by inspecting a book element (right click on a book element and select Inspect to open the Chrome Developer tools).

Katalon Shadow DOM book element

The inspected shadow root element is shown below:

Katalon shadow root element

Notice the #shadow-root element as it is the representation of a shadow root. All elements inside this shadow root are considered separate from the current DOM document.

Automate Testing Shadow DOM With Katalon Studio

We use the demo site above as the application under test. Consider a simple scenario: when the user clicks on Buy at Amazon, a new window is opened to show the corresponding book on Amazon. We will test if this window is opened successfully.

We assume that you are already familiar with Katalon Studio. If you need to get started with its basic functions instead, please visit Katalon Studio tutorials center.

First, create a new Katalon Studio project, and let’s name it as Shadow DOM Testing.

Katalon DOM testing

Create a new test object to represent a shadow root. Let’s name this test object as 

Katalon-DOM-test-object1

Add a property with the name id and the value allBooks for the sectionAllBooks object.

Katalon DOM allbooks

Next, create a new test object to represent an in HTML DOM. Let’s name this object as aStoreLink.

Create a property for this object, aStoreLink. This property has the name as href and value as http://www.amazon.com/gp/product/1849693129/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1849693129&linkCode=as2&tag=kaidez-20&linkId=CK7X5SMYEHL3BMEQ.

Katalon-DOM-astorelink

Select the Shadow Root Parent option, as shown below. Click on Browse and select SectionAllBooksfrom Object Repository Browser.

Katalon-DOM-root-parent

Once finished, the aStoreLink object has Shadow Root Parent as below

Katalon-shadow-root-parent-2

Now you’re ready to start scripting. Let’s create a test case with the name Shadow DOM Test and open it.

Katalon-Shadow-DOM-test1

Paste the following script into the test case’s Script editor.

Katalon DOM script editor

Now execute the test script by selecting Run > Chrome.

Katalon-DOM-Execute-on-chrome

Katalon Studio should successfully find the element within the shadow root and open the Amazon window to show the book. 

Katalon-DOM-Amazon-window

Congratulations! You have successfully created and run your first Shadow DOM test script with Katalon Studio. For more advanced features and keywords, please visit Katalon Studio tutorials center.

The sample project for this tutorial can be found on GitHub.

Topics:
katalon studio ,shadow dom ,tutorial ,automated testing ,test automation ,performance

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}