Recently, I encountered a similar test that involved clearing the browsing history in Chrome. The only difference was that I cleared the data after navigating to the advanced section of the pop-up window. If you're struggling with clicking just the "Clear data" button, it's possible that you may have overlooked a hierarchy element or confused sibling and parent elements. Looking at your code, it seems like you understand the importance of proper sequencing to access shadow DOM elements, as explained earlier.
Now, addressing your current issue, here is a snippet of my code that effectively clears the browsing history and waits for the process to complete before proceeding:

public WebElement expandRootElement(WebElement element) {
WebElement ele = (WebElement) ((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot",
        element);
return ele;
}

public void clearBrowsingHistory() throws Exception {

    WebDriverWait wait = new WebDriverWait(driver, 15);
    driver.get("chrome://settings/clearBrowserData");
// Get shadow root elements
    WebElement shadowRoot1 = expandRootElement(driver.findElement(By.xpath("/html/body/settings-ui")));

    WebElement root2 = shadowRoot1.findElement(By.cssSelector("settings-main"));
    WebElement shadowRoot2 = expandRootElement(root2);

    WebElement root3 = shadowRoot2.findElement(By.cssSelector("settings-basic-page"));
    WebElement shadowRoot3 = expandRootElement(root3);

    WebElement root4 = shadowRoot3
        .findElement(By.cssSelector("#advancedPage > settings-section > settings-privacy-page"));
    WebElement shadowRoot4 = expandRootElement(root4);

    WebElement root5 = shadowRoot4.findElement(By.cssSelector("settings-clear-browsing-data-dialog"));
    WebElement shadowRoot5 = expandRootElement(root5);

    WebElement root6 = shadowRoot5
        .findElement(By.cssSelector("cr-dialog div[slot ='button-container'] #clearBrowsingDataConfirm"));

    root6.click();
    wait.until(ExpectedConditions.invisibilityOf(root6));
}

If you stick to default options in the pop-up, this code should work smoothly for you (otherwise, additional code will be needed to select checkboxes). Let me know if this resolves your problem. Hopefully this information proves useful I've also included an image snapshot of the screen here- image

The Locator Strategy mentioned by @supputuri and utilizing document.querySelector() works flawlessly when using google-chrome-devtools

However, if the targeted element is within the shadow-dom, it is necessary to apply a WebDriverWait for elementToBeClickable(). The following solution can be used:

• Code Block:

  driver.get("chrome://settings/clearBrowserData");
  new WebDriverWait(driver, 5).until(ExpectedConditions.elementToBeClickable((WebElement) ((JavascriptExecutor)driver).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')"))).click();
  System.out.println("Clear data Button Clicked");
  

• Console Output:

  Clear data Button Clicked
  

I encountered an InvalidArgumentEXception while attempting to locate a shadowRoot element in the DOM with Selenium 4.3.0 and Chrome Version 103.0.5060.134

The resolution is as follows:

SearchContext se = driver.findElement(By.xpath("...")).getShadowRoot();

where the return type is SearchContext. Try using xpath as the locator in the above line, and also attempt to find the element using the SearchContext reference like so:

WebElement we = se.findElement(By.cssSelector("....."));
Use cssSelector as the locator

And just like that, it works flawlessly!

I couldn't find this solution readily available and it took me quite some time to figure it out. Hopefully this helps others facing a similar issue!

Selenium 4 now provides built-in functionality for interacting with shadow DOM using CSS selectors. To tackle the issue at hand in Java, one could implement the following solution:

WebDriver driver = new ChromeDriver();
driver.get("chrome://settings/clearBrowserData");
TimeUnit.SECONDS.sleep(1); // Waiting for elements to load, not recommended in production.
// Begin by selecting the parent of the shadow root and calling .getShadowRoot().
driver.findElement(By.cssSelector("settings-ui")).getShadowRoot()
    .findElement(By.cssSelector("settings-main")).getShadowRoot()
    .findElement(By.cssSelector("settings-basic-page")).getShadowRoot()
    .findElement(By.cssSelector("settings-privacy-page")).getShadowRoot()
    .findElement(By.cssSelector("settings-clear-browsing-data-dialog")).getShadowRoot()
    .findElement(By.cssSelector("#clearBrowsingDataConfirm"));

A Python alternative might look something like this:

driver = webdriver.Chrome()
driver.get("chrome://settings/clearBrowserData")
time.sleep(1)  # Waiting for elements to load, not recommended in production.
# Begin by selecting the parent of the shadow root and accessing its .shadow_root property.
driver.find_element(By.CSS_SELECTOR, "settings-ui").shadow_root\
    .find_element(By.CSS_SELECTOR, "settings-main").shadow_root\
    .find_element(By.CSS_SELECTOR, "settings-basic-page").shadow_root\
    .find_element(By.CSS_SELECTOR, "settings-privacy-page").shadow_root\
    .find_element(By.CSS_SELECTOR, "settings-clear-browsing-data-dialog").shadow_root\
    .find_element(By.CSS_SELECTOR, "#clearBrowsingDataConfirm")

Note that only CSS selectors can be used within shadow root elements; xpath or id's are unsupported in this context.