如何在Puppeteer中设置超时中止请求，解决截图失败问题？

这个场景我太熟悉了——不少网站挂的第三方分析、广告脚本动不动就卡加载，直接触发goto的超时限制。既然不能延长超时时间，那咱们就主动拦截并中止那些加载超时的脚本，刚好匹配你要的20秒阈值。

这里有个精准可行的方案，结合请求拦截和定时器来实现：

// 先启用请求拦截
await page.setRequestInterception(true);

// 用Map跟踪每个脚本请求的定时器，避免内存泄漏
const requestTimers = new Map();

page.on('request', (request) => {
  // 只针对脚本类型的请求做超时处理
  if (request.resourceType() === 'script') {
    // 设置20秒定时器，到时中止未完成的脚本请求
    const timer = setTimeout(() => {
      // 先检查请求是否还未被处理，避免重复操作报错
      if (!request.isInterceptResolutionHandled()) {
        console.log(`中止超时脚本: ${request.url()}`);
        request.abort();
      }
    }, 20000); // 20秒，单位为毫秒

    requestTimers.set(request, timer);
    // 放行请求，同时等待定时器或请求完成事件
    request.continue();
  } else {
    // 非脚本资源正常放行
    request.continue();
  }
});

// 请求完成/失败时及时清除对应定时器
page.on('requestfinished', (request) => {
  const timer = requestTimers.get(request);
  if (timer) {
    clearTimeout(timer);
    requestTimers.delete(request);
  }
});

page.on('requestfailed', (request) => {
  const timer = requestTimers.get(request);
  if (timer) {
    clearTimeout(timer);
    requestTimers.delete(request);
  }
});

// 执行导航与截图
try {
  await page.goto('你的目标URL', {
    timeout: 60000, // 保持你原有的超时设置
    waitUntil: 'domcontentloaded' // 改用DOM加载完成作为触发条件，比默认的load更适合截图场景
  });
  // 执行截图操作
  await page.screenshot({ path: 'screenshot.png' });
} catch (err) {
  console.error('导航或截图出错:', err);
} finally {
  // 清理残留定时器与请求拦截
  requestTimers.forEach(timer => clearTimeout(timer));
  requestTimers.clear();
  await page.setRequestInterception(false);
}

关键细节说明： #

• 精准拦截脚本：只对script类型的请求设置超时逻辑，不影响图片、样式等其他资源加载。
• 定时器安全清理：在请求完成或失败时及时清除定时器，避免内存泄漏问题。
• 调整等待策略：将goto的waitUntil改为domcontentloaded，不需要等所有资源加载完成就可以启动截图，配合脚本中止逻辑能大幅减少超时概率。
• 防重复操作检查：用isInterceptResolutionHandled()确保中止请求前，该请求还未被处理，避免控制台报错。

如果想要更简单的全局停止方案（会中止所有未完成的资源加载，而非仅脚本），也可以这样写：

await page.goto('你的目标URL', {
  timeout: 60000,
  waitUntil: 'domcontentloaded'
});

// 20秒后强制停止页面所有加载请求（类似浏览器点击停止按钮）
setTimeout(() => {
  page.evaluate(() => window.stop());
}, 20000);

// 等待页面稳定后截图
await page.waitForTimeout(1000);
await page.screenshot({ path: 'screenshot.png' });

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