如何在Playwright中拦截滚动式网站的全部页面流量？

问题原因 #

你当前使用的page.route仅会拦截当前页面主框架的请求，而Reddit、TikTok这类无限滚动应用的后续加载请求，可能来自子框架、Service Worker或动态创建的页面上下文，这类请求无法被页面级路由覆盖。

解决方案 #

方案1：使用浏览器级全局路由（推荐） #

通过browser.route设置全局路由，可拦截所有标签页、iframe、Service Worker发起的请求，覆盖所有场景：

import { firefox } from 'playwright';

(async () => {
  // 启动浏览器
  const browser = await firefox.launch();

  // 在创建页面前设置全局路由，确保所有请求都被拦截
  await browser.route('**', async route => {
    // 打印拦截到的请求URL，方便调试
    console.log(`拦截请求: ${route.request().url()}`);
    const response = await route.fetch();
    await route.fulfill({ response });
  });

  const page = await browser.newPage();
  const domain = 'https://www.reddit.com/';
  await page.goto(domain);

  // 模拟无限滚动（可根据需求调整滚动逻辑）
  await page.evaluate(async () => {
    await new Promise(resolve => {
      let scrollTotal = 0;
      const step = 150;
      const timer = setInterval(() => {
        const fullHeight = document.body.scrollHeight;
        window.scrollBy(0, step);
        scrollTotal += step;
        // 滚动到页面底部后停止
        if (scrollTotal >= fullHeight - window.innerHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 200);
    });
  });

  await browser.close();
})();

方案2：页面级路由覆盖所有框架 #

如果你只需要拦截当前页面的所有请求（包括子框架），可以给page.route添加frame: '**'选项：

import { firefox } from 'playwright';

(async () => {
  const browser = await firefox.launch();
  const page = await browser.newPage();
  const domain = 'https://www.reddit.com/';

  // 拦截当前页面所有框架的请求
  await page.route('**', async route => {
    console.log(`拦截请求: ${route.request().url()}`);
    const response = await route.fetch();
    await route.fulfill({ response });
  }, { frame: '**' });

  await page.goto(domain);

  // 模拟滚动逻辑
  await page.evaluate(async () => {
    await new Promise(resolve => {
      let scrollTotal = 0;
      const step = 150;
      const timer = setInterval(() => {
        const fullHeight = document.body.scrollHeight;
        window.scrollBy(0, step);
        scrollTotal += step;
        if (scrollTotal >= fullHeight - window.innerHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 200);
    });
  });

  await browser.close();
})();

关键说明 #

• 全局路由（browser.route）适合需要监控整个浏览器所有流量的场景，比如多页面操作或包含大量子框架的应用。
• 页面级带框架参数的路由（page.route+frame: '**'）更轻量化，仅针对当前页面的所有框架请求。
• 确保使用最新版Playwright，旧版本可能存在路由拦截的兼容性问题。

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