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

[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!

[kchester]

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]

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]

Any feedback on this?

[Nate614]

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

[kchester]

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]

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.