How to navigate to Shadow-root elements with Kantu

Ui.Vision General Discussion
1

It really took me a while to figure that out and i hope this is helpful to anyone who tries to reach elements with Kantu that are inside Shadow-root elements. So far i tested in Chrom and Edge and it worked fine.

The solution is using javascript with the kanut “execute” command.
I used the following test shadow-root website to show the solution:
http://watir.com/examples/shadow_dom.html

With the following HTML code:

image

Kantu script with the .shadowRoot command:

{
“Command”: “executeScript”,
“Target”: “//http://watir.com/examples/shadow_dom.html\n//

\n\n//Works!!!\nvar test = document.querySelector(‘#shadow_host’).shadowRoot.querySelector(‘#shadow_content’).querySelector(‘.info’).innerHTML;\n//-> “some text”\nvar test = document.querySelector(‘#shadow_host’).shadowRoot.querySelector(‘#shadow_content’).innerHTML;\n//-> “<span class="info">some text”\nreturn test;”,
“Value”: “myvar”,
“Description”: “shadow dom test page”
}

image
image1196×490 20.5 KB

3 Likes
2

This is awesome. It is what I needed. Is there a way in UI.Vision to select a frame under the shadow root since I can’t get to it by index?

3

That’s a good question!

I never have faced this kind of challenge so I can’t give you an answer for this. But if you find out, please post this back here. I might need that in the future.

Thank you
Hendrik

4

I found the following code on that addresses this problem. It works when run in an executeScript command.

// Get the shadow host element
const shadowHost = document.querySelector(‘your-shadow-host-element’);

// Access the shadow root
const shadowRoot = shadowHost.shadowRoot;

// If the shadow root is open, you can access its elements
if (shadowRoot) {
const elementInsideShadowRoot = shadowRoot.querySelector(‘element-selector’);
// Do something with the element
} else {
// The shadow root is closed, you can’t access it directly
}