Not able to handle Inherited Shadow root path

Hi all,

im stuck in shadow root, where im not able click on object which is inherited in another shadow root. i have tried with different methods suggested in google with javascript and css but not worked. i have highlighted the how to handle it. Can anyone help me please.

Hi, could you specify which library you’re using (Selenium, Playwright?) and share the code snippet that doesn’t work? That way, we might be able to help you better.

Hi,

I am using selenium i have tried below code

Execute Javascript var host = document.querySelector(“#sapUshellUserActionsMenuPopover-0-serSettingsBtn”);

sleep 2s

Execute Javascript var shadowRoot=host.shadowRoot;

sleep 2s

Execute Javascript var target = shadowRoot.document.querySelector(“#sapUshellUserActionsMenuPopover-0-userSettingsBtn”).shadowRoot.querySelector(“#ui5wc_10-content”);target.click();

Hi kp,

The Execute Javascript docs says:

code may be divided into multiple cells in the test data and code may contain multiple lines of code and arguments. In that case, the JavaScript code parts are concatenated together without adding spaces and optional arguments are separated from code.

But it’s not clear if a variable created by one Execute Javascript call can be used in the next Execute Javascript call?

I’ll suggest joining those together like this:

Execute Javascript    var host = document.querySelector(“#sapUshellUserActionsMenuPopover-0-serSettingsBtn”);
...                   var shadowRoot=host.shadowRoot;
...                   var target = shadowRoot.document.querySelector(“#sapUshellUserActionsMenuPopover-0-userSettingsBtn”).shadowRoot.querySelector(“#ui5wc_10-content”);target.click();

Hopefully that works for you :crossed_fingers:

Also have you considered using Browser Library (Playwright)? One of the “benefits” of Playwright / Browser Library is the ability of selectors to traverse shadow roots, so unless there’s a really good reason to stay with Selenium, switching to Browser Library might just make your life easier.

Dave.

I was about to say comment about this exact thing:

But it’s not clear if a variable created by one Execute Javascript call can be used in the next Execute Javascript call?

I would assume that it does not retain the state so the variable “host” is already gone when “var shadowRoot=host.shadowRoot” is called.

Also, you probably want to return the value of target to selenium side, i dont think setting a variable will do that..