如何使用 Selenium 访问 Chrome 中的嵌套 Shadow DOM 元素？

访问 Shadow DOM 元素：在 Chrome 中清除浏览数据时与 #shadow-root 交互（打开）

与 #shadow-root 交互元素，例如 Chrome 清除浏览数据弹出窗口中的“清除数据”按钮，由于其封装性，需要在 Selenium 中进行特殊处理

问题陈述：

使用 Selenium 自动化 Chrome 的清除浏览数据弹出窗口时，访问包含“Clear”的 #shadow-root (open) 元素使用 cssSelector 的 data" 按钮会导致

解决方案：

由于在此上下文中影子 DOM 的嵌套性质，访问目标元素需要遍历多个影子根级别。使用自定义方法 getShadowElement 可以简化对影子树元素的访问：

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

通过链接多个 getShadowElement 调用，您可以逐步降低影子 DOM 级别：

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

或者，单个 JavaScript 调用可以封装遍历process:

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

这种方法可以与#shadow-root（开放）元素无缝交互，包括“清除数据”按钮，无论其嵌套的影子 DOM 结构如何。

以上是如何使用 Selenium 访问 Chrome 中的嵌套 Shadow DOM 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！