如何用Playwright获取页面中同一URL的所有响应？

原代码使用page.waitForResponse只能获取第一个匹配条件的响应，要收集所有10次data/api.json的成功响应，需要通过监听页面的response事件来实现，具体代码如下：

// 初始化数组存储所有符合条件的响应
const matchingResponses = [];

// 监听response事件，收集符合条件的响应
page.on('response', (response) => {
  if (response.url().includes('data/api.json') && response.status() === 200) {
    matchingResponses.push(response);
  }
});

// 触发页面操作（比如导航到目标页面，或是触发请求的交互动作）
await page.goto('你的目标页面URL');

// 自定义等待逻辑，直到收集到10个目标响应
await new Promise((resolve) => {
  const checkInterval = setInterval(() => {
    if (matchingResponses.length === 10) {
      clearInterval(checkInterval);
      resolve();
    }
  }, 500);
});

// 批量获取所有响应的JSON数据并合并
const allData = await Promise.all(
  matchingResponses.map(response => response.json())
);

// 输出合并结果或进行后续处理
console.log('合并后的所有响应数据:', allData);

关键说明 #

• page.on('response')会监听页面发出的所有响应，每次响应触发时执行回调，我们在回调里筛选目标URL的成功响应并存储
• 等待逻辑可根据实际场景调整：如果请求是页面加载时自动发出的，也可以用page.waitForLoadState('networkidle')替代自定义定时器；如果是用户操作触发的请求，要确保在触发操作后再执行等待逻辑
• Promise.all能并行处理所有响应的JSON解析，提升处理效率

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