访问影子根内的元素

Question

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

我想从影子根中获取元素

<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"><iron-icon icon="-search-" slot="prefix" class="form-icons search-icon"></iron-icon></paper-input>

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

任何类型的帮助将不胜感激

Answer 1

获取影子内的元素 dom 根需要几个步骤。

首先，获取 'host' 元素，在您的例子中是具有属性 page = "home"

的输入

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

之后需要执行JavaScript脚本从宿主获取shadow root，可以在web元素上调用.shadowRoot获取shadow root

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

但有一个问题，您的输入嵌套在多个影子 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 所以语言语法可能有点不同。

访问影子根内的元素

Access elements inside the shadow-root

javascript

java

selenium

xpath

shadow-dom