Determining shadow host via JavaScript

Libraries Browser
1

Hi all,
I’m using the browser library and I need to determine an element in a shadow dom to click on it. In this case I tried the following:

${shadow_host_1} =    Evaluate JavaScript   document.querySelector('${SHADOW_HOST_1_SELECTOR}')
Run Keyword If    ${shadow_host_1} == None    Fail    Could not find shadow host 1
${shadow_root_1} =    Evaluate JavaScript    arguments[0].shadowRoot    ${shadow_host_1}

As ${SHADOW_HOST_1_SELECTOR} I use a css selector like con-app[theme=“XXX”].

When I run the test case I get the following error message:
Unexpected token “querySelector(” while parsing selector “document.querySelector(‘con-app[theme=“XXX”]’)”.
I really tried many variations with the JavaScript code string but it doesn’t seem to have an effect.

Could someone please help and tell me would I did wrong or if there is a better opportunity to do this?

Thanks a lot in advance!

2

Have you tried to just Click with css locator? Browser library should find the locator inside a shadow root without need for JavaScript.

3

Unfortunately not! I guess the reason for that is that the element to click is not straight forward to find. The shadow dom looks like as follows:

Console

SH1=document.querySelector(‘c-app’).shadowRoot
ShadowRoot { … }

SH2=SH1.querySelector(‘router-slot’).firstChild

SH2.shadowRoot
ShadowRoot { … }

Any idea to solve this?

4

I used JavaScript earlier with Selenium, but currently with Browser don’t have needed them anymore. Is this article familiar to you - it may help: https://testersdock.com/shadow-dom-robot-framework/

5

Yes, I’ve seen it!
What I reallly cannot understand is that when this string

document.querySelector(‘con-app[theme=“XXX”]’).shadowRoot.querySelector(‘router-slot’).firstChild.shadowRoot.querySelector(‘c-ranges’).shadowRoot.querySelector(‘div[data-range=“X11”]’);

works under the browser console but when I want to use it in RF I get the token error.
Even when I use

document.querySelector(“con-app[theme=‘XXX’]”).shadowRoot.querySelector(“router-slot”).firstChild.shadowRoot.querySelector(“c-ranges”).shadowRoot.querySelector(“div[data-range=‘X11’]”);

6

Can you paste the entire xpath. Usually with execute javascript the shadow path won’t work always. You have to use dynamic path. If you can post the xpath code of the element and the html piece of code from where you need to extract it would be helpful. Thanks.

For example:
xpath=//element[@id=‘someid’]/otherelememt//childelement

7

Hi Sapan,
thanks for your message but I found out that xpath does not work with shadow-dom and I have to use css instead.
As I use the browser library the use of Evaluate JavaScript is not really needed.

8

yes xpath will not work. But keeping a dynamic xpath will always work for xpath. I had resolved this issue the same way sometime ago. So, if you can paste the entire xpath and source code, we can definitely come up with a dynamic xpath that will always work.