如何在Playwright中等待多个条件之一变为真？

当然可以实现类似WebdriverIO中waitUntil的多条件等待逻辑，核心思路是用Promise.race()结合Playwright的内置等待方法，下面是两种实用实现方式：

方式一：直接用Promise.race包裹元素等待 #

这种方式最简洁，直接针对每个目标元素调用waitFor，只要其中一个元素满足状态要求（比如可见、存在），就会立即结束等待：

await Promise.race([
  // 等待双因素验证标题可见
  page.locator('#two-factor-header').waitFor({ state: 'visible' }),
  // 等待服务条款标题可见
  page.locator('#tos-title').waitFor({ state: 'visible' }),
  // 等待错误提示可见
  page.locator('.error-message').waitFor({ state: 'visible' }),
  // 等待咨询按钮可见
  page.locator('#consult-btn').waitFor({ state: 'visible' })
]);

• 你可以根据需求修改state参数：'attached'对应元素存在于DOM中，'visible'对应元素可见，'hidden'对应元素隐藏。
• 如果需要自定义超时，给每个waitFor传入timeout参数即可，或者在全局配置中设置默认超时。

方式二：封装自定义waitUntilAny函数 #

如果需要更贴近WebdriverIO的写法，支持自定义条件函数和统一的超时提示，可以封装一个通用函数：

async function waitUntilAny(page, conditionFns, options = {}) {
  const timeout = options.timeout || 30000;
  const timeoutMsg = options.timeoutMsg || `No condition was met within ${timeout}ms`;

  // 把所有条件转为Promise
  const conditionPromises = conditionFns.map(fn => fn());
  // 添加超时定时器
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error(timeoutMsg)), timeout);
  });

  try {
    // 等待第一个完成的Promise（成功或超时）
    await Promise.race([...conditionPromises, timeoutPromise]);
  } catch (err) {
    // 只抛出超时错误，忽略单个条件的失败
    if (err.message === timeoutMsg) throw err;
  }
}

// 使用示例
await waitUntilAny(page, [
  () => page.locator('#two-factor-header').isVisible(),
  () => page.locator('#tos-title').isVisible(),
  () => page.locator('.error-message').isVisible(),
  () => page.locator('#consult-btn').isVisible()
], {
  timeout: helper.defaultWaitTime(),
  timeoutMsg: `page is not loaded after ${helper.defaultWaitTime()} seconds`
});

• 这里的conditionFns是一个返回Promise的函数数组，你可以在函数里写任意异步检查逻辑，不局限于元素状态。
• 函数会在任一条件返回true时立即结束，超时则抛出指定的错误信息。

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