访问shadow-root中的元素

Question

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

我想从影子根

中获取元素

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

在阴影根目录中获取元素需要几个步骤。

首先，获取'host'元素，在您的情况下输入属性为WebElement host1 = driver.findElement(By.cssSelector("vrs-app[page='home']"));

的输入

.shadowRoot

之后，您需要执行JavaScript脚本以从主机获取影子根，您可以通过在Web元素上调用WebElement shadowRoot = (WebElement)((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", host); 来获取影子根。

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

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

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']"));

之后，潜入所有阴影根，直到你到达你需要的主机，如下所示：

SearchClient.Instance.Search<YourContentType>()

现在，您可以使用paperInput执行您想要的操作。

附注：我知道此方法适用于Chrome（仅测试过），尚未在其他浏览器中测试过。另外，我不懂Java，所以语言语法可能有点不同。