Playwright中如何为图片请求设置单独超时（仅中止慢请求）

你的思路方向是对的，但两种实现都存在明显问题，以下是具体分析和更优雅的解决方案：

现有实现的问题 #

第一种方法的问题 #

• 调用route.continue()后，请求已被放行进入处理流程，此时再调用route.abort()是无效的——Playwright不允许对同一路由请求执行重复操作。
• 代码中未定义url变量，会导致控制台报错。

第二种方法的问题 #

• 使用route.fetch()重新发起请求，再通过route.fulfill()返回响应，相当于额外发起了一次网络请求，大幅增加了测试的网络开销，直接导致测试超时概率上升。
• 直接将route.fetch()的响应传入route.fulfill()存在类型匹配和响应处理的潜在问题，这也是图片无法正常加载的原因。

优雅的解决方案 #

利用Playwright请求对象的finished()方法结合Promise.race()，可以精准实现"超时中止、正常放行"的逻辑，且不会额外增加网络开销：

await context.route(/^https:\/\/img\.domain-name\.com/, async (route) => {
  const request = route.request();
  let timeoutId;

  // 定义超时Promise：3秒后检查请求是否未完成，未完成则触发超时
  const timeoutPromise = new Promise((_, reject) => {
    timeoutId = setTimeout(() => {
      if (!request.isFinished()) {
        reject(new Error("图片请求超时"));
      }
    }, 3000);
  });

  try {
    // 并行执行：放行请求并等待请求完成，同时监听超时
    await Promise.race([
      route.continue().then(() => request.finished()),
      timeoutPromise
    ]);
  } catch (err) {
    // 超时且请求未完成时，中止请求
    if (!request.isFinished()) {
      await route.abort().catch(e => console.log(`中止超时请求失败: ${e}`));
    }
  } finally {
    // 无论请求成功或超时，都清除定时器
    clearTimeout(timeoutId);
  }
});

方案优势 #

• 无额外网络开销：直接复用原请求流程，不会像第二种方法那样重复发起请求。
• 状态判断严谨：通过request.isFinished()确保只对未完成的请求执行中止操作，避免无效调用。
• 异步逻辑清晰：利用Promise.race()精准控制超时逻辑，代码可读性和稳定性更高。

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