How to automate shadow DOM elements using selenium?
There is a very good plugin that can be used with selenium project shadow-automation-selenium. It helps in writing much better, readable and maintainable code. Using this you can access multi level of shadow DOM (upto 4 levels ) . This uses simple css selector to identify elements.
WebElement findElement(String cssSelector)
: use this method if want single element from DOM
List<WebElement> findElements(String cssSelector)
: use this if you want to find all elements from DOM
WebElement findElements(WebElement parent, String cssSelector)
: use this if you want to find a single elements from parent object DOM
List<WebElement> findElements(WebElement parent, String cssSelector)
: use this if you want to find all elements from parent object DOM
WebElement getShadowElement(WebElement parent,String selector)
: use this if you want to find a single element from parent DOM
List<WebElement> getAllShadowElement(WebElement parent,String selector)
: use this if you want to find all elements from parent DOM
boolean isVisible(WebElement element)
: use this if you want to find visibility of element
boolean isChecked(WebElement element)
: use this if you want to check if checkbox is selected
boolean isDisabled(WebElement element)
: use this if you want to check if element is disabled
String getAttribute(WebElement element,String attribute)
: use this if you want to get attribute like aria-selected and other custom attributes of elements.
void selectCheckbox(String label)
: use this to select checkbox element using label.
void selectCheckbox(WebElement parentElement, String label)
: use this to select checkbox element using label.
void selectRadio(String label)
: use this to select radio element using label.
void selectRadio(WebElement parentElement, String label)
: use this to select radio element from parent DOM using label.
void selectDropdown(String label)
: use this to select dropdown list item using label (use this if only one dropdown is present or loaded on UI).
void selectDropdown(WebElement parentElement, String label)
: use this to select dropdown list item from parent DOM using label.
How to use this plugin:
You will have to dependency in your project.
Maven
<dependency>
<groupId>io.github.sukgu</groupId>
<artifactId>automation</artifactId>
<version>0.0.4</version>
<dependency>
for html tag that resides under a shadow-root dom element
<properties-page id="settingsPage">
<textarea id="textarea">
</properties-page>
You can use this code in your framework to grab the textarea element Object.
import io.github.sukgu.*;
Shadow shadow = new Shadow(driver);
WebElement element = shadow.findElement("properties-page#settingsPage>textarea#textarea");
String text = element.getText();
How to automate Shadow DOM using Selenium Java framework
In Selenium 4.0, for Chromium versions 96+ you can use the getShadowRoot()
method, then locate the child element. This shouldn't have any issues with nesting.
For older versions of Chrome or Safari, you need to cast to SearchContext
instead of WebElement
.
If you're working with Firefox or Selenium 3, there are more complicated workarounds. I've written them all out here: https://titusfortner.com/2021/11/22/shadow-dom-selenium.html
How to interact with Cookie pop within #shadow-root (open) using Selenium
The element OK is within #shadow-root (open).
Solution
To click on OK you have to use shadowRoot.querySelector()
and you can use the following Locator Strategy:
Code Block:
driver.get("https://www.immowelt.de/immobilienpreise")
time.sleep(5)
element = driver.execute_script("""return document.querySelector('#usercentrics-root').shadowRoot.querySelector("button[data-testid='uc-accept-all-button']")""")
element.click()
References
You can find a couple of relevant discussions in:
- How to handle the popup "Accepting all cookies" when the element is data-testid - Using Selenium in Python
- Can't locate elments within shadow-root (open) using Python Selenium
- How to get past a cookie agreement page using Python and Selenium?
How to interact with the elements within #shadow-root (open) while Clearing Browsing Data of Chrome Browser using cssSelector
If you are trying to get 'Clear Data' element then you can use the below js to get the element and then perform.
return document.querySelector('settings-ui').shadowRoot.querySelector('settings-main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('settings-section > settings-privacy-page').shadowRoot.querySelector('settings-clear-browsing-data-dialog').shadowRoot.querySelector('#clearBrowsingDataDialog').querySelector('#clearBrowsingDataConfirm')
Here is the sample script.
driver.get("chrome://settings/clearBrowserData");
driver.manage().window().maximize();
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement clearData = (WebElement) js.executeScript("return document.querySelector('settings-ui').shadowRoot.querySelector('settings-main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('settings-section > settings-privacy-page').shadowRoot.querySelector('settings-clear-browsing-data-dialog').shadowRoot.querySelector('#clearBrowsingDataDialog').querySelector('#clearBrowsingDataConfirm')");
// now you can click on clear data button
clearData.click();
Edit 2: Explanation
Problem: Selenium does not provide explicit support to work with Shadow DOM elements, as they are not in the current dom. That's the reason why we will get NoSuchElementException
exception when try to access the elements in the shadow dom
.
Shadow DOM:
Note: We will be referring to the terms shown in the picture. So please go through the picture for better understanding.
Solution:
In order to work with shadow element first we have to find the shadow host
to which the shadow dom is attached. Here is the simple method to get the shadow root based on the shadowHost.
private static WebElement getShadowRoot(WebDriver driver,WebElement shadowHost) {
JavascriptExecutor js = (JavascriptExecutor) driver;
return (WebElement) js.executeScript("return arguments[0].shadowRoot", shadowHost);
}
And then you can access the shadow tree element using the shadowRoot Element.
// get the shadowHost in the original dom using findElement
WebElement shadowHost = driver.findElement(By.cssSelector("shadowHost_CSS"));
// get the shadow root
WebElement shadowRoot = getShadowRoot(driver,shadowHost);
// access shadow tree element
WebElement shadowTreeElement = shadowRoot.findElement(By.cssSelector("shadow_tree_element_css"));
In order to simplify all the above steps created the below method.
public static WebElement getShadowElement(WebDriver driver,WebElement shadowHost, String cssOfShadowElement) {
WebElement shardowRoot = getShadowRoot(driver, shadowHost);
return shardowRoot.findElement(By.cssSelector(cssOfShadowElement));
}
Now you can get the shadowTree Element with single method call
WebElement shadowHost = driver.findElement(By.cssSelector("shadowHost_CSS_Goes_here));
WebElement shadowTreeElement = getShadowElement(driver,shadowHost,"shadow_tree_element_css");
And perform the operations as usual like .click()
, .getText()
.
shadowTreeElement.click()
This Looks simple when you have only one level of shadow DOM. But here, in this case we have multiple levels of shadow doms. So we have to access the element by reaching each shadow host and root.
Below is the snippet using the methods that mentioned above (getShadowElement and getShadowRoot)
// Locate shadowHost on the current dom
WebElement shadowHostL1 = driver.findElement(By.cssSelector("settings-ui"));
// now locate the shadowElement by traversing all shadow levels
WebElement shadowElementL1 = getShadowElement(driver, shadowHostL1, "settings-main");
WebElement shadowElementL2 = getShadowElement(driver, shadowElementL1,"settings-basic-page");
WebElement shadowElementL3 = getShadowElement(driver, shadowElementL2,"settings-section > settings-privacy-page");
WebElement shadowElementL4 = getShadowElement(driver, shadowElementL3,"settings-clear-browsing-data-dialog");
WebElement shadowElementL5 = getShadowElement(driver, shadowElementL4,"#clearBrowsingDataDialog");
WebElement clearData = shadowElementL5.findElement(By.cssSelector("#clearBrowsingDataConfirm"));
System.out.println(clearData.getText());
clearData.click();
You can achieve all the above steps in single js call as at mentioned at the beginning of the answer (added below just to reduce the confusion).
WebElement clearData = (WebElement) js.executeScript("return document.querySelector('settings-ui').shadowRoot.querySelector('settings-main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('settings-section > settings-privacy-page').shadowRoot.querySelector('settings-clear-browsing-data-dialog').shadowRoot.querySelector('#clearBrowsingDataDialog').querySelector('#clearBrowsingDataConfirm')");
Screenshot:
Selenium | shadow root | Element input is not reachable by keyboard
You can use JavascriptExecutor
to set the values as well.
//inputFIELD.sendKeys("test");
((JavascriptExecutor)driver).executeScript("arguments[0].setAttribute('value', 'test')", inputButton);
or using actions chain:
new Actions(driver).moveToElement(inputButton).sendKeys("test").build().perform();
Related Topics
Getting Value of Select (Dropdown) Before Change
How to Wait for Set of Asynchronous Callback Functions
Is Right Click a JavaScript Event
How to Share $Scope Data Between States in Angularjs Ui-Router
How to Get the Text Node of an Element
Issue in Returning Data Retrieved from Db Queries Called in the Loop
How to Refresh a Page Using JavaScript
Difference Between Microtask and MACrotask Within an Event Loop Context
How to Loop Through an Array Containing Objects and Access Their Properties
How to Pass JSON Post Data to Web API Method as an Object
Get String in Yyyymmdd Format from Js Date Object
What Is the JavaScript String Newline Character
Mongoose and Multiple Database in Single Node.Js Project
Addeventlistener Using for Loop and Passing Values
Is the Order of Elements in a JSON List Preserved