Xpath shadow-root

Hello,

I would like to know if kantu allows you to go through shadow-root. Im guessing it’s like selenium an it’s not possible without writing some custom js ? But is it really ?

Have a nice day,

Kocei.

What is the reason why you want to do this? If it is for automation, then I suggest to use the visual UI testing commands XClick (image) and XClick (ocr=text).

Im scrapping some data from a website, that may or may not be there and the order isn’t always the same so i need the tags which are in the shadow-root. I don’t see how XClick will help me with it :frowning:
btw : Ive found a workaround to be able to do what I needed anyway, was just wondering if it was a possibility. Thanks for your quick answer.

Interesting. May I ask what your workaround was? Because as you found out, Kantu can not work yet directly with shadow DOM elements.

Shadow DOM elements inside a shadow root technically do not exist in the main document. Therefore, test automation frameworks that relying on XPath or querySelector to discover elements will not work with Shadow DOM.

But what works are these options:

  • Using XClick and XMove for clicks on shadow DOM elements. It uses computer vision to locate the right place to click, and does not need the DOM.
  • Using sourceExtract for web scraping, if the text in the source code
  • Using OCRExtract and OCRExtractRelative to extract text with OCR

Demo macro for the 3rd option:

  • storeText fails as expected
  • OCRExtractRelative returns the text

The image used for the OCR extraction is

{
  "Name": "shadow1",
  "CreationDate": "2019-7-12",
  "Commands": [
    {
      "Command": "open",
      "Target": "https://chrisbateman.github.io/guide-to-web-components/demos/shadow-dom.htm",
      "Value": ""
    },
    {
      "Command": "click",
      "Target": "xpath=/html/body/h1",
      "Value": ""
    },
    {
      "Command": "storeText",
      "Target": "id=demo1",
      "Value": "var1"
    },
    {
      "Command": "echo",
      "Target": "var1=${var1}",
      "Value": "blue"
    },
    {
      "Command": "OCRExtractRelative",
      "Target": "shadow1_dpi_96_relative.png",
      "Value": "var2"
    },
    {
      "Command": "echo",
      "Target": "var2=${var2}",
      "Value": "green"
    }
  ]
}

Hi There,

I just ran into the exact problem today when ServiceNow changed their UI using “shadow-root (open)” disabling basically their entire product from traditional kantu automation (without xclick).

Are there future plans to get Kantu implemented in a way that it can easily work with “shadow-root (open)”?

xpath dont work with shadow-root (open)

I’m reading articles about “JavaScriptExecutor in Selenium WebDriver”. Unfortunately it seems not be able to do an JavaScript import in the Kanto ExecuteScript command but I was hoping that the team would pick up on this to build it into their Kantu automation engine. I see those shadow-root commands popping up more and more all over the web that makes writing solid automations more and more difficult.

Thanks for asking! We might implement it at a later time, but currently our focus is on further improving the computer-vision commands. For example, we just released XClickText and will soon have XClickTextRelative. These commands work well with shadow-dom elements.

From our point of view, visual automation is the future of web and test automation.

Hi I think I found a way to access the shadow-root with kantu:

Example Shadow-root page: Shadow DOM
Kantu script:

{
“Command”: “executeScript”,
“Target”: “//http://watir.com/examples/shadow_dom.html\n// <div id="shadow_host">\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”
}