如何使用 Selenium 和 CSS 选择器与 Chrome Shadow DOM 内的元素进行交互？

使用 Selenium 和 CSS 选择器清除 Chrome 浏览器的浏览数据时如何与 #shadow-root (open) 内的元素进行交互？

问题：

尝试自动与元素交互时在使用 Selenium 的“清除浏览数据”弹出窗口的 #shadow-root (open) 中，您可能会在定位“清除数据”按钮时遇到挑战。如果您使用 CSS 选择器来识别元素，这可能会特别令人沮丧。

解决方案：

成功定位 #shadow-root 中的元素并与之交互（开放）使用 Selenium，您将需要结合使用 JavaScript 执行和对 Shadow DOM 的理解。以下是详细的分步方法：

1.获取Shadow Root：

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

此方法将shadowHost元素作为参数并返回相应的shadow root。

2.访问 Shadow 元素：

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

此方法采用 ShadowHost 元素和 Shadow 元素的 CSS 选择器，并返回 Shadow 根中相应的 Shadow 元素。

3.遍历Shadow DOM（如果有多个层级）：

在多个嵌套shadow root的情况下，需要遍历每个层级才能到达想要的元素。使用以下代码遍历关卡：

// 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 执行：

另一种方法是使用 JavaScript 执行直接选择元素。如果遍历多个阴影级别很复杂或不切实际，这可能很有用。下面是一个示例：

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

此代码将使用 JavaScript 执行检索 Clear 数据元素，从而显着简化遍历过程。

通过执行这些步骤，您可以有效地与#shadow-root（打开），同时使用 Selenium 的 CSS 选择器方法清除 Chrome 浏览器中的浏览数据。

以上是如何使用 Selenium 和 CSS 选择器与 Chrome Shadow DOM 内的元素进行交互？的详细内容。更多信息请关注PHP中文网其他相关文章！