Playwright(TS)如何等待3个相同URL及Payload的响应全部完成？

你之前的代码之所以只等待第一个响应，是因为三个page.waitForResponse会同时匹配到第一个符合URL条件的响应，导致所有Promise直接resolve，不会继续等待后续两个响应。

要等待3个同时满足URL和Payload匹配的响应，你可以通过以下两种方式实现：

方法1：带闭包计数的waitForResponse #

await page.waitForResponse(() => {
  let matchedCount = 0;
  return (response) => {
    // 1. 匹配目标URL
    if (!response.url().includes('/variations')) return false;
    
    // 2. 匹配请求方法（POST请求需校验Payload，GET则校验query参数）
    const request = response.request();
    if (request.method() !== 'POST') return false;
    
    // 3. 匹配Payload，根据实际请求结构调整判断逻辑
    const payload = request.postJSON();
    if (!payload || payload.targetField !== 'targetValue') return false; // 替换为你的Payload匹配条件
    
    matchedCount++;
    // 匹配到第3个响应时返回true，触发waitForResponse完成
    return matchedCount === 3;
  };
});

方法2：手动监听response事件收集响应 #

const matchedResponses: Response[] = [];

// 创建Promise，收集到3个符合条件的响应后resolve
const waitForThree = new Promise<void>((resolve) => {
  const handleResponse = (response: Response) => {
    // 重复URL+Payload匹配逻辑
    if (response.url().includes('/variations')) {
      const request = response.request();
      if (request.method() === 'POST') {
        const payload = request.postJSON();
        if (payload && payload.targetField !== 'targetValue') { // 替换为你的Payload匹配条件
          matchedResponses.push(response);
          if (matchedResponses.length === 3) {
            page.off('response', handleResponse); // 移除监听避免干扰
            resolve();
          }
        }
      }
    }
  };
  page.on('response', handleResponse);
});

// 执行触发这3个请求的操作（如点击按钮、提交表单）
await page.click('#trigger-request-btn');

// 等待3个响应全部完成
await waitForThree;

关键注意事项 #

• 必须补充Payload的判断逻辑，否则会误匹配所有URL包含/variations的响应，不管Payload是否一致。
• 如果是GET请求，需通过request.query()解析URL参数来匹配"Payload"。

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