如何高效处理Puppeteer等待？替换固定延迟的优化方案

问题场景 #

点击「Save & Continue」按钮后，页面需耗时2-4分钟根据文件大小获取数据，完成后才会显示「Let's start」按钮。当前用固定75秒延迟可运行，但延迟无法适配不同文件大小的情况，需要更可靠的等待方案。

原代码：

//function to add delays
const delay = (time) => new Promise((resolve) => setTimeout(resolve, time));

//another save and continue click
const saveContBtn2 = await page.waitForSelector(
  '::-p-xpath(//button[text()="Save & Continue"])'
);
await saveContBtn2.click();

//let's start click
await delay(75000);
const letsStart = await page.waitForSelector(
  '::-p-xpath(//button[text()="Let\'s start"])'
);
await letsStart.click();

优化方案 #

方案1：直接等待「Let's start」按钮可交互（最推荐） #

Playwright的waitForSelector默认会等待元素可见且可交互，无需固定延迟，它会自动轮询直到元素出现或超时。可以设置合理的超时时间（比如5分钟，覆盖最长4分钟的加载时间）：

//another save and continue click
const saveContBtn2 = await page.waitForSelector(
  '::-p-xpath(//button[text()="Save & Continue"])'
);
await saveContBtn2.click();

// 等待「Let's start」按钮可交互，超时时间设为5分钟（300000毫秒）
const letsStart = await page.waitForSelector(
  '::-p-xpath(//button[text()="Let\'s start"])',
  { timeout: 300000 }
);
await letsStart.click();

方案2：等待加载状态消失（如果页面有加载提示） #

如果页面在数据获取期间显示加载动画或loading文本，可以先等待这些加载元素消失，再定位目标按钮：

//another save and continue click
const saveContBtn2 = await page.waitForSelector(
  '::-p-xpath(//button[text()="Save & Continue"])'
);
await saveContBtn2.click();

// 等待加载元素消失（示例：假设加载元素的XPath是//div[contains(text(),"加载中")]）
await page.waitForSelector('::-p-xpath(//div[contains(text(),"加载中")])', { state: 'hidden', timeout: 300000 });

// 再等待目标按钮
const letsStart = await page.waitForSelector(
  '::-p-xpath(//button[text()="Let\'s start"])'
);
await letsStart.click();

方案3：监听网络请求完成（如果数据通过API获取） #

如果数据获取是通过特定API请求完成的，可以监听该请求结束后再操作：

//another save and continue click
const saveContBtn2 = await page.waitForSelector(
  '::-p-xpath(//button[text()="Save & Continue"])'
);

// 监听目标API请求（示例：匹配包含/data-fetch的请求URL）
const fetchRequest = page.waitForRequest(request => request.url().includes('/data-fetch') && request.method() === 'GET');

await saveContBtn2.click();
// 等待请求完成
await fetchRequest;

// 再等待目标按钮
const letsStart = await page.waitForSelector(
  '::-p-xpath(//button[text()="Let\'s start"])'
);
await letsStart.click();

说明 #

• 方案1是最通用的方式，无需依赖页面加载状态或网络请求细节，只要目标按钮出现即可触发点击。
• 超时时间可根据实际情况调整，确保覆盖最长的加载时长。

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