如何使用硒自动执行阴影DOM元素?

2022-09-02 10:20:44

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

我尝试了以下解决方案:

  • 深度 css(不要在最新的 chrome 浏览器上运行)
  • JS 执行器。(这真的很乏味,维护起来很复杂)

注意:

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


答案 1

有一个非常好的插件,可以与硒项目影子 - 自动化 - 硒一起使用。它有助于编写更好,可读性和可维护的代码。使用此功能,您可以访问多级影子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>

对于驻留在影子根 dom 元素下的 html 标记

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

您可以在框架中使用此代码来获取文本区域元素 Object。

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

答案 2

使用JSExecutor和CSS找出影子DOM元素的步骤:

  1. 找出基本元素,即阴影根元素的父元素。

  2. 获取该元素的影子根。

  3. 并在阴影根部上找到您的元素

    例:

<div id="example">
#shadow-root
<div id="root" part="root">
   <div id="label" part="label">ShadowRootLabel</div>
</div>
</ptcs-label>

#Method找出阴影根元素

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

#Step1例如,即查找基本元素:

WebElement root1 = driver.findElement(By.id("example"));

#Step2

//Get shadow root element
WebElement shadowRoot1 = getShadowRootElement(root1);

#Step3 - 我们需要使用CSS选择器查找阴影根目录内的元素,xpath在这里不起作用

//Here we will get Element inside Shadow Dom Element
WebElement shadowElement = shadowRoot3.findElement(By.cssSelector("div[id=label]"));