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

Automation Testing of Shadow DOM Elements With Katalon Studio

DZone's Guide to

Automation Testing of Shadow DOM Elements With Katalon Studio

Learn how the open source solution Katalon Studio can help with the automation of shadow DOM testing for web development.

· DevOps Zone
Free Resource

Download the blueprint that can take a company of any maturity level all the way up to enterprise-scale continuous delivery using a combination of Automic Release Automation, Automic’s 20+ years of business automation experience, and the proven tools and practices the company is already leveraging.

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 : http://www.kaidez.com/samples/template-shadowdom-practice/.

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.

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

Katalon DOM testing

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

Katalon-DOM-test-object1

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

Katalon DOM allbooks

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

5. Create a property for this object, aStoreLink. This property has the name ashref 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

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

Katalon-DOM-root-parent

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

Katalon-shadow-root-parent-2

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

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

Katalon DOM script editor

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

'Open browser and navigate to the AUT website'

WebUI.openBrowser('http://www.kaidez.com/samples/template-shadowdom-practice/')

'Click on the destination book store link'

WebUI.click(findTestObject('aStoreLink'))

'Delay 5s to view the result'

WebUI.delay(5)

'Verify that a new window is opened'

WebUI.switchToWindowTitle('Object-Oriented JavaScript, 2nd Edition: Stoyan Stefanov, Kumar Chetan Sharma: 9781849693127: Amazon.com: Books')

'Close the browser to clean up'

WebUI.closeBrowser()

9. Now execute the test script by selecting Run > Chrome.

Katalon-DOM-Execute-on-chrome

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

For more tutorials, please visit the Katalon Studio website!

Download the ‘Practical Blueprint to Continuous Delivery’ to learn how Automic Release Automation can help you begin or continue your company’s digital transformation.

Topics:
automated testing ,test automation ,software testing ,shadow dom ,katalon studio ,selenium ,web testing ,css ,devops

Published at DZone with permission of Oliver Howard. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}