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.
Use styles only from the shadow tree, not from the main document.
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 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.
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.