How can we find the Xpath for Shadow Element

There are a few reasons why some elements may not be accessible with Selenium. The first reason is that the element may be located in a shadow DOM. Shadow DOM is a type of document object model where elements render in a separate tree from the main document. This means that they are not visible to Selenium unless you know how to access them. The second reason is that the element may be dynamically generated, which means it is not present in the HTML source code.

What is DOM?

Document Object Model(DOM) is tree representation of HTML nodes.

How to Identify Shadow DOM Exists?

The shadow DOM can identify by a shadow root XPath that is enclosed somewhere in the middle of the HTML structure.

#shadow-root (open) is implemented before the start of every Shadow DOM.

In HTML there can be multiple shadow root sections each section’s shadow properties are completely hidden from the actual Main DOM.

So, we cannot access the shadow elements directly from Main DOM

What is Shadow DOM?

Shadow DOM subset of DOM.

Shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into the main document DOM tree. This creates a barrier between what the developer and the browser can reach; the developer cannot access the Shadow DOM the same way they would with nested elements, while the browser can render and modify that code the same way it would with nested elements.

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — the Shadow DOM tree starts with a Shadow root, underneath which you can attach any element in the same way as the normal DOM.

There are some bits of Shadow DOM terminology to be aware of:

Shadow host: The regular DOM node to which the Shadow DOM is attached.

Shadow tree: The DOM tree inside the Shadow DOM.

Shadow boundary: The place where the Shadow DOM ends and the regular DOM begins.

Shadow root: The root node of the Shadow tree.

What is the usage of Shadow DOM?

Shadow DOM serves for encapsulation. It allows a component to have its own “shadow” DOM tree that can’t be accidentally accessed from the main document, may have local style rules, and more.

Here are some of the essential properties of Shadow DOM:

Have their own ids space.

Invisible to JavaScript selectors from the main document, such as querySelector.

Use styles only from the shadow tree, not from the main document.

When we try to find Shadow DOM elements using selenium locators, it will throw 'NoSuchElementException'. To access these Shadow DOM elements, we need to use javascriptexecutor executeScript() function. If you look at the DOM structure, every element that has ShadowDOM also has a shadowRoot property which describes the underlying elements.

Before looking at the example, first let see about DOM and Shadow Dom. DOM - It is a programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.

Shadow Dom provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Shadow DOM is just normal DOM with two differences, one is 'how it is created/used' and other one is 'how it behaves in relation to the rest of the page'. Shadow DOM separates content from presentation thereby eliminating naming conflicts and improving code expression.

Shadow DOM works by allowing DOM elements to contain child node and CSS. Shadow DOM also keeps child node and CSS separate from the DOM of the main document. DOM subtree has a root node (Shadow Root) which is unaffected by any modification made to other elements.

Here we are writing the correct Xpath for the webelement it is not locating the element and throwing the NosuchElementException.

Here we are not able to find the xpath of the input box by using normal locators because this input element is located in the shadow dom. So we can use only the cssSelector but we cannot use directly cssSelector to locate the elements. What we have to do is first of all we need to capture all the elements which are present inside the shadow dom then we can interact with those elements by using cssSelector.

Here input tag is not part of shadow root but app_header is under the shadow root ,with the help Of shadow host we can get the all the elements.For these elements we have to write javascriptexecutor class .AS many shadow host are there those many javascripts we have to write .

To enter the text in the input box , in this way we can find the xpath for sahdow element.We can find multiple shadow doms from the dom.Now we will see how can we interact with the elements in the nested shadow dom

Now we are trying to locating the element shop button . It is located in the nested shadow dom using another application.In this application we will get more than one shadow host and

Shadow root .

Here first we need to locate the host element of shadow root then get the access of shadow dom using JS through host element, it can be called as last element.Now shadow dom elements can be accessed using this last element.Similarly if an element is inside multiple shadow doms then we will have to traverse one by one all the shadow dom and then access element.