Playwright中如何正确等待多个请求？避免顺序等待失效

你当前的写法会失败，核心原因是page.waitForRequest()默认只会监听调用该方法之后发起的请求。如果在等待第一个请求的过程中，后面的请求已经完成，再调用page.waitForRequest()时，对应的请求已经发生过，方法会因超时失败。

正确的解决方案 #

方案1：用Promise.all同时等待所有请求

先创建所有等待请求的Promise，再触发页面加载操作，这样不管请求的先后顺序，都能正确捕获到：

// 先创建所有等待请求的Promise
const waitAllRequests = Promise.all([
  page.waitForRequest("/api/data/pagesTree1"),
  page.waitForRequest("/api/data/pagesTree2"),
  page.waitForRequest("/api/data/pagesTree3")
]);

// 触发页面加载（比如导航、点击按钮等操作）
await page.goto("你的目标页面URL");

// 等待所有请求完成
await waitAllRequests;

如果需要等待请求完成并返回响应（更可靠，确保数据已加载），推荐用page.waitForResponse()：

const waitAllResponses = Promise.all([
  page.waitForResponse(res => res.url().includes("/api/data/pagesTree1")),
  page.waitForResponse(res => res.url().includes("/api/data/pagesTree2")),
  page.waitForResponse(res => res.url().includes("/api/data/pagesTree3"))
]);

await page.goto("你的目标页面URL");
await waitAllResponses;

方案2：监听请求完成事件（更灵活）

适合URL含动态参数、或需要批量跟踪请求的场景，能捕获所有在监听后发生的请求：

const targetPaths = ["/api/data/pagesTree1", "/api/data/pagesTree2", "/api/data/pagesTree3"];
const completedRequests = new Set();

// 监听请求完成事件
const requestHandler = (request) => {
  const url = request.url();
  if (targetPaths.some(path => url.includes(path))) {
    completedRequests.add(url);
  }
};
page.on("requestfinished", requestHandler);

// 触发页面操作
await page.goto("你的目标页面URL");

// 等待所有目标请求都完成
await page.waitFor(() => completedRequests.size === targetPaths.length);

// 记得移除监听，避免内存泄漏
page.off("requestfinished", requestHandler);

关于你提到的数组参数 #

page.waitForRequest()不支持直接传入数组作为参数，这种写法会报错，必须用上述两种方案处理多请求等待。

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