访问 shadow-root 内的元素答案

【问题标题】：Access elements inside the shadow-root访问 shadow-root 内的元素
【发布时间】：2018-05-11 14:32:50
【问题描述】：

是否可以使用 java 和 selenium 找到 Shadow DOM 的元素？

我想从影子根中获取元素

&lt;paper-input id="homeSearch" class="home-search-btn home-inputs" placeholder="Where would you like to go?" no-label-float="" tabindex="0" aria-disabled="false"&gt;&lt;iron-icon icon="-search-" slot="prefix" class="form-icons search-icon"&gt;&lt;/iron-icon&gt;&lt;/paper-input&gt;

我想在homesearch 上发送一个输入，就像driver.findElement(By.id("homesearch")); 我在互联网上搜索但没有得到任何合适的解决方案。

任何类型的帮助都会非常感激

【问题讨论】：

不要将 HTML 代码示例共享为图像文件 - 改为提供文本
对不起，我正在尝试复制 HTML 网站，不允许以有组织的方式发送代码...如果您愿意，我可以将网站地址分享给您
是的。如果它是公共页面，它也可能有用...

标签： javascript java selenium xpath shadow-dom

【解决方案1】：

在 shadow dom 根中获取元素需要几个步骤。

首先，获取 'host' 元素，在您的情况下是属性为 page = "home" 的输入

WebElement host1 = driver.findElement(By.cssSelector("vrs-app[page='home']"));

之后，您需要执行 JavaScript 脚本从主机获取影子根，您可以通过在 Web 元素上调用 .shadowRoot 来获取影子根。

WebElement shadowRoot = (WebElement)((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", host);

但是有一个问题，你的输入嵌套在几个 shadow dom 中，所以你必须这样做几次。最有效的方法是使用方法，例如：

public WebElement GetShadowRoot(WebElement host) {
    WebElement shadowRoot = (WebElement)((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", host);
    return shadowRoot ;
}

之后，向下潜入所有阴影根，直到找到所需的宿主，如下所示：

WebElement host1 = driver.FindElement(By.cssSelector("vrs-app[page='home']"));
WebElement shadow1 = GetShadowRoot(host1);

WebElement host2 = shadow1.FindElement(By.cssSelector("vrs-home"));
WebElement shadow2 = GetShadowRoot(host2);

// We've reached the shadow dom containing the input
// Note: I'm not using By.id since this may throw an error
WebElement paperInput = shadow2.findElement(By.cssSelector("paper-input[id='homeSearch']"));

现在你可以用 paperInput 做你想做的事了。

旁注：我知道这种方法在 Chrome 中有效（刚刚测试过），尚未在其他浏览器中测试过。另外，我不懂Java，所以语言语法可能有点不同。

【讨论】：

刚刚用你之前提供的那一面测试过，我可以将文本发送到WebElement paperInput