如何在Playwright（TypeScript）中等待多个响应？

我们在Playwright里有page.waitForResponse方法，但现在需要用它等待多个响应，试了循环调用这个方法却没效果。

我尝试的代码 #

async click(locator: string, waitForResponse){
 // waitForResponse = [{url: 'url1'},{url: 'url3'},{url: 'url2'}];
    const [response] = await Promise.all([
            waitForResponse ? this._waitForResponse(waitForResponse) : Promise.resolve(true),
            await this.page.locator(locator).first().click()
          ]);
    }
// 调用示例
 await click(`xpath`, [{url: 'url1'},{url: 'url3'},{url: 'url2'}]);

我的_waitForResponse方法（处理单个或多个响应参数） #

public async _waitForResponse(args: WaitForResponse | Array<WaitForResponse>): Promise<any> {
if (Array.isArray(args)) {
  const resposneArray = [];
  for (const aa in args) {
    resposneArray.push(await this._callWaitForResponse(args[aa]));
  }
  return resposneArray;
} else {
  return this._callWaitForResponse(args);
}

实际调用Playwright原生方法的实现 #

private async _callWaitForResponse(args: WaitForResponse): Promise<any> {
const { requestUrl } = args;
return this.page.waitForResponse((response) =>
  requestUrl.every((url: string) => response.url().includes(url))
);

问题分析与修复方案 #

你的代码有几个关键问题导致等待失效：

1. Promise.all里的异步操作顺序错误：你在Promise.all的第二个参数里直接用了await，导致点击操作先执行完才开始等待响应，完全失去了并行等待的意义——Promise.all需要传入的是Promise对象，而非已await的结果。
2. 串行等待逻辑不符合场景：_waitForResponse里用for...in+await循环，会等第一个响应完成才开始等第二个，但实际场景中多个响应通常是并行触发的，串行等待会导致超时或逻辑错误。
3. 参数键名不匹配：调用时传入的是{url: 'xxx'}，但_callWaitForResponse里解构的是requestUrl，参数对应不上。

修复后的代码

1. 修正参数与并行等待逻辑

// 改为并行等待所有响应
public async _waitForResponse(args: WaitForResponse | Array<WaitForResponse>): Promise<any> {
  if (Array.isArray(args)) {
    return Promise.all(args.map(item => this._callWaitForResponse(item)));
  } else {
    return this._callWaitForResponse(args);
  }
}

// 修正参数键名，匹配传入的{url: 'xxx'}
private async _callWaitForResponse(args: WaitForResponse): Promise<any> {
  const { url } = args;
  return this.page.waitForResponse((response) => 
    response.url().includes(url)
  );
}

2. 修正click方法里的Promise.all用法

async click(locator: string, waitForResponse?: Array<WaitForResponse>){
  const promises = [];
  if (waitForResponse) {
    promises.push(this._waitForResponse(waitForResponse));
  }
  // 点击操作作为Promise加入数组，不提前await
  promises.push(this.page.locator(locator).first().click());
  
  // 并行执行所有操作
  const [responses] = await Promise.all(promises);
  return responses;
}

// 调用示例不变
await click(`xpath`, [{url: 'url1'},{url: 'url3'},{url: 'url2'}]);

额外优化：等待所有指定URL的响应完成

如果需要确保所有目标URL都返回响应，可以用一个集合统计已匹配的URL：

async waitForMultipleResponses(urls: string[], timeout = 30000) {
  const matchedUrls = new Set();
  return this.page.waitForResponse((response) => {
    const matchedUrl = urls.find(url => response.url().includes(url));
    if (matchedUrl) {
      matchedUrls.add(matchedUrl);
      // 所有URL都匹配到响应时返回true
      return matchedUrls.size === urls.length;
    }
    return false;
  }, { timeout });
}

// 调用方式
await this.waitForMultipleResponses(['url1', 'url3', 'url2']);

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