Automation testing of Shadow DOM elements with Katalon Studio
Important: - Chrome Browser from version 53 onwards. You can see browser versions with shadow DOM support here: Shadow DOM (V1)
Shadow DOM allows DOM elements to contain child nodes and CSS, which helps web developers by better encapsulating their code. But this creates challenges for automation testing, because elements inside a shadow root technically do not exist in the main DOM.
In this article, we demonstrate how to test shadow DOM elements in Katalon Studio.
We use the demo site Books: https://books-pwakit.appspot.com/explore?q=
. All the elements in this demo website are under a shadow root. In this demonstration, we identify shadow DOM objects, then verify them by successfully inputting: "hello World" into the website search bar.
In the demo website, navigate to the search bar. Right-click on the page and choose Inspect. The Chrome Developer tool opens and highlights the selected element.
At this point, there are two shadow DOM elements that you need to identify in the Chrome Developer tool:
After identifying the property of the parent object and the child object, return to
Katalon Studio to define object properties.
Katalon Studio supports the following selection methods to create the object's properties: Attributes, XPath, CSS, Image. You can learn more about using the best selection method for object properties here:
Selection Methods for Web Tests in Katalon Studio. In this example, we use the Attributes method.
Create the parent object
- In the Tests Explorer panel, right-click on the Object Repository folder, then select New > Test Object.
Alternatively, you can also go to File > New > Test Object from the main menu.
- Name the object as
book_app
. - In the Object's Properties section, click Add. The Add Property dialog opens. Fill in the following information:
Name: apptitle
Match condition: equal
Value: BOOKS
- Click OK. The
apptitle
property appears in the Object's Properties section. - Check the Detect object by? box in the
apptitle
property line to generate a Selected Locator for the object.
Create the child object
- In the Tests Explorer panel, right-click on the Object Repository folder, then select New > Test Object.
Alternatively, you can also go to File > New > Test Object from the main menu.
- Name the object as
input
. - In the Object's Properties section, click Add. The Add Property dialog opens. Fill in the following information:
Name: id
Match condition: equal
Value: input
- Click OK. The
input
property appears in the Object's Properties section. - Check the Detect object by? box in the
input
property line to generate a Selected Locator for the object. - After defining the property, in the Settings section, choose the Shadow Root Parent option, then click Browse. The Object Repository Browser dialog opens.
- In the open dialog, choose the
book_app
object as the parent object. Click OK.
The input object identifies book_app
as its Shadow Root Parent.Create a test case with shadow DOM objects
- From the main toolbar, click on Create new Test Case.
Or, in the Tests Explorer panel, right-click on the Test Case folder and select New > Test Case.
Alternatively, you can also go to File > New > Test Case from the main menu.
- In the new test case, switch to the Script tab, copy and paste the following script into the test script.
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('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()
In
Script mode:

In
Manual mode:

- Save and run the test case.
Tip: When testing with Shadow DOM objects, you should decrease the Default wait for element timeout (in seconds) to reduce the default timeout period that Katalon Studio waits for the application under test to be loaded when executing the automation test. You can find this option in Project Settings > Execution.
Katalon Studio successfully find the element within the shadow root and input the text: "hello World" into the search bar.