1

Firstly, Karate UI automation is really awesome tool. I am kind of enjoying it while writing the UI tests using Karate. I ran into a situation where in, i was trying to fetch the shadowRoot elements. I read few similar posts related to javascript executor with karate and learnt that it is already answered. it is recommended to use driver.eval. But in Karate 0.9.5 there is no eval, it has script() or scriptAll(). I have gone through documentation couple of times to figure out how i can fetch element inside an element but no luck. Using traditional selenium+java, we can fetch shadowRoot like this way: something like shadowRoot which sits inside a parent element like div or body.

//downloads-manager is the tagname and under that downloads-manager, a shadowRoot element exists
The HTML looks like this. it is from chrome://downloads.
<downloads-manager>
   #shadow-root(open)

</download-manager>
WebElement downloadManager =driver.findElement(By.tagName("downloads-manager");
WebElement shadowRoot= (WebElement)((JavaScriptExecutor)driver)
                                      .executeScript("return arguments[0].shadowRoot",downloadManager);

So i tried the following in Karate UI

  script("downloads-manager","return _.shadowRoot"); //js injection error

  script('downloads-manager', "function(e){ return e.shadowRoot;}"); // same injection error as mentioned above.

def shadowRoot = locate("downloads-manager").script("function(e){return e.shadowRoot};"); //returns an empty string.

I bet there is a way to get this shadowRoot element using Karate UI but i am kind of running out of options and not able to figure out this. Can someone please look into this & help me?

-San

sanm
  • 35
  • 1
  • 5

1 Answers1

0

Can you switch to XPath and see if that helps:

* def temp = script('//downloads-manager', '_.innerHTML')

Else please submit a sample in this format so we can debug: https://github.com/intuit/karate/tree/develop/examples/ui-test

EDIT: after you posted the link to that hangouts example in the comments, I figured out the JS that would work:

* driver 'http://html5-demos.appspot.com/hangouts'
* waitFor('#hangouts')
* def heading = script('hangout-module', "_.shadowRoot.querySelector('h1').textContent")
* match heading == 'Paul Irish'

It took some trial and error and fiddling with the DevTools console to figure this out. So the good news is that it is possible, you can use any JS you need, and you do need to know which HTML element to call .shadowRoot on.

EDIT: for other examples of JS in Karate: https://stackoverflow.com/a/60800181/143475

Peter Thomas
  • 54,465
  • 21
  • 84
  • 248
  • I am not looking for html but would need a child inside this downloads-manager which is a shadowRoot. So when i tried with xpath , i get an empty string. ``` def shadowRoot = script('//downloads-manager',"_.shadowRoot"); ``` it gives me a empty string. A sample page which has shadowRoot elements is chrome downloads page i.e chrome://downloads Thank you.! – sanm Mar 10 '20 at 14:35
  • @sanm - if you can I would really like an HTML sample, for e.g. once you get the shadow root - now what. are you sure it works in selenium. maybe you should try some other JS. you can open an issue, and without a sample we may need to wait for someone else to step up and help ;) – Peter Thomas Mar 10 '20 at 14:58
  • Here is an example of a HTML page which has shadow root elements. http://html5-demos.appspot.com/hangouts in this demo page, i want to get the **header** title on Chat window which is already opened.. The header title says 'Paul Irish'. The header html tag is : `

    Paul Irish

    ` To fetch this via JS, go to that element, right click on that element and copy -> Copy JS path. `document.querySelector("#hangouts > hangout-module").shadowRoot.querySelector("hangout-header > h1")`. I have even tried the above js path via script method in Karate UI but did not help.     – sanm Mar 11 '20 at 05:41
  • However i shall open an issue on this. Thanks again for looking into this. – sanm Mar 11 '20 at 05:42