How to Access Nested Shadow DOM Elements in Chrome Using Selenium?

Accessing Shadow DOM Elements: Interacting with #shadow-root (open) While Clearing Browsing Data in Chrome

Interfacing with #shadow-root elements, such as the "Clear data" button in Chrome's Clear browsing data popup, requires special handling within Selenium due to their encapsulation within shadow DOMs.

Problem Statement:

While using Selenium to automate Chrome's Clear browsing data popup, accessing the #shadow-root (open) element containing the "Clear data" button using cssSelector results in exceptions.

Solution:

Due to the nested nature of shadow DOMs in this context, accessing the target element necessitates traversing multiple shadow root levels. Employing a custom method, getShadowElement, allows for streamlined access to shadow tree elements:

public static WebElement getShadowElement(WebDriver driver, WebElement shadowHost, String cssOfShadowElement) {
    WebElement shardowRoot = getShadowRoot(driver, shadowHost);
    return shardowRoot.findElement(By.cssSelector(cssOfShadowElement));
}

By chaining multiple getShadowElement calls, you can progressively descend through shadow DOM levels:

// 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"));

Alternatively, a single JavaScript call can encapsulate the traversal process:

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')");

This approach enables seamless interaction with #shadow-root (open) elements, including the "Clear data" button, regardless of their nested shadow DOM structure.

The above is the detailed content of How to Access Nested Shadow DOM Elements in Chrome Using Selenium?. For more information, please follow other related articles on the PHP Chinese website!