如何使用 Selenium Java 框架自动化 Shadow DOM

Posted 2023-02-21

【中文标题】如何使用 Selenium Java 框架自动化 Shadow DOM

【英文标题】：How to automate Shadow DOM using Selenium Java framework

【发布时间】：2021-05-28 14:55:50

【问题描述】：

我正在使用 Selenium Java 框架进行测试自动化，最近该应用程序使用 Shadow DOM 进行了升级。我们尝试使用 javascript 执行器 querySelector 实现自动化。该应用程序在单个页面中有超过 20 个影子根，并且大多数影子根是前一个根的子级。因此，要识别一个元素，我们需要遍历许多根，如 document.querySelector('root1').shadowRoot.querySelector('root2')....一样明智地直到第 n 个根才能找到一个元素。

WebElement DropDown = (WebElement) js.executeScript("return document.querySelector('sn-test-layouts > sn-test-main > sn-test-contents').shadowRoot.querySelector('testroot1').shadowRoot.querySelector('testroot2')");

找到一个元素后，正常的 selenium click 或 select 方法不起作用。所以我使用javascript方法来执行点击，输入文本等。

您能否提供有关使用 selenium Java 自动化 Shadow DOM 的任何其他解决方案的见解。提前致谢

【参考方案1】：

在 Selenium 4.0 中，对于 Chromium 96+ 版本，您可以使用 getShadowRoot() 方法，然后定位子元素。这不应该有任何嵌套问题。

对于旧版本的 Chrome 或 Safari，您需要转换为 SearchContext 而不是 WebElement。

如果您使用的是 Firefox 或 Selenium 3，则有更复杂的解决方法。我把它们都写在这里了：https://titusfortner.com/2021/11/22/shadow-dom-selenium.html

【参考方案2】：

Serenity 提供了一个影子 DOM 处理程序，实现如下所示：

public WebElementFacade getElementInShadowDOM(String shadow, String element) 
    return find(ByExpandedShadowDom.of(shadow))
            .find(By.cssSelector(element));

其中 element 是您要访问的下拉菜单，shadow 是 shadow root 的 css 选择器。 WebElementFacade 是 Serenity 提供的 WebElements 的包装器，它提供了许多很酷且更高效的方法。

请注意，据我所知，目前 SerenityBDD 尚未使用最新的 chrome 和 Selenium 4 进行更新。