Playwright(TypeScript)中点击Next按钮至消失时如何避免超时错误？

原代码的问题在于，Playwright的locator.click()默认会等待元素可见且可交互，当最后一页的Next按钮消失后，代码会一直等待超时才抛出错误，既低效又不优雅。可以通过先判断按钮状态再执行点击的方式，避免不必要的超时等待。

方案一：先检查按钮可见性再点击（推荐） #

直接判断Next按钮是否可见，不可见则退出循环，避免靠捕获错误终止流程：

while (true) {
  const nextButton = page.locator("//div[@class='next-button']");
  // 检查按钮是否可见（若按钮是存在但禁用的情况，改用isEnabled()）
  const hasNextPage = await nextButton.isVisible();
  
  if (!hasNextPage) break;

  await nextButton.click();
  // 替换硬等待：等待页面加载完成，比固定等1秒更稳定
  await page.waitForLoadState('networkidle');
  // 也可以等待分页列表更新，比如等待新的列表项加载：
  // await page.locator(".list-item").waitFor({ state: 'attached' });
}

方案二：通过短超时等待按钮出现来终止循环 #

如果更倾向于用等待机制判断，可设置短超时等待按钮出现，未出现则退出：

while (true) {
  try {
    // 等待按钮可见，超时设为2秒（可根据页面响应速度调整）
    await page.locator("//div[@class='next-button']").waitFor({ state: 'visible', timeout: 2000 });
    await page.locator("//div[@class='next-button']").click();
    await page.waitForLoadState('domcontentloaded');
  } catch (error) {
    // 超时说明按钮已消失，到达最后一页
    break;
  }
}

注意事项 #

• 若网站的Next按钮是存在但禁用（而非消失），请把isVisible()换成isEnabled()判断
• 绝对避免使用waitForTimeout()，硬等待会导致测试不稳定，优先用Playwright内置的等待逻辑（加载状态、元素状态变化）
• 可给定位器加更精确的过滤，比如按钮有文字时：page.locator("//div[@class='next-button']").filter({ hasText: 'Next' })

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