Automation testing of shadow DOM elements with Katalon Studio

Important:

• Chrome browser from version 53 onwards.

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.

This article shows you how to test shadow DOM elements in Katalon Studio.

In this demonstration, 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. The first step is to identify shadow DOM objects, then verify them by successfully inputting: "hello World" into the website search bar.

Identify shadow DOM objects

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:

• The property of the parent object. The parent object is the shadow host. Shadow host is the regular DOM node that the shadow DOM is attached to. In this demo site, book-app is the parent object.
• The property of the child object. The child object is the shadow DOM elements we are inspecting. In this example, we look at the property of the search bar's elements.

  You can learn more about object properties from the Mozilla developer documentation: Working with objects.

Define object properties

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. In this example, we use the Attributes method.

To learn more about selection method for object properties, see: Selection methods for Web objects in Katalon Studio.

Create the parent object

1. 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.
   Tip:

   • For better management, you can also create a new folder by selecting Test Suites > New > Folder, then create new test suites inside that folder.

2. Name the object as book_app.
3. 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

4. Click OK. The apptitle property appears in the Object's Properties section.
5. Check the Detect object by? box in the apptitle property line to generate a Selected Locator for the object.
   

Create the child object

1. 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.
   Tip:

   • For better management, you can also create a new folder by selecting Test Suites > New > Folder, then create new test suites inside that folder.

2. Name the object as input.
3. 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

4. Click OK. The input property appears in the Object's Properties section.
5. Check the Detect object by? box in the input property line to generate a Selected Locator for the object.
   
6. After defining the property, in the Settings section, choose the Shadow Root Parent option, then click Browse. The Object Repository Browser dialog opens.
   
7. 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

1. From the main toolbar, click Create new Test Case.
   Or, in the Tests Explorer panel, right-click the Test Case folder then select New > Test Case.
   
   Alternatively, you can also go to File > New > Test Case from the main menu.
   Tip:

   • For better management, you can also create a new folder by selecting Test Cases > New > Folder, then create new test cases inside that folder.

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

   

3. Save and run the test case.
   Note:

   • For Katalon Studio versions before 8.6.0, when testing with shadow DOM objects, you can 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 > Default wait for element timeout (in seconds).

Katalon Studio successfully find the element within the shadow root and input the text: "hello World" into the search bar.

Work with shadow DOM elements

Note:

• From Katalon Studio version 8.6.0 onwards, you can test multi-level of nested shadow DOM using Record and Spy utility.

​To work with shadow DOM elements, follow these steps:

1. Use the Spy utility to capture parent objects that contain shadow DOM elements.​
2. Identify the properties of the shadow DOM element.
3. Create a new object in Katalon Studio with properties defined accordingly.
4. In the new object setting, select Shadow Root Parent​ option and define with the parent object from the first step.
   This allows Katalon Studio to traverse through parent objects via generated CSS selector to detect shadow DOM objects by their properties. See Create object locator.
   For example, the following test execution log shows that Katalon Studio finds the parent object first. Once the parent object was found, Katalon Studio finds the shadow DOM element by CSS selector.

Limitations

• Katalon Studio does not support recording the click action on test objects with the shadow DOM button object type. Some elements on shadow DOM cannot be detected by Selenium 3, so they might be unclickable. The workaround for this issue is to manually replace the Click keyword with the Enhanced Click keyword. See [WebUI] Enhanced Click.
• When using Record and Spy utilities, you cannot take screenshots of shadow DOM test objects. Katalon Studio does not support the XPath and Screenshot locator strategies for shadow DOM test objects. We recommend using the CSS locator strategy only.

Modify object properties at runtime

If you have multiple and similar objects you want to quickly interact with during test execution, and you really don't want to spend time writing duplicate steps to interact with them, the approach below will help you reduce the time and maintain cleaner codes.

Use CSS or XPath to locate your elements, and then you start changing the IDs. For example:

TestObject yourObject = WebUI.modifyObjectProperty(findTestObject('Object Repository/Some object'), 'css', 'equals', '#${i}', true)

where 'i' is the loop counter. You can put it all inside of a loop that will read your excel sheet:

for (def i=0; i <= fineTestData('Path to your excel').getRowNumbers(); i++) {}

https://www.katalon.com/resources-center/tutorials/data-driven-testing/ for linking data with test.

Credit to Mate Mrse