How to Interact with Elements Inside a Chrome's Shadow DOM Using Selenium and CSS Selectors?

How to Interact with Elements Within #shadow-root (open) While Clearing Browsing Data of Chrome Browser Using Selenium with CSS Selector?

Problem:

When attempting to automate interactions with elements within the #shadow-root (open) of the Clear browsing data popup using Selenium, you may encounter challenges in locating the Clear data button. This can be particularly frustrating if you are using a CSS selector to identify the element.

Solution:

To successfully locate and interact with elements within the #shadow-root (open) using Selenium, you will need to use a combination of JavaScript Execution and understanding of Shadow DOM. Here's a detailed step-by-step approach:

1. Get Shadow Root:

private static WebElement getShadowRoot(WebDriver driver, WebElement shadowHost) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    return (WebElement) js.executeScript("return arguments[0].shadowRoot", shadowHost);
}

This method takes a shadowHost element as an argument and returns the corresponding shadow root.

2. Access Shadow Element:

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

This method takes a shadowHost element and a CSS selector for the shadow element and returns the corresponding shadow element within the shadow root.

3. Traverse Shadow DOM (if multiple levels):

In the case of multiple nested shadow roots, you need to traverse each level to reach the desired element. Use the following code to traverse 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");
// and so on...

4. JavaScript Execution:

An alternative approach is to use JavaScript Execution to select the element directly. This can be useful if traversing through multiple shadow levels is complex or impractical. Here's an example:

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

This code would retrieve the Clear data element using JavaScript Execution, significantly simplifying the traversal process.

By following these steps, you can effectively interact with elements within the #shadow-root (open) while clearing browsing data in Chrome Browser using Selenium's CSS Selector approach.

The above is the detailed content of How to Interact with Elements Inside a Chrome's Shadow DOM Using Selenium and CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!