如何使用 selenium 自动化影子 DOM 元素？

Question

我正在使用 Java Selenium 项目进行网页自动化。该网页包含许多我无法使用 selenium findElement 方法与之交互的多级影子根 DOM 元素。

我尝试了以下解决方案：

• deep css（不适用于最新的 chrome 浏览器）
• JS 执行器。 （这真的很乏味，维护起来也很复杂）

笔记：

如果您知道我可以在 Selenium Java 框架中实现的除了上面列出的任何其他解决方案，请传递解决方案。提前致谢 ！。

原文由 SushilG 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一个很好的插件可以和selenium项目 shadow-automation-selenium 一起使用。它有助于编写更好、可读和可维护的代码。使用它您可以访问多级影子 DOM（最多 4 级）。这使用简单的 css 选择器来识别元素。

WebElement findElement(String cssSelector) ：如果想要来自 DOM 的单个元素，请使用此方法

List<WebElement> findElements(String cssSelector) ：如果你想从 DOM 中找到所有元素，请使用它

WebElement findElements(WebElement parent, String cssSelector) ：如果你想从父对象 DOM 中找到单个元素，请使用它

List<WebElement> findElements(WebElement parent, String cssSelector) ：如果你想从父对象 DOM 中查找所有元素，请使用它

WebElement getShadowElement(WebElement parent,String selector) ：如果你想从父 DOM 中找到单个元素，请使用它

List<WebElement> getAllShadowElement(WebElement parent,String selector) ：如果你想从父 DOM 中查找所有元素，请使用它

boolean isVisible(WebElement element) ：如果你想找到元素的可见性，请使用它

boolean isChecked(WebElement element) ：如果要检查复选框是否被选中，请使用此选项

boolean isDisabled(WebElement element) ：如果你想检查元素是否被禁用，请使用它

String getAttribute(WebElement element,String attribute) ：如果你想获得 aria-selected 之类的属性和元素的其他自定义属性，请使用它。

void selectCheckbox(String label) ：使用它来选择使用标签的复选框元素。

void selectCheckbox(WebElement parentElement, String label) ：使用它来选择使用标签的复选框元素。

void selectRadio(String label) ：使用它来选择使用标签的无线电元素。

void selectRadio(WebElement parentElement, String label) ：使用它来使用标签从父 DOM 中选择单选元素。

void selectDropdown(String label) ：使用它来使用标签选择下拉列表项（如果只有一个下拉列表存在或加载到 UI 上，则使用它）。

void selectDropdown(WebElement parentElement, String label) ：使用它来使用标签从父 DOM 中选择下拉列表项。

如何使用这个插件：你将不得不依赖你的项目。

行家

<dependency>
  <groupId>io.github.sukgu</groupId>
  <artifactId>automation</artifactId>
  <version>0.0.4</version>
<dependency>

对于驻留在 shadow-root dom 元素下的 html 标记

<properties-page id="settingsPage">
  <textarea id="textarea">
</properties-page>

您可以在您的框架中使用此代码来获取 textarea 元素对象。

   import io.github.sukgu.*;
  Shadow shadow = new Shadow(driver);
  WebElement element = shadow.findElement("properties-page#settingsPage>textarea#textarea");
  String text = element.getText();

原文由 Garima 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 Selenium 4，现在有 WebElement.getShadowRoot() 。例如：

 driver.findElement(By.id("parentId")).getShadowRoot().findElement(By.cssSelector( "label" )).findElement(By.tagName("input"))

与 #shadow-root ，下一跳的导航选择是有限的。 Eg against Chrome By.cssSelector() and By.className() are valid, but By.id() and By.tagName() fail with org.openqa.selenium.InvalidArgumentException: invalid argument: invalid locator

原文由 df778899 发布，翻译遵循 CC BY-SA 4.0 许可协议