How to interact with the elements within #shadow-root (open) while Clearing Browsing Data of Chrome Browser using cssSelector

by

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:
enter image description here

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.
enter image description here

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:
enter image description here

More Related Contents:

  1. Find div element by multiple class names?
  2. org.openqa.selenium.NoSuchElementException: Returned node (null) was not a DOM element when trying to locate card-fields-iframe by CssSelector
  3. How to select the auto suggestion from the dynamic dropdown using Selenium and Java
  4. org.openqa.selenium.ElementNotVisibleException: Element is not currently visible while clicking a checkbox through SeleniumWebDriver and Java
  5. org.openqa.selenium.ElementClickInterceptedException: element click intercepted error using Selenium and Java in headless mode
  6. Compound class names are not supported error in WebDriver
  7. Replace implicit wait with explicit wait (selenium webdriver & java)
  8. Selenium WebDriver How to Resolve Stale Element Reference Exception?
  9. Using Selenium WebDriver to retrieve the value of an HTML input
  10. Find elements inside forms and iframe using Java and Selenium WebDriver
  11. How to handle print dialog in Selenium?
  12. Is there a way to use Selenium WebDriver without informing the document that it is controlled by WebDriver?
  13. Android Web Scraping with a Headless Browser [closed]
  14. Selenium Webdriver submit() vs click()
  15. How to check if an element is visible with WebDriver
  16. java.lang.NoSuchMethodError: com.google.common.base.Preconditions.checkState(ZLjava/lang/String;) with Selenium, gradle and ChromeDriver
  17. WebDriverException: unknown error: Runtime.executionContextCreated has invalid ‘context’: while initializing Chrome browser
  18. java.lang.NoSuchMethodError: com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;I)V with IE and Selenium through Java
  19. How to use HTML and CSS as a Java application GUI?
  20. Can I use CSS for Java Swing?
  21. How to properly configure Implicit / Explicit Waits and pageLoadTimeout through Selenium?
  22. Capturing browser logs with Selenium WebDriver using Java
  23. Set capability on already running selenium webdriver
  24. Getting StaleElementReferenceException while trying print the link names
  25. How to create a executable jar file for Testng and the runnnig point should be the Xml file
  26. How to upload a file in Selenium with no text box
  27. java.lang.OutOfMemoryError: unable to create new native thread error using ChromeDriver and Chrome through Selenium in Spring boot
  28. Selenium get .har file
  29. How to handle an Alert with “UnexpectedAlertBehaviour” capability in Selenium?
  30. Is there a way to search webelement on a main window first, if not found, then start searching inside iframes?

Leave a Comment