通过 selenium javascriptExecutor 访问 shadow DOM Elements (polymer)答案

【问题标题】：Accessing shadow DOM Elements (polymer) through selenium javascriptExecutor通过 selenium javascriptExecutor 访问 shadow DOM Elements (polymer)
【发布时间】：2016-10-30 00:40:13
【问题描述】：

尝试在 chrome 浏览器 (V51) 的 JS 控制台上使用以下代码访问 https://shop.polymer-project.org/ 中男士外套部分下的“立即购买”按钮：

document.querySelector('shop-app').shadowRoot.querySelector('shop-home').shadowRoot.querySelector('shop-button');

我尝试使用 selenium 在自动化测试中访问相同的元素，第 1 行：WebElement shopBtn = (WebElement)((JavascriptExecutor)driver).executeScript("return document.querySelector('shop-app').shadowRoot.querySelector('shop-home').shadowRoot.querySelector('shop-button')");

第 2 行：shopBtn.click();

此代码给出错误：

Exception in thread "main" org.openqa.selenium.WebDriverException: unknown error: Cannot read property 'querySelector' of null
  (Session info: chrome=51.0.2704.106)
  (Driver info: chromedriver=2.20.353124 (035346203162d32c80f1dce587c8154a1efa0c3b),platform=Mac OS X 10.11.3 x86_64).

非常感谢您在这方面的任何帮助。

【问题讨论】：

你应该使用Polymer's DOM api
您是在原生支持它的浏览器（Chrome）上使用 shady DOM（默认）还是 shadow DOM？
我正在使用 Chrome，因为它本机支持 Shadow DOM。由于 Polyfills，它在 Firefox 浏览器上非常容易运行，但在 Chrome 上却不行，尽管相同的代码在 Chrome 浏览器的 JS 控制台上运行良好。

标签： javascript selenium polymer shadow-dom

【解决方案1】：

您没有指定，但看起来您使用的是 Java。这是一些有效的代码。不需要 JSE。

WebDriver driver = new FirefoxDriver();
String searchText = "Men's Outerwear";
driver.get("https://shop.polymer-project.org/");
WebDriverWait wait = new WebDriverWait(driver, 5);
List<WebElement> sections = wait.until(ExpectedConditions.presenceOfAllElementsLocatedBy(By.cssSelector("div.item")));
for (WebElement section : sections)
{
    if (section.getText().toLowerCase().contains(searchText.toLowerCase()))
    {
        section.findElement(By.linkText("SHOP NOW")).click();
        break;
    }
}

【讨论】：

它可以在 Firefox 浏览器上运行，因为 PolyFills，忘了说 :( 但它不适用于 Chrome 浏览器，Chrome 浏览器原生支持 ShadowDom
那么你是说上面的代码在 Chrome 上不起作用？
没错，它只适用于Firefox，不适用于Chrome。

【解决方案2】：

您必须逐个遍历影子根元素才能找到相应的元素。

document.querySelector('nuxeo-app').shadowRoot.querySelector('nuxeo-document-create-button').shadowRoot.querySelector('paper-fab').shadowRoot.querySelector('iron-icon');

【讨论】：

【解决方案3】：

我正在尝试执行此点击操作，我可以使用 firefox 和 xpath 定位器来完成此操作

.//shop-button/a[starts-with(@aria-label, 'Men') and contains(@aria-label, 'Outerwear Shop Now')]

我正在使用 Selenium 3。

我不确定我使用的方法是否正确

干杯

【讨论】：

欢迎来到 Stack Overflow！如果您还有其他问题，请点击按钮进行提问。