Introduction to Katalon
Katalon is an automating testing software that lets the users test web, mobile or desktop applications and APIs without coding, to deliver efficient and robust software to the consumers. The software is built over the Selenium and Appium automation frameworks, and makes testing convenient and code-free.
Testing Shadow DOM Elements
Shadow DOM
Shadow DOM is a powerful code encapsulation feature which helps DOM elements contain child nodes and CSS. But it is tough to test when automating testing is performed as the elements inside a shadow root do not exist in the main DOM.
Katalon Studio provides Shadow DOM testing, and the step-by-step implementation of the same is given below on the demo site Books. All the elements of this website are under a shadow root. We will identify and verify shadow DOM objects:
- Create a new project in the Katalon Studio. Go to File > New > Project. We name the project Shadow DOM testing.
2. Navigate the search bar in the demo website by clicking right-click> Inspect. The element is highlighted.
3. There are two Shadow DOM objects that need to be identified:
-
The parent object’s property. Here, ‘book-app’ is the parent object.
-
The child object’s property. The child object is the shadow DOM elements we inspect. Here we look at the elements of the search bar.
4. We now return to the Katalon Studio framework to define object properties.
As we know, Katalon Studio supports the following selection methods to create the object properties: XPath, Attributes, CSS, and Image. We will use the Attribute method.
a. Create a parent object:
- Go to File > New > Test Object. Name it as book_app.
- Click Add Property in the Object’s Properties > Add section.
- Fill it as given below:
- After clicking OK, the ‘apptitle’ property appears in the Object’s Properties section.
-
To generate a select locator for the object, check the tickbox Detect object by?
b. Creating the Child Object
- Go to File > New > Test Object. Name it as input.
- Click Add Property in the Object’s Properties > Add section.
- Fill it as given below:
- To generate a select locator for the object, check the tickbox Detect object by?
- Once we have defined the property, go to Settings > Shadow DOM parent > Browse. An Object Repository Browser dialogue will open up.
- Now choose book_app object as the parent and click OK
-
The input object identifies book_app as its Shadow Root Parent now.
5. Create a new test case. Go to File > New > Test Case. We name ours Shadow DOM Test.
6. Switch to the Script tab and copy-paste the given code in the test script:
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
//Open the browser and navigate to the AUT website
WebUI.openBrowser('https://books-pwakit.appspot.com/explore?q=')
//Input text into the search bar
WebUI.setText(findTestObject('Object Repository/input'), 'hello World')
//Delay 5s to view the result
WebUI.delay(5)
//Close the browser to clean up
WebUI.closeBrowser()
7. Go to the main toolbar and click Run> Chrome
Katalon Studio will now input the text “hello world” into the search bar.
19+ registered 
