关于document.readyState返回'complete'但页面仍可视加载的问题咨询

这是现代前端应用结合Selenium自动化时很常见的问题——浏览器说页面加载完了，但肉眼明明还在转圈加载，本质是document.readyState的判断逻辑和我们视觉上的“加载完成”不是一回事。

先搞懂为啥会这样 #

document.readyState返回complete，只代表浏览器已经加载完了页面的核心资源：DOM结构、样式表、脚本文件、图片这些静态资源。但现在很多前端应用（比如React、Vue或者用了异步渲染的页面），会在核心资源加载完之后，再通过JS发起异步请求、渲染动态内容、完成组件挂载——这些过程浏览器不会算到readyState里，所以就会出现“浏览器说加载完了，页面还在转”的情况。

针对你的Selenium场景，给你几个实用的解决办法： #

• 等待特定加载元素消失/目标元素出现：这是最靠谱的方案。比如页面上有个加载动画（比如id是loading-spinner的元素），等它消失就代表页面加载完成了：

  WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
  // 等待加载动画隐藏
  wait.until(ExpectedConditions.invisibilityOfElementLocated(By.id("loading-spinner")));
  

  如果有明确的目标内容元素，也可以等它出现：

  wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".target-content")));
  

• 监听前端自定义的加载完成事件：很多前端项目会在自己的应用真正加载完成时触发自定义事件（比如appLoaded），你可以通过JS等待这个事件：

  JavascriptExecutor js = (JavascriptExecutor) driver;
  // 用Promise等待事件触发，或者直接判断应用是否已加载
  js.executeScript("""
      return new Promise(resolve => {
          // 如果应用已经加载完，直接resolve
          if (window.isAppLoaded) resolve();
          // 否则监听自定义事件
          else window.addEventListener('appLoaded', resolve);
      })
  """);
  

• 等待关键网络请求完成：如果页面加载依赖某个API接口（比如获取数据的接口），可以通过Chrome DevTools监听这个请求完成：

  DevTools devTools = ((ChromeDriver) driver).getDevTools();
  devTools.createSession();
  devTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
  
  // 用CountDownLatch等待目标请求完成
  CountDownLatch latch = new CountDownLatch(1);
  devTools.addListener(Network.responseReceived(), response -> {
      String url = response.getResponse().getUrl();
      // 匹配你要等的API地址
      if (url.contains("/api/fetch-page-data")) {
          latch.countDown();
      }
  });
  latch.await(10, TimeUnit.SECONDS);
  

• 轮询判断页面DOM是否稳定：如果没有明确的元素或事件，也可以轮询页面的HTML内容，当连续几次内容不变时，就认为页面加载完成了：

  JavascriptExecutor js = (JavascriptExecutor) driver;
  String lastHtml = "";
  int stableCount = 0;
  // 最多检查5次，每次间隔1秒
  while (stableCount < 5) {
      String currentHtml = js.executeScript("return document.documentElement.outerHTML").toString();
      if (currentHtml.equals(lastHtml)) {
          stableCount++;
      } else {
          stableCount = 0;
          lastHtml = currentHtml;
      }
      Thread.sleep(1000);
  }
  

最后总结一下 #

document.readyState只适合传统静态页面的加载判断，对于现在的动态前端应用，一定要结合页面的实际加载逻辑来选择等待方式——要么等关键元素，要么等事件，要么等网络请求，这样才能准确判断页面是否真的加载完成，而不是被浏览器的complete状态误导。

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