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

Question

I had been following the discussion How to automate shadow DOM elements using selenium? to work with #shadow-root (open) elements.

While in the process

Answer 1

The Locator Strategy in @supputuri's answer using document.querySelector() works perfect through google-chrome-devtools

However, as the desired element opens from the shadow-dom you need to induce WebDriverWait for the elementToBeClickable() and you can you the following solution:

• 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