如何让WebdriverIO等待页面完全加载？已尝试readyState方案未生效

你的document.readyState判断逻辑本身没问题，代码放置位置（导航到新页面后、操作代码前）也是正确的，没生效大概率是异步处理不到位，或者页面存在DOM加载完成后仍在异步加载的内容（比如AJAX数据、懒加载组件），以下是针对性的解决方案：

1. 确保异步模式下正确使用await #

如果你的WebdriverIO配置是sync: false（异步模式），所有浏览器操作都需要加await，否则代码会跳过等待直接执行后续操作：

await browser.url('https://目标页面地址');
await browser.waitUntil(
  async () => await browser.execute(() => document.readyState === 'complete'),
  {
    timeout: 60 * 1000, // 60秒超时
    timeoutMsg: '页面未在60秒内完成基础加载'
  }
);
// 后续操作同样需要加await
await browser.click('#操作按钮');

如果是同步模式（sync: true），代码可以直接按你原来的写法，但要确认配置里的同步模式已开启：

browser.url('https://目标页面地址');
browser.waitUntil(
  () => browser.execute(() => document.readyState === 'complete'),
  {
    timeout: 60 * 1000,
    timeoutMsg: '页面未在60秒内完成基础加载'
  }
);
browser.click('#操作按钮');

2. 补充等待关键交互元素 #

document.readyState === 'complete'仅代表DOM、图片、样式等静态资源加载完成，但很多页面会在这之后异步加载数据或组件，导致页面看似加载完成但无法交互。这种情况下，需要结合关键元素的等待来确保页面真正可用：

// 先等基础加载完成
browser.waitUntil(
  () => browser.execute(() => document.readyState === 'complete'),
  { timeout: 60000, timeoutMsg: '页面基础加载超时' }
);
// 再等待页面核心交互元素可见（比如搜索框、提交按钮）
browser.waitForDisplayed('#核心元素ID', { timeout: 30000 });

3. 更简洁的替代方案：使用waitForNavigation #

WebdriverIO自带的waitForNavigation方法可以直接等待页面导航完成，内部已经封装了readyState的判断，用法更简洁：

browser.url('https://目标页面地址');
// 等待导航完成，直到readyState变为complete
browser.waitForNavigation({ waitUntil: 'complete', timeout: 60000 });

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