Table of Contents
Enroll in Selenium Training

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.

Demo Site - Shadow DOM

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

Automate Shadow DOM Elements with Katalon Studio

The inspected shadow root element is shown as below:

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.

shadow DOM elements inspected

Automate Shadow DOM Elements 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.

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

shadow DOM elements - create new project

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

shadow DOM elements - create a new test object

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

shadow DOM elements - allbooks

  1. Next, create a new test object to represent an in HTML DOM. Let’s name this object as aStoreLink.
  2. 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

shadow DOM elements - astorelink

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

shadow DOM elements - root parent

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

shadow DOM element - root parent 2

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

shadow DOM element - test

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

shadow DOM elements - script editor

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

shadow DOM elements - Execute on chrome

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

shadow DOM elements - 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 at https://github.com/katalon-studio/ShadowDOMSampleProject.

Handling automation tests with XPath in Katalon Studio
Handling automation tests with XPath in Katalon Studio
Previous Article
How to Handle Scroll in Mobile Automation with Katalon Studio
How to Handle Scroll in Mobile Automation with Katalon Studio
Next Article

Similar Articles

Feedback