使用Java访问硒中影子根内的元素

Question

我正在尝试访问shadow-root (closed) 元素内的“解决挑战”按钮，如下所示：

我试过了：

driver.findElement(By.xpath("//*[@id=\"solver-button\"]")).click();

但由于shadow-root 元素，它无法访问按钮。

我正在寻找一种方法来访问阴影根元素内 ID 为 solver-button 的按钮。

Answer 1

title 为 Solve the challenge 的元素在 #shadow-root (open)

内

---

解决方案

click() 在所需元素上您可以使用shadowRoot.querySelector()，您可以使用以下Locator Strategy：

WebElement solverButton = (WebElement) js.executeScript("return document.querySelector('div.button-holder.help-button-holder').shadowRoot.querySelector('button#solver-button')");
solverButton.click();

---

参考文献

您可以在以下位置找到一些相关的详细讨论：

• How to interact with the elements within #shadow-root (open) while Clearing Browsing Data of Chrome Browser using cssSelector
• How to automate shadow DOM elements using selenium?

Answer 2

如果单击 shadow-root 元素的父元素 (<div class="button-holder help-button-holder"></div>) 就足够了，this post 可能会有所帮助。

要在help-button-holder 元素上执行鼠标点击，您可以使用moveToElement method，如下所示：

WebElement buttonHolderElement = driver.findElement(By.xpath("//*[@id=\"rc-imageselect\"]/div[3]/div[2]/div[1]/div[1]/div[4]"));
Actions actionProvider = new Actions(driver);
actionProvider.moveToElement(buttonHolderElement).click().build().perform();

查看selenium documentation on mouse actions in detail 以供参考。

Answer 3

shadowbutton = driver.execute_script("return document.querySelector('div[class=\"button-holder help-button-holder\"]').shadowRoot.querySelector('button[id=\"solver-button\"]')")
shadowbutton.click()

shadowRoot 不是 DOM 的一部分，因此您首先必须找到具有影子根的根元素，然后使用 shadowRoot 调用它，然后从中调用目标元素。