[Help] How to action on element in shadowRoot nested on Katalon ver 10

Product Forums Katalon Studio
,
1

Currently, on the Katalon version 10.1.0. Cannot read in shadowRoot nested as image below

image
image1328×546 38.8 KB

On browser, run command and retrieved to element corresponding

image
image1547×431 29.4 KB

I also to add a pluggin: “Multi-Level Shadow DOM Automation Plugin” on Store Katalon but seems not working on Katalon version 10.1.0

May you advise how to handle to action on this element?
Thanks and regards

1 Like
2

To interact with elements inside nested Shadow DOM in Katalon Studio v10.1.0, you need to manually traverse the shadow roots using JavaScript execution. Here’s how to do it:

Solution: Use JavaScript to Traverse Shadow DOM

  1. Step 1: Construct a JavaScript Path
    Use document.querySelector to pierce through each shadow root.
    Example for nested shadow roots:

javascript

// Access parent shadowRoot → child shadowRoot → inner element
return document
  .querySelector('parent-shadow-selector')
  .shadowRoot.querySelector('child-shadow-selector')
  .shadowRoot.querySelector('target-element-selector');
  1. Step 2: Execute JavaScript in Katalon
    Use WebUI.executeJavaScript to retrieve the element and interact with it:

groovy

import com.kms.katalon.core.webui.common.WebUiCommonHelper
import org.openqa.selenium.WebElement

// Define the JavaScript to traverse shadow DOM
String script = """
  return document
    .querySelector('parent-shadow-selector')
    .shadowRoot.querySelector('child-shadow-selector')
    .shadowRoot.querySelector('button[type="submit"]');
"""

// Execute the script to get the element
WebElement shadowElement = WebUiCommonHelper.executeJavaScript(script, null)

// Click the element
shadowElement.click()

Example: Click a Button Inside 3-Level Shadow DOM

groovy

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import org.openqa.selenium.WebElement

// Navigate to the page
WebUI.navigateToUrl('https://example.com')

// JavaScript to access nested shadow DOM elements
String script = """
  return document
    .querySelector('parent-shadow')         // Level 1 shadow root
    .shadowRoot.querySelector('child-shadow') // Level 2 shadow root
    .shadowRoot.querySelector('inner-shadow') // Level 3 shadow root
    .shadowRoot.querySelector('#target-button');
"""

// Get the element using JavaScript
WebElement targetButton = WebUI.executeJavaScript(script)

// Perform the action (e.g., click)
targetButton.click()

Key Notes:

  1. Selectors
  • Replace parent-shadow, child-shadow, and inner-shadow with actual HTML tag names or attributes (e.g., div[class="container"]).
  • Test your selectors in the Chrome DevTools Console first.
  1. Dynamic Waits
    Add a delay to wait for shadow DOM elements to load:

groovy

WebUI.delay(3) // Wait 3 seconds before executing the script
  1. Alternative for Inputs
    Use Selenium methods like sendKeys() for input fields:

groovy

WebElement inputField = WebUI.executeJavaScript("...")
inputField.sendKeys("Text")

Why Plugins Might Fail:

  • The Multi-Level Shadow DOM Automation Plugin may not support Katalon v10.1.0. Stick to manual JS execution until katalon confirms on compatibility.
3

Thanks @dineshh for suggest but. Your code likely the same suggestion from Copilot, ChatGPT but I try it and NOT working.

4

can you share error trace

5

Case 1: split each shadowRoot >> Get an error NullPointerException

image
image1492×768 63.1 KB

Case 2: Run a script >> Unable to execute Javascript

image
image1768×848 74.5 KB

6

Hi @dung_nguyen11,

Maybe you should try Custome Keyword to handle Shadow DOM elements. Not sure if this can help you.

7

Thanks @Elly_Tran but I have tried it but it seems not working as expected. However, have another way to work effectively on it but need more time to research again and again :pensive_face:

8

@dung_nguyen11 can you share the solution after your research

9

In your code with the line having the variables, “jsCode” and “shadowRoot”, both of them are underlined, meaning they are undefined. Unless you have them defined in your Variables tab, which you didn’t show us, you need to define what data type the variables are in your code before you use them.

If you have already defined them in your Variables tab, then where do you give them their input value?