Unanswered

#Shadow DOM blocks UI Spy from seeing page objects within it.

(4) Share

Report

Posted on by kchester

I'm working with a site that uses a method of hiding DOM elements from the main DOM, and as a result of this, the Power Automate Desktop UI Spy can't see elements within that #shadow dom tree. Does anyone here have way to create a control / selector that lets us to interreact with these elements? Maybe there is a process for creating a custom selector?

You can easily reproduce my issue by trying to create a UI element on this page: https://books-pwakit.appspot.com/

Try creating a selector for the input text field on that page. If you inspect the page using browser dev tools, you will see the "#shadow-root (open)" node I am trying to get around to select an element within that.

There are ways to interact by using actions like mouse clicking X/Y coordinates and also using OCR actions, but I would prefer to be able to build custom selectors if possible.

Thanks for looking at my issue!

Categories:

Power Automate Desktop

All responses (6)

Answers (0)

Sort by

kchester 19 on at

Like
a
(0)

Report
Copy link

Link copied!
It does seem like using the "run javascript function on web page" action will allow me to use:

document.querySelector('sl-button').shadowRoot.querySelector('button');

as a way to get to the shadow dom elements, but I haven't been able to get this to fully work yet.
bpandya 5 on at

Like
a
(1)

Report
Copy link

Link copied!

I am interested in knowing the solution for this as well. This is such a common problem these days with companies adopting the shadow dom for data encapsulation. I am following this thread closely. I'm surprised though to see that this hasn't been responded to.
kchester 19 on at

Like
a
(1)

Report
Copy link

Link copied!

Any feedback on this?
Nate614 3 on at

Like
a
(0)

Report
Copy link

Link copied!

Also interested in any feedback or results from this issue above. Any progress or updates?
kchester 19 on at

Like
a
(1)

Report
Copy link

Link copied!
This is a workaround and not what I would consider a solution:

Using Chrome, navigate to the page with the elements in the shadow dom.
Go into dev tools / inspect.
Select the 'Elements' section of the dev tools.
Click the 'inspect an element' button in the upper left of the dev tools.
Mouse over the element code in the inspector until you are highlighting the browser element you want to interact with.
Right-mouse-click on the code and select 'Copy JS Path'
Within the action 'Run JavaScript function on web page', paste the above path into the function field that looks like this:

function ExecuteScript()
{
document.querySelector("body > book-app").shadowRoot.querySelector("app-header > app-toolbar.toolbar-bottom > book-input-decorator").shadowRoot.querySelector("#input").click();
}
mpopplewell 2 on at

Like
a
(0)

Report
Copy link

Link copied!

I am also having this issue, but with what looks to be a much more complex/clustered app structure. I will post the detail of that separately, but very interested in any further learning on this.