如何使用硒自动化阴影DOM元素？

Question

我使用JavaSelenium项目进行网页自动化。网页包含了许多多级的影子根DOM元素，我无法使用seleniumfindElement方法与它们交互。

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

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

Answer 1

使用JSExecutor和CSS查找阴影DOM元素的步骤：

>

找出基本元素，即阴影根元素的父元素。

获取该元素的阴影根。

并在影子根webelement上找到您的元素

例子：

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

Answer 2

为了演示使用Selenium v3. x、ChromeDriver v2.46和Chromev73. x实现影子DOM的自动化，这里有几种方法可以打开urlchrome：//下载/，并使用执行脚本（）方法发送字符将pdf排序为搜索框中的搜索文本。

作为规范方法，您可以使用文档。querySelector（）方法如下：

>

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class shadow_DOM_search_download_querySelector {

    public static void main(String[] args)
    {
        System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
        ChromeOptions options = new ChromeOptions();
        options.addArguments("start-maximized");
        options.addArguments("disable-infobars");
        options.addArguments("--disable-extensions"); 
        WebDriver driver = new ChromeDriver(options);
        driver.get("chrome://downloads/");
        JavascriptExecutor jse = (JavascriptExecutor) driver; 
        WebElement search_box = (WebElement) jse.executeScript("return document.querySelector('downloads-manager').shadowRoot.querySelector('downloads-toolbar#toolbar').shadowRoot.querySelector('cr-toolbar#toolbar').shadowRoot.querySelector('cr-toolbar-search-field#search').shadowRoot.querySelector('div#searchTerm input#searchInput')");
        String js = "arguments[0].setAttribute('value','pdf')";
        ((JavascriptExecutor) driver).executeScript(js, search_box);
    }
}

相同的解决方案可以按如下步骤重新编写：

>

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class shadow_DOM {

    static WebDriver driver;
    public static void main(String[] args) 
    {   
        System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
        ChromeOptions options = new ChromeOptions();
        options.addArguments("start-maximized");
        //options.addArguments("disable-infobars");
        options.addArguments("--disable-extensions"); 
        driver = new ChromeDriver(options);
        driver.get("chrome://downloads/");
        WebElement root1 = driver.findElement(By.tagName("downloads-manager"));
        WebElement shadow_root1 = expand_shadow_element(root1);

        WebElement root2 = shadow_root1.findElement(By.cssSelector("downloads-toolbar#toolbar"));
        WebElement shadow_root2 = expand_shadow_element(root2);

        WebElement root3 = shadow_root2.findElement(By.cssSelector("cr-toolbar#toolbar"));
        WebElement shadow_root3 = expand_shadow_element(root3);

        WebElement root4 = shadow_root3.findElement(By.cssSelector("cr-toolbar-search-field#search"));
        WebElement shadow_root4 = expand_shadow_element(root4);

        WebElement search_term = shadow_root4.findElement(By.cssSelector("div#searchTerm input#searchInput"));
        String js = "arguments[0].setAttribute('value','pdf')";
        ((JavascriptExecutor) driver).executeScript(js, search_term);

        WebElement search_button = shadow_root4.findElement(By.cssSelector("paper-icon-button#icon"));
        search_button.click();

        System.out.println("Search Button Clicked");
    }

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

}

>

Search Button Clicked

• 浏览器快照：

根据《确定实验对象的命运》中的讨论

• 使/deep/像CSS live概要文件（在CSS文件或内部）中的后代组合符“”一样工作。

Answer 3

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

WebElement findelelement（String cssSelector）：如果需要来自DOM的单个元素，请使用此方法

列表

WebElement findElements（WebElement父对象，String cssSseltor）：如果您想从父对象DOM中查找单个元素，请使用此选项

列表

WebElement getShadowElement（WebElement父元素，字符串选择器）：如果要从父DOM中查找单个元素，请使用此选项

列表

boolean isVisible（WebElement元素）：如果要查找元素的可见性，请使用此选项

布尔isChecked（WebElement）：如果要检查是否选中复选框，请使用此选项

布尔isDisabled（WebElement元素）：如果要检查元素是否已禁用，请使用此选项

String getAttribute（WebElement元素，String属性）：如果您想获得属性，如选定的aria和元素的其他自定义属性，请使用此选项。

val selectCheckbox（String标签）：使用标签选择复选框元素。

void selectCheckbox（WebElement parentElement，String label）：使用此选项选择使用标签的复选框元素。

void selectRadio（字符串标签）：使用此选项可使用标签选择无线电元素。

val selectRadio（WebElement父母元素，字符串标签）：使用此选项从使用标签的父DOM中选择无线电元素。

void selectDropdown（字符串标签）：使用此选项选择使用标签的下拉列表项（如果UI上只存在或加载了一个下拉列表项，则使用此选项）。

void selectDropdown（WebElement parentElement，String label）：使用此选项可以使用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>

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

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