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"
    }
  ]
}