使用Puppeteer点击后如何检测POST响应完成以抓取分页表格数据

你现在用固定等待2秒的方法确实不够稳妥——网络快的时候纯浪费时间，网络慢或者后端响应慢的话，还可能抓到旧数据。针对这种点击分页按钮发起POST请求、只更新表格的场景，有两种更靠谱的方案：

方案一：监听并等待目标POST请求完成 #

Puppeteer可以监听页面的网络请求，我们可以在点击下一页前，先设置一个监听器，专门等分页接口的POST请求完成，再去抓取数据。代码大概是这样：

while (await page.$(NEXT_BUTTON_SELECTOR) !== null) {
  // 提前监听目标分页POST请求，替换成你实际的接口路径关键词
  const responsePromise = page.waitForResponse(response => 
    response.url().includes('pagination-api') && response.request().method() === 'POST'
  );
  
  await page.click(NEXT_BUTTON_SELECTOR);
  // 等待请求完成后再继续
  await responsePromise;
  
  pageTableArray = getData();
}

这个方法的优势是直接和后端请求绑定，请求完成就意味着数据已经准备好，完全不用猜等待时间。

方案二：等待表格内容发生变化 #

如果你不知道具体的分页接口路径，或者不想依赖接口细节，可以通过监控表格元素的变化来判断数据是否更新。比如先记录当前表格最后一行的内容，点击下一页后，等待最后一行内容改变：

while (await page.$(NEXT_BUTTON_SELECTOR) !== null) {
  // 获取当前表格最后一行的文本内容作为标识
  const lastRowText = await page.$eval('table tr:last-child', el => el.textContent.trim());
  
  await page.click(NEXT_BUTTON_SELECTOR);
  
  // 等待表格最后一行内容变化，说明新数据加载完成
  await page.waitForFunction(
    (lastText) => document.querySelector('table tr:last-child').textContent.trim() !== lastText,
    {},
    lastRowText
  );
  
  pageTableArray = getData();
}

这种方法完全基于页面元素，兼容性更好，不用关心后端接口的具体实现。

另外还要注意循环的终止条件：如果最后一页的分页按钮会变灰（添加disabled属性），那你原来的page.$(NEXT_BUTTON_SELECTOR) !== null可能会误判，建议改成判断按钮是否可用：

const nextBtn = await page.$(NEXT_BUTTON_SELECTOR);
if (!nextBtn || await nextBtn.isDisabled()) {
  break;
}

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