如何正确拦截Playwright中Firefox浏览器的图片请求

核心失效原因 #

你提供的代码本身逻辑没有问题，失效基本都是使用顺序或覆盖范围问题导致，按以下优先级调整即可：

• 路由注册时机错误：page.route() / context.route() 必须放在 page.goto() 执行之前，若先跳转页面再注册拦截规则，页面请求已经发起，自然不会触发拦截逻辑
• 规则冗余冲突：后缀匹配规则会漏掉webp、svg、gif、无后缀图片、动态返回的图片资源，同时注册两条规则可能因为路由匹配优先级导致逻辑异常，保留按资源类型判断的规则即可
• Service Worker缓存干扰：如果目标站点启用了Service Worker缓存图片，部分请求不会走到Playwright路由层，需要额外禁用

可用实现代码 #

全局上下文拦截（推荐，覆盖所有页面更稳定） #

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  // 可选：禁用Service Worker避免缓存拦截失效
  const context = await browser.newContext({
    serviceWorkers: 'block'
  });

  // 先注册拦截规则，再创建页面、跳转
  await context.route('**/*', route => {
    return route.request().resourceType() === 'image' ? 
      route.abort() : route.continue();
  });

  const page = await context.newPage();
  // 注册完规则再执行跳转
  await page.goto('https://你的目标站点地址');

  // 后续其他逻辑
  await page.waitForTimeout(3000);
  await browser.close();
})();

单页面拦截 #

如果只需要拦截单个页面的图片，把context.route替换为page.route即可，同样要放在page.goto()之前执行。

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