使用Selenium定位Shadow元素时遭遇java.lang.NullPointerException问题

你遇到的java.lang.NullPointerException是因为shadowRoot对象为null，也就是无法成功获取到目标元素的Shadow Root实例，以下是常见原因和对应的解决办法：

1. 检查Shadow DOM是否为Closed类型 #

如果页面的Shadow DOM是通过attachShadow({mode: 'closed'})创建的闭合模式，那么element.shadowRoot会直接返回null，无法通过常规方式访问内部元素。

• 解决办法：直接通过JavaScript在Shadow内部执行查找和操作逻辑，跳过获取Shadow Root的步骤：

  public void uploadFileWithIncorrectBirthYear() throws TestingException {
      String url = System.getProperty("user.dir")+"\\src\\test\\resources\\files\\customer-upload-old-birth-year.xls";
      JavascriptExecutor js = (JavascriptExecutor) driver;
      // 直接在Shadow内部定位元素并设置文件路径
      js.executeScript("""
          const shadowHost = document.querySelector('#cphContent_cifCustomerFile_fakeFileInput');
          const uploadElement = shadowHost.shadowRoot.querySelector('#file-upload-button');
          uploadElement.value = arguments[0];
      """, url);
  }
  

  如果此方法仍无效，需联系前端开发确认是否可开放Shadow DOM访问权限，或通过浏览器调试工具确认Shadow Root的可访问性。

2. 等待Shadow Root初始化完成 #

有时已定位到Shadow Host元素，但内部的Shadow Root还未加载完成，导致获取到null。

• 解决办法：添加显式等待，确保Shadow Root存在后再执行后续操作：

  private static SearchContext waitForShadowRoot(WebDriver driver, WebElement shadowHost) {
      WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
      return wait.until(driver -> {
          JavascriptExecutor js = (JavascriptExecutor) driver;
          return (SearchContext) js.executeScript("return arguments[0].shadowRoot", shadowHost);
      });
  }
  
  public void uploadFileWithIncorrectBirthYear() throws TestingException {
      String url = System.getProperty("user.dir")+"\\src\\test\\resources\\files\\customer-upload-old-birth-year.xls";
      WebElement shadowHost = driver.findElement(By.cssSelector("#cphContent_cifCustomerFile_fakeFileInput"));
      SearchContext shadowRoot = waitForShadowRoot(driver, shadowHost);
      WebElement shadowElement = shadowRoot.findElement(By.cssSelector("#file-upload-button"));
      shadowElement.sendKeys(url);
  }
  

3. 确认Shadow Host定位是否准确 #

检查你使用的#cphContent_cifCustomerFile_fakeFileInput是否确实是包含目标Shadow Root的宿主元素：

• 右键目标文件上传元素，打开浏览器开发者工具，在DOM树中向上查找带有#shadow-root标记的父元素，核对其选择器是否与你使用的一致。
• 另外注意：部分文件上传按钮是装饰性元素，实际负责接收文件的是隐藏的input[type="file"]元素，需确认真实上传元素的选择器。

内容的提问来源于stack exchange，提问作者MyungHee