[Demo & Integration] Handling Shadow DOM with Katalon Studio

Product Forums Tips & Tricks
, ,
1

:information_source: This is Part 5 of our Demo & Integration series. Read Part 4 here: [Demo & Integration] Extract OTP (one-time password) with Katalon

Today we will look at the video Katalon Studio handling Shadow DOM

:pushpin: Please note that the video will open in a new tab.

Introduction

This project demonstrates how Katalon Studio can help you to automate applications that are hidden behind the Shadow DOM. It also contains some test cases for the Shadow DOM.

What is the Shadow DOM?

A Shadow DOM allows a hidden DOM (Document Object Model) tree to be attached to elements in the regular DOM tree.

The usual way of finding an element with Katalon Studio using Locators will not work here, it will return the error NoSuchElementException. And if you look at the DOM structure, every element that has ShadowDOM also has a “shadowRoot” property which describes the underlying element. Shadow DOM provides encapsulation for the JavaScript, CSS, and template in a Web Component.

Other terminologies

  • Shadow Host: The regular DOM node that the shadow DOM is attached to.
  • Shadow tree: The DOM tree inside the shadow DOM.
  • Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
  • Shadow Root: The root node of the shadow tree.

Requirements

  • Katalon Studio
  • Shadow DOM test application

Sample project

Use case

In the sample project we will be using two different applications for the Shadow DOM:

How to automate

  • Record a test script via Katalon Recorder.
  • Save test objects and test cases.
  • Run the test on the browser.
  • Verify the test result.

Thanks for reading! :sunglasses:

:pushpin: See the rest of our Demo & Integration videos here.
:pushpin: You can find similar topics to this one by searching for the tag demo-integration

1 Like