点击按钮触发请求后如何等待所有XHR请求完成再关闭页面

waitForLoadState('load')仅监测页面初始加载完成的事件，不会捕获点击操作触发的后续异步请求；networkidle需要持续500ms没有任何网络请求才会返回，如果页面存在心跳、长轮询这类持续请求就会触发超时，所以需要主动跟踪异步请求的生命周期，以下是两种可落地的实现方案：

方法1：自定义异步请求计数器（通用场景） #

实现逻辑：统计所有XHR/Fetch类型请求的生命周期，请求发起时计数+1，请求完成/失败时计数-1，等待计数归0后再执行页面关闭操作。
代码示例（Playwright Node.js环境）：

// 点击按钮前先注册全局请求监听器
let requestCount = 0;
// 监听请求发起
page.on('request', request => {
  // 可根据业务需求调整要监听的资源类型，默认覆盖XHR和Fetch两种异步请求
  if (['xhr', 'fetch'].includes(request.resourceType())) {
    requestCount++;
  }
});
// 监听请求成功结束
page.on('requestfinished', request => {
  if (['xhr', 'fetch'].includes(request.resourceType())) {
    requestCount--;
  }
});
// 监听请求失败
page.on('requestfailed', request => {
  if (['xhr', 'fetch'].includes(request.resourceType())) {
    requestCount--;
  }
});

// 执行点击操作
await page.click('#target-button');

// 等待所有请求完成，设置30秒超时避免死等
const startTime = Date.now();
while (requestCount > 0 && Date.now() - startTime < 30000) {
  await new Promise(resolve => setTimeout(resolve, 100));
}

// 所有请求完成后再关闭页面
await page.close();

方法2：指定关键请求等待（稳定优先场景） #

如果可以明确点击后需要等待的核心请求路径，直接监听对应请求完成即可，避免统计无关的心跳、埋点类请求：

// 先注册需要等待的请求监听，再执行点击操作
const waitForTargetRequests = Promise.all([
  // 替换为实际业务需要等待的请求路径特征
  page.waitForResponse(res => res.url().includes('/api/submit-data') && res.ok()),
  page.waitForResponse(res => res.url().includes('/api/save-log') && res.ok())
]);

await page.click('#target-button');
// 等待所有指定请求返回
await waitForTargetRequests;

// 所有请求完成后再关闭页面
await page.close();

注意事项 #

• 如果页面有周期性心跳、长轮询这类永远不会停止的请求，不要使用方法1，优先选择方法2指定需要等待的业务请求
• 超时阈值可根据业务接口的平均响应时间灵活调整，避免超时误判
• 如果只需要等待XHR类型请求，删除代码中fetch类型的判断即可

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