Selenium 如何访问隐藏在 Shadow DOM 中的元素并与之交互？

Shadow Root 和 Selenium：导航浏览数据弹出窗口

在使用 Selenium 清除 Chrome 中的浏览数据时访问 #shadow-root（打开）中的元素可能会带来挑战。为了克服这个问题，我们必须了解 Shadow DOM 和 Selenium 的功能。

Shadow DOM

Shadow DOM 允许 Web 开发人员将 HTML 和样式封装在自定义组件中，创建隔离且独立的 UI 元素。这些组件，称为“影子主机”，有自己的影子树，一个隐藏的 DOM 片段。

Selenium 和 Shadow DOM

Selenium 本身不支持 Shadow DOM 元素，因为它们位于主 DOM 树。要与这些元素交互，我们必须首先访问它们的影子树。

遍历 Shadow DOM

1.识别影子主机：

使用 Selenium 的 findElement 方法在主 DOM 中定位影子主机。

2.提取影子根：

使用我们的自定义方法 getShadowRoot 来访问与影子主机关联的影子根。

3.导航影子树：

使用我们的 getShadowElement 方法遍历影子树，传入目标元素的影子根和 CSS 选择器。

示例：清除浏览数据

使用我们的自定义方法，我们可以导航多级 Shadow DOM 来访问并单击“清除浏览数据”按钮：

WebElement shadowHostL1 = driver.findElement(By.cssSelector("settings-ui"));
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"));
clearData.click();

或者，我们可以使用单个 JavaScript 调用：

WebElement clearData = (WebElement) js.executeScript("return document.querySelector(...[CSS selector to traverse Shadow DOM]...");

以上是Selenium 如何访问隐藏在 Shadow DOM 中的元素并与之交互？的详细内容。更多信息请关注PHP中文网其他相关文章！