title: How to interact with the elements within #shadow-root (open) while Clearing Browsing Data of Chrome Browser using cssSelector
body: <p>I had been following the discussion <a href="https://stackoverflow.com/questions/55761810/how-to-automate-shadow-dom-elements-using-selenium">How to automate shadow DOM elements using selenium?</a> to work with <code>#shadow-root (open)</code> elements.</p>
  
  <p>While in the process of locating the <kbd>Clear data</kbd> button within the <strong>Clear browsing data</strong> popup, which appears while accessing the url <code>chrome://settings/clearBrowserData</code> through <em>Selenium</em> I am unable to locate the following element:</p>
  
  <pre><code>#shadow-root (open)
  &lt;settings-privacy-page&gt;
  </code></pre>
  
  <p>Snapshot:</p>
  
  <p><a href="https://i.stack.imgur.com/RUUI6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RUUI6.png" alt="settings-privacy-page"></a></p>
  
  <p>Using <a href="https://stackoverflow.com/questions/54459701/what-is-selenium-and-what-is-webdriver/54482491#54482491">Selenium</a> following are my code trials and the associated errors encountered:</p>
  
  <ul>
  <li><p>Attempt 1:</p>
  
  <pre><code>WebElement root5 = shadow_root4.findElement(By.tagName("settings-privacy-page"));
  </code></pre>
  
  <ul>
  <li><p>Error:</p>
  
  <pre><code>Exception in thread "main" org.openqa.selenium.JavascriptException: javascript error: b.getElementsByTagName is not a function
  </code></pre></li>
  </ul></li>
  <li><p>Attempt 2:</p>
  
  <pre><code>WebElement root5 = shadow_root4.findElement(By.cssSelector("settings-privacy-page"));
  </code></pre>
  
  <ul>
  <li><p>Error:</p>
  
  <pre><code>Exception in thread "main" org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"settings-privacy-page"}
  </code></pre></li>
  </ul></li>
  <li><p>Attempt 3:</p>
  
  <pre><code>WebElement root5 = (WebElement)((JavascriptExecutor)shadow_root4).executeScript("return document.getElementsByTagName('settings-privacy-page')[0]");
  </code></pre>
  
  <ul>
  <li><p>Error:</p>
  
  <pre><code>Exception in thread "main" java.lang.ClassCastException: org.openqa.selenium.remote.RemoteWebElement cannot be cast to org.openqa.selenium.JavascriptExecutor
  </code></pre></li>
  </ul></li>
  </ul>
  
  <p>Incase if it is helpful the initial code block (till the above line) works perfect:</p>
  
  <pre><code>driver.get("chrome://settings/clearBrowserData");
  WebElement root1 = driver.findElement(By.tagName("settings-ui"));
  WebElement shadow_root1 = expand_shadow_element(root1);
  
  WebElement root2 = shadow_root1.findElement(By.cssSelector("settings-main#main"));
  WebElement shadow_root2 = expand_shadow_element(root2);
  
  WebElement root3 = shadow_root2.findElement(By.cssSelector("settings-basic-page[role='main']"));
  WebElement shadow_root3 = expand_shadow_element(root3);
  
  WebElement root4 = shadow_root3.findElement(By.cssSelector("settings-section[page-title='Privacy and security']"));
  WebElement shadow_root4 = expand_shadow_element(root4);
  </code></pre>
  
  <p>PS: <code>expand_shadow_element()</code> works flawless.</p>