带有Shadow DOM的Selenium Webdriver

Question

在C＃中使用Selenium Webdriver时，尝试选择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/的{​​{1}}链接中测试此方法：

css_selector

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

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

/deep/

• 注意： 据我所知，第一个建议仅在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影子DOM交互，编写为Java Binding： https://github.com/sukgu/shadow-automation-selenium

此仓库使用一堆JQueries扩展并标识影子dom中的元素。请看一看。应该很容易将其移植到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;
    }
}