Playwright中替代Protractor browser.wait的循环等待实现方案

方法一：while循环配合try/catch #

这种方式逻辑直观，通过短时间等待目标元素，超时则执行刷新操作，直到元素出现：

async function waitAndClickTestButton(page) {
  while (true) {
    try {
      // 尝试等待testButton出现，设置短超时（比如2秒）
      const testButton = await page.waitForSelector('#testButton', { timeout: 2000 });
      await testButton.click();
      break; // 元素出现并点击后退出循环
    } catch (error) {
      // 超时说明元素未出现，点击刷新按钮
      const refreshButton = await page.waitForSelector('#refreshButton');
      await refreshButton.click();
      // 可加短延迟避免刷新太频繁
      await page.waitForTimeout(1000);
    }
  }
}

方法二：使用page.waitForFunction（和Protractor的browser.wait逻辑最接近） #

Playwright的page.waitForFunction允许传入自定义异步判断逻辑，返回true时停止等待，完美匹配你之前的Protractor写法：

async function waitAndClickTestButton(page) {
  await page.waitForFunction(async () => {
    const testButton = document.querySelector('#testButton');
    if (testButton) {
      testButton.click();
      return true;
    } else {
      const refreshButton = document.querySelector('#refreshButton');
      if (refreshButton) refreshButton.click();
      return false;
    }
  }, { polling: 1000 }); // 每隔1秒检查一次条件
}

补充说明 #

• 两种方法都能实现需求，第一种更易调试，第二种更贴近你之前的使用习惯
• 记得把代码里的#testButton、#refreshButton替换成你实际用的选择器
• 可根据场景调整超时时间、轮询间隔或刷新后的延迟，避免操作过于频繁

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