带影子的 Selenium Webdriver DOM

Question

在 C# 中使用 Selenium Webdriver 时，我在尝试 select Shadow DOM 下存在的元素时出现异常。

我得到的异常是：NoSuchElementException

您建议如何将 Selenium 与 Shadow 一起使用 DOM？

谢谢，

迈克尔

Answer 1

尝试这样定位您的元素：

driver.FindElement(By.CssSelector('selector_otside_shadow_root /deep/ selector_inside_shadow_root'));

你的情况是：

driver.FindElement(By.CssSelector('app-home /deep/ #itemName1'));

您可以在 chrome://downloads/ link 中使用此 css_selector:

测试此方法

downloads-manager /deep/ downloads-item /deep/ [id=file-link]

在开发工具中。如您所见，需要传递两个 shadow-root 元素，因此请确保只有一个 shadow-root 元素或使用多个 /deep/ 元素，如上例所示。

或者您可以像这样使用 JavasciptExecutor：

IJavaScriptExecutor js = (IJavaScriptExecutor)_driver;
var element = js.ExecuteScript("return document.querySelector('selector_outside_shadow_root').shadowRoot.querySelector('selector_inside_shadow_root');");

注意： 据我所知，第一个建议只适用于 Chrome，如果你想要一个跨浏览器的解决方案- 使用第二个。

Answer 2

我遇到了同样的问题。我在

中找到了一些值

Inspect -> Properties -> value (it can be something else)

尝试：

WebElement element = driver.findElement(By.cssSelector("div"));
System.out.println(element.getAttribute("value"));

Answer 3

一个非常好的存储库，具有 Selenium shadow DOM 交互编写为 Java 绑定： https://github.com/sukgu/shadow-automation-selenium

这个 repo 使用一堆 JQueries 来扩展和识别影子中的元素 dom.Please 有一个 look.Should 很容易将它移植到 C#

Answer 4

您可以创建一个方法，它接受 ShadowDom 根定位器列表，并构建 js 脚本来执行和获取影子元素：

public static IWebElement GetElementFromShadowDom(this IWebDriver driver, params string[] selectors)
    {
        IJavaScriptExecutor js = (IJavaScriptExecutor)driver;

        var scriptString = "return document.querySelector";
        var selectorIndex = 0;
        var stopIndex = selectors.Length - 1;

        foreach (var selector in selectors)
        {
            var root = "('" + selector + "')";
            root += (selectorIndex != stopIndex && selectors.Length != 1) ? ".shadowRoot.querySelector" : null;                
            selectorIndex++;
            scriptString += root;
        }

        var webElement = (IWebElement)js.ExecuteScript(scriptString);
        return webElement;
    }
}

带影子的 Selenium Webdriver DOM

Selenium Webdriver with Shadow DOM

c#

selenium

webdriver

shadow-dom