How to automate webpage under a closed shadowDOM

Question

A part of the webpage is under closed shadow root mode. How do we automate it through selenium or javascript?

Edit: we can see the DOM under the shadow in chrome://inspect/#apps. This seems to be the child DOM. Is it possible to communicate between parent DOM and the above child DOM to perform actions on child DOM when our ShadowRoot DOM is hindering us to automate?

Answer 1

Simple answer: You can't.

More complex answer:

Override the Element.prototype.attachShadow function to override the closed setting and force it to be open.

Or rewrite your components to not use closed. This could be done with the components checking a query parameter and using closed most of the time and open when in testing mode.

UPDATE

A closed component is an attempt to allow the component creator some level of security that no one else can mess up their component. While the developer tools can still see inside, the outside code can't unless the component exposes the shadowRoot in some way.

What a closed component should do, instead of exposing their shadowRoot is to provide enough properties and functions to allow the user of the component to do everything they need.

Think of the <video> element. They have dozens of properties between it and its parent element HTMLMediaElement and dozens of functions and events. The component has everything needed for the users of <video> to be able to do almost anything.

If we write our component in this way then being close should not be an issue.

Sometimes people want to test every aspect of a Web Component, but they should really only focus on the public interface and not worry about the inner DOM.

How do you test an <input> element. Most of the time you set .value = "some value"; or add an event listener on change or input.

As long as your components properly expose everything needed to be able to test them then being close should no longer be an issue.