如何等待所有XHR请求加载完成？Playwright实践疑问

要等待所有搜索触发的XHR请求完成，你需要先提前监听请求，再执行输入操作，最后等待所有监听的请求结束。原来的waitForResponse只会捕获第一个符合条件的响应，而waitForLoadState失效是因为搜索请求属于局部AJAX更新，不会触发页面的完整加载状态（比如networkidle）。

以下是修改后的代码：

async searchTextWithWait(value: string) {
  // 1. 提前监听所有XHR请求，收集它们的响应Promise
  const responsePromises: Promise<Response>[] = [];
  const requestListener = (request: Request) => {
    // 可根据请求URL进一步过滤，只监听搜索相关接口
    if (request.resourceType() === 'xhr') {
      responsePromises.push(request.response());
    }
  };
  this.page.on('request', requestListener);

  // 2. 执行搜索输入操作
  await (await this.page.waitForSelector("//span[contains(@class,'search-input')]/input")).type(value, { delay: 80 });

  // 3. 等待所有收集到的XHR请求完成
  await Promise.all(responsePromises);

  // 4. 移除监听，避免影响后续操作
  this.page.off('request', requestListener);
}

补充优化 #

如果搜索接口有特定的URL特征（比如包含/api/search），可以在requestListener里加上URL过滤，避免捕获无关的XHR请求：

if (request.resourceType() === 'xhr' && request.url().includes('/api/search')) {
  responsePromises.push(request.response());
}

输入时的delay会触发连续请求（比如输入每个字符都发一次），这种情况下上述方法会自动收集所有触发的请求，等待全部完成。

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