有一个非常好的插件可以与 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 中选择下拉列表项。

如何使用这个插件：你必须依赖你的项目。

马文

<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();

为了证明自动化的影子DOM使用selenium3.x版，ChromeDriver v2.46和铬v73.x这里有几个办法这将打开网址chrome://downloads/，并使用executeScript()方法发送的字符序列 PDF作为搜索文本的内部搜索框。

使用 document.querySelector()

作为规范方法，您可以使用document.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/组合子，用于刺穿所有的阴影DOM边界的风格，这是在闪烁的国旗后实施已被弃用。

• 使 /deep/ 表现得像 CSS 实时配置文件中的后代组合器“”（在 css 文件中或在 中）
• 快照配置文件中的阴影穿透后代组合器 (>>>)
• 用于动态配置文件（在样式表中）（已删除）的 Shadow-Piercing 后代组合器，'/deep/'（又名 '>>>'）

使用 JSExecutor 和 CSS 找出 shadow DOM 元素的步骤：

1. 找出基本元素，即影子根元素的父元素。

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

3. 并在该 shadow-root webelement 上找到您的元素

   例子 ：

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

#找出Shadow Root Element的方法

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"));

＃第2步

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

#Step3 - 我们需要使用 CSS Selector 找到 shadow root 中的元素，xpath 在这里不起作用

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