How to navigate to Shadow-root elements with Kantu

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”
}

1 Like