如何使用 Selenium 访问 Chrome 的'清除浏览数据”对话框中的 Shadow DOM 元素并与之交互？

在通过 CSS 选择器清除 Chrome 浏览器数据时与 #shadow-root (open) 内的 Shadow DOM 元素交互

自动化 Chrome 浏览器的通过 Selenium 弹出“清除浏览数据”，访问#shadow-root（打开）中的元素，例如“清除数据”按钮，可能具有挑战性。这是因为 Shadow DOM 元素无法通过常规 DOM 树直接访问。

定位 Shadow Host 和 Root

与 Shadow DOM 元素交互，我们首先需要识别影子宿主，它是主 DOM 中包含影子 DOM 的元素。一旦找到影子主机，我们就可以使用 Selenium JavaScript Executor 中的 getShadowRoot() 方法来检索主机的影子根。

遍历 Shadow Levels

如果存在多个级别的 Shadow DOM，我们需要遍历这些级别才能到达所需的元素。为此，我们可以通过在当前影子根中定位影子主机，然后使用 getShadowRoot() 检索其影子根来递归地重复上述过程。

示例代码

下面的例子演示了如何使用 getShadowRoot() 方法并递归遍历来访问“清除数据” “清除浏览数据”弹出窗口中的按钮：

JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement shadowHost = driver.findElement(By.cssSelector("settings-ui"));
WebElement shadowRoot = (WebElement) js.executeScript("return arguments[0].shadowRoot", shadowHost);
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')");
clearData.click();

通过利用这种方法，您可以有效地与#shadow-root（打开）中的元素进行交互并执行所需的操作。

以上是如何使用 Selenium 访问 Chrome 的'清除浏览数据”对话框中的 Shadow DOM 元素并与之交互？的详细内容。更多信息请关注PHP中文网其他相关文章！