Java中使用Selenium+Chrome无头浏览器测试时动态JS内容加载失败

问题背景 #

测试Spring Boot自建网站时，Selenium可完成页面加载、标题验证等基础操作，但动态内容始终无法加载。页面内容通过JS脚本填充，已配置WebDriver启动选项并添加等待逻辑，问题仍未解决。

页面结构 #

<div id="main">
    <div id="div_1"></div>
    <div id="div_2"></div>
    <div id="div_3"></div>
    <div id="div_4"></div>
</div>

动态内容加载JS代码 #

document.addEventListener("DOMContentLoaded", function(event) {
    populateDivs()
})

初始WebDriver配置 #

final ChromeOptions options = new ChromeOptions();
options.addArguments(
    "--headless",
    "--nogpu",
    "--disable-gpu",
    "--enable-javascript",
    "--no-sandbox",
    "--disable-extensions",
    "--disable-blink-features=AutomationControlled",
    "--disable-features=NetworkService,NetworkServiceInProcess",
     "start-maximized",
     "disable-infobars"
);

等待逻辑代码 #

final WebDriverWait wait = new WebDriverWait(driver, Duration.ofMinutes(1L));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("div_1_content")));

完整测试代码 #

// Create driver
final ChromeOptions options = new ChromeOptions();
options.setAcceptInsecureCerts(true);
options.addArguments("--headless=new");

final URL url = new URL("http://127.0.0.1:4444/wd/hub");
final RemoteWebDriver driver= new RemoteWebDriver(url, options);

// Load page
driver.navigate().to("https://127.0.0.1:81");

// Wait for dynamic content to load
final WebDriverWait wait = new WebDriverWait(driver, Duration.ofMinutes(1L));            
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("div_1_content")));

排查方向与解决建议 #

1. 验证前端JS逻辑有效性 #

• 在浏览器控制台手动执行populateDivs()，确认是否能正常生成div_1_content元素。如果手动执行也失败，说明问题出在前端JS逻辑，而非Selenium配置。
• 检查populateDivs()是否依赖浏览器特有API（如window.screen、navigator属性），headless模式下部分API返回值与正常浏览器不同，可能触发JS逻辑分支错误。

2. 调整Headless模式参数 #

• 新版Chrome的--headless=new模式与旧版行为差异较大，尝试换回旧版--headless=chrome（或仅--headless）测试，观察动态内容是否加载。
• 添加--window-size=1920,1080参数，避免headless模式下窗口尺寸过小导致布局或JS逻辑异常。

3. 确认元素定位准确性 #

• 通过driver.getPageSource()获取页面源码，搜索目标IDdiv_1_content是否存在，排除拼写错误或动态ID生成的问题。
• 若元素嵌套在div_1内，可修改等待条件为检查父容器内容非空：

  wait.until(driver -> !driver.findElement(By.id("div_1")).getText().isEmpty());
  

4. 排查网络请求状态 #

• 启用Selenium网络日志功能，捕获页面加载时的接口请求，确认populateDivs()依赖的接口是否返回正确数据：

  ChromeOptions options = new ChromeOptions();
  options.setCapability("goog:loggingPrefs", Map.of("performance", "ALL"));
  // 初始化driver后获取日志
  List<LogEntry> logs = driver.manage().logs().get("performance").getAll();
  // 解析日志查看接口请求状态码与响应内容
  

5. 优化等待策略 #

• 结合JS执行状态等待，例如在前端添加执行完成标记，再通过Selenium等待该标记：
  前端JS修改：

  function populateDivs() {
      // 原有填充逻辑
      window.populateDivsDone = true;
  }
  

  Selenium等待代码：

  wait.until(driver -> (Boolean) ((JavascriptExecutor) driver).executeScript(
      "return window.populateDivsDone === true;"
  ));
  

6. 检查RemoteWebDriver环境 #

• 确认Selenium Grid节点使用的Chrome版本与本地开发环境一致，版本差异可能导致JS执行兼容性问题。
• 排查Grid节点是否存在网络限制，无法访问网站依赖的静态资源或接口。

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