Obtaining value from shadow root

Hello!!
I am not an expert programmer so I am struggling here. I would really appreciate a bit of a help! :slight_smile:
I am trying to figure out how to get or at least verify that a value in this case “8” is inside the div for this shadow root. As far as I understand for now, the logic is similar to an iframe. I have to tell Katalon which is the parent container so that it knows where to look for the shadow root.

I am not being able to make it. Here is how it looks

So I created a test objec called Nitrogen Yield with the following xpath:

//input[@id=‘nitrogen-yield’]

Then I created another test object called Shadow value, with the following xpath : //div[contains(text(),‘8’)] and the previous object called Nitrogen Yield as “Shadow Root Parent”

But when I run a Verify element present on “Shadow value” object, I get as message:
‘TestObject - ‘Object Repositor/xxxxx/Nitrogen yield’’ is not a shadow root element)

Could someone please explain me how I can verify the 8?

Thanks in advance!

Hi there

Working with Shadow DOM in Katalon Studio has the following known limitations:

  • Only for Chrome browser (53 to latest Version). Other browsers will be considered for future releases.
  • Only allow 1 level of nested Shadow DOM parent
  • Record and Spy feature will not work with Shadow DOM (due to elements do not exist in the DOM).

Jass

Here is an example:

var container = document.querySelector(’#example’);
//Create shadow root !
var root = container.createShadowRoot();
root.innerHTML = ‘

Root
Element in shadow
’;

//Access the element inside the shadow !
//“container.shadowRoot” represents the youngest shadow root that is hosted on the element !
console.log(container.shadowRoot.querySelector(".test").innerHTML);

Admin

Hello Jass,

I have Shadow-root in DOM

I define a shadow parent like: (//main[contains(@class,‘Detailed’)]//div[@class=‘htmlTemplate’])[1]
and the shadow object which I need to verify with property like xpath as you see on picture below

but I am not able to catch the text string …
Could you pls help me? or navigate me what I did wrong?

Thank you very much.