Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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);
                @supputuri the element is a button that is above of the root. But when I'm clicking on this button it returns NPE again. That's why I decided to dig dipper to the svg / path
– Y_Sh
                Jun 7, 2019 at 20:17
                shadow-root is not attached to button. So you have to use xpath //button//use[@lightning-primitiveIcon_primitiveIcon] as the shadowHost as mentioned in my answer
– supputuri
                Jun 7, 2019 at 20:23
                as you can see the button is under the shadow-root. Logically the browser should click on it, but it failed with NPE too. So weird.
– Y_Sh
                Jun 11, 2019 at 16:42
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?
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)
                Thanks, tried that but the xpath: //button[@title='Close Order Status']//use  with "//use" identifier could NOT be located through the console neither through selenium: org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"//button[@title='Close Order Status']//use"}
– Y_Sh
                Jun 11, 2019 at 16:55
                Can you please share the screenshot of the Dev Tools > Element tab base where you see the css path. As shown under Quick Way to find path in my updated answer.
– supputuri
                Jun 11, 2019 at 19:45
                Check the updated answer. button[title='Close Order Status'] svg use is the correct shadow-host element, this should work now.
– supputuri
                Jun 12, 2019 at 16:54
You can use the javascript something like this.
WebElement clearData = (WebElement) js.executeScript("return document.querySelector('button[title='Close Order Status'] svg use').shadowRoot.querySelector('svg path')");
Check How to locate the #shadow-root (open) elements through cssSelector link for more information.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.