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

Question

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

我尝试了以下解决方案:

• 深层 CSS(不适用于最新的 Chrome 浏览器)
• JS 执行器。 (这真的很乏味并且维护起来很复杂)

注意:

如果您知道除了上面列出的之外的任何其他解决方案，我可以在 Selenium Java 框架中实现，请传递该解决方案。预先感谢!.

Answer 1

有一个非常好的插件，可以与selenium项目一起使用shadow-automation-selenium 。它有助于编写更好、可读和可维护的代码。使用它你可以访问多级 Shadow 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 中选择下拉列表项。

如何使用此插件:您将必须依赖于您的项目。

Maven

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

对于位于影子根 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();