带有 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/链接中测试此方法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

您可以创建一个方法，它接受 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;

    }

}

Answer 3

我有同样的问题。我发现了一些值

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

尝试：

WebElement element = driver.findElement(By.cssSelector("div"));

System.out.println(element.getAttribute("value"));