我一直在关注讨论How to automate shadow DOM elements using selenium?使用#shadow-root (open)
元素。
在访问网址 chrome://settings/clearBrowserData 时出现的清除浏览数据弹出窗口中找到清除数据按钮时
通过 Selenium 我无法找到以下元素:
#shadow-root (open)
<settings-privacy-page>
快照:
使用Selenium以下是我的代码试验以及遇到的相关错误:
尝试 1:
WebElement root5 = shadow_root4.findElement(By.tagName("settings-privacy-page"));
错误:
Exception in thread "main" org.openqa.selenium.JavascriptException: javascript error: b.getElementsByTagName is not a function
尝试 2:
WebElement root5 = shadow_root4.findElement(By.cssSelector("settings-privacy-page"));
错误:
Exception in thread "main" org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"settings-privacy-page"}
尝试 3:
WebElement root5 = (WebElement)((JavascriptExecutor)shadow_root4).executeScript("return document.getElementsByTagName('settings-privacy-page')[0]");
错误:
Exception in thread "main" java.lang.ClassCastException: org.openqa.selenium.remote.RemoteWebElement cannot be cast to org.openqa.selenium.JavascriptExecutor
如果有帮助的话,初始代码块(直到上面的行)工作完美:
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);
PS:expand_shadow_element()
工作完美。
最佳答案
如果您正在尝试获取“清除数据”元素,那么您可以使用下面的js来获取该元素,然后执行。
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')
这是示例脚本。
driver.get("chrome://settings/clearBrowserData");
driver.manage().window().maximize();
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')");
// now you can click on clear data button
clearData.click();
编辑 2:说明
问题:Selenium 不提供与 Shadow DOM elements 配合使用的明确支持,因为它们不在当前 dom 中。这就是为什么我们在尝试访问 shadow dom
中的元素时会得到 NoSuchElementException
异常的原因。
注意:我们将引用图中所示的术语。因此,请仔细阅读图片以更好地理解。
解决方案:
为了使用shadow元素,首先我们必须找到shadow dom所附加的shadow主机
。下面是根据shadowHost获取shadow root的简单方法。
private static WebElement getShadowRoot(WebDriver driver,WebElement shadowHost) {
JavascriptExecutor js = (JavascriptExecutor) driver;
return (WebElement) js.executeScript("return arguments[0].shadowRoot", shadowHost);
}
然后您可以使用 ShadowRoot 元素访问影子树元素。
// get the shadowHost in the original dom using findElement
WebElement shadowHost = driver.findElement(By.cssSelector("shadowHost_CSS"));
// get the shadow root
WebElement shadowRoot = getShadowRoot(driver,shadowHost);
// access shadow tree element
WebElement shadowTreeElement = shadowRoot.findElement(By.cssSelector("shadow_tree_element_css"));
为了简化上述所有步骤,创建了以下方法。
public static WebElement getShadowElement(WebDriver driver,WebElement shadowHost, String cssOfShadowElement) {
WebElement shardowRoot = getShadowRoot(driver, shadowHost);
return shardowRoot.findElement(By.cssSelector(cssOfShadowElement));
}
现在您可以通过单个方法调用获取shadowTree元素
WebElement shadowHost = driver.findElement(By.cssSelector("shadowHost_CSS_Goes_here));
WebElement shadowTreeElement = getShadowElement(driver,shadowHost,"shadow_tree_element_css");
并像往常一样执行.click()
、.getText()
等操作。
shadowTreeElement.click()
当您只有一层影子 DOM 时,这看起来很简单。但在这里,在这种情况下,我们有多个级别的影子 dom。因此,我们必须通过到达每个影子主机和根来访问该元素。
下面是使用上述方法(getShadowElement 和 getShadowRoot)的代码片段
// 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"));
System.out.println(clearData.getText());
clearData.click();
您可以在单个 js 调用中实现上述所有步骤,如答案开头所述(在下面添加只是为了减少困惑)。
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')");
关于java - 使用 cssSelector 清除 Chrome 浏览器的浏览数据时如何与 #shadow-root (open) 中的元素进行交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56735844/