Need help to click on the element under the shadow Root (closed) type

Question

Null Pointer Exception on click at the element located inside of the shadow Root (closed)

Tried to handle it with Java Script:

public WebElement getShadowRootElement(WebElement element) {
    return (WebElement)
            ((JavascriptExecutor)
                    driver).executeScript("return 
arguments[0].shadowRoot", element);
}

Result:

Cannot read property 'shadowRoot' of null

Added screenshots: 1.

Answer 1

If your usecase is to interact with the <path> element which is within the <svg> tag, is indeed within a #shadow-root (closed).

@hayatoito (creator of Shadow DOM) in this comment clearly mentions:

The original motivation of introducing a closed shadow tree is "Never allow an access to a node in a closed shadow tree, via any APIs, from outside", AFAIK. Like that we can not access a node in the internal hidden shadow tree which is used in <video> element, in Blink.

In fact, I designed a closed shadow tree in such a way. If there is a way to access a node in a closed shadow tree, it should be considered as a bug of the spec.

I think it's totally okay to have an API to allow an access in the layer of Chrome apps or extensions. However, for a normal web app, I think the current agreement is "Never allow it".

If we allowed it, that means we do not need a closed shadow tree. Just having an open shadow tree is enough, I think.

---

WebDriver perspective

Recently, @AutomatedTester [David Burns, Chief Bacon Officer, Mozilla Corporation] initiated a discussion on WebDriver - Testability of web components

• Requests
• Proposals
• Issue Tracker

Currently Selenium Team is open for accepting pull requests for the same.

---

Outro

Here you can find a relevant discussion on How to automate shadow DOM elements using selenium?

Answer 2

Here is the solution.

WebElement closeElement = (WebElement) js.executeScript("return document.querySelector('button[title='Close Order Status'] svg use').shadowRoot.querySelector('svg path')");
closeElement.click();     

Quick Way to find path

Just providing the screenshot which will give the idea how to find the path. (FYI this screenshot is for the clear data button in the chrome clear history)