Playwright 拦截滚动加载网站的所有网络流量-js教程-PHP中文网

Playwright 拦截滚动加载网站的所有网络流量

碧海醫心

发布： 2025-08-03 21:42:12

原创

683人浏览过

playwright 拦截滚动加载网站的所有网络流量

本文将介绍如何使用 Playwright 拦截滚动加载网站（例如 Reddit 或 TikTok）的所有网络流量。我们将探讨如何设置路由来捕获初始页面加载以及后续滚动时产生的请求和响应，确保可以监控整个会话期间的所有网络活动。

拦截所有网络请求和响应

Playwright 提供了强大的网络拦截功能，允许开发者监听和修改页面上的所有请求和响应。这对于调试、测试和分析网络流量非常有用，尤其是在处理动态加载内容的网站时。

要拦截所有网络请求和响应，可以使用 page.route() 方法。该方法接受一个 URL 模式和一个处理函数。当请求的 URL 与模式匹配时，处理函数将被调用。

以下是一个基本的示例，演示如何拦截所有请求和响应并将其打印到控制台：

import { firefox } from 'playwright';

(async () => {
  const browser = await firefox.launch();
  const page = await browser.newPage();

  // 监听 'request' 事件
  page.on('request', request => console.log('>>', request.method(), request.url()));

  // 监听 'response' 事件
  page.on('response', response => console.log('<<', response.status(), response.url()));

  // 导航到网站
  await page.goto('https://www.reddit.com/');

  // 滚动页面以触发更多请求
  await page.evaluate(() => {
      window.scrollTo(0, document.body.scrollHeight);
  });

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

登录后复制

在这个例子中，page.on('request', ...) 和 page.on('response', ...) 分别注册了请求和响应事件的监听器。当页面发起新的请求或接收到响应时，相应的监听器将被触发，并将请求方法和 URL 或响应状态码和 URL 打印到控制台。

处理滚动加载网站

对于滚动加载网站，初始页面加载后，滚动页面会触发额外的网络请求来加载更多内容。为了拦截所有这些请求，需要确保路由配置在整个会话期间都有效。

v0.dev

Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码

232

查看详情

上述示例中通过 page.evaluate() 执行 JavaScript 代码来模拟滚动操作，window.scrollTo(0, document.body.scrollHeight) 将页面滚动到底部，从而触发动态加载更多内容。

完整示例

下面是一个更完整的示例，演示如何拦截 Reddit 网站的所有网络流量，包括初始加载和滚动加载的内容：

import { firefox } from 'playwright';

(async () => {
  const browser = await firefox.launch();
  const page = await browser.newPage();

  // 拦截所有请求
  await page.route('**', async route => {
    const response = await route.fetch();
    console.log('Intercepted request:', route.request().url());
    await route.fulfill({ response });
  });

  // 导航到 Reddit
  await page.goto('https://www.reddit.com/');

  // 滚动页面多次以加载更多内容
  for (let i = 0; i < 3; i++) {
    await page.evaluate(() => {
      window.scrollTo(0, document.body.scrollHeight);
    });
    // 等待一段时间，确保内容加载完成
    await page.waitForTimeout(2000);
  }

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

登录后复制

在这个示例中，page.route('**', ...) 拦截了所有 URL 的请求。在路由处理函数中，我们首先使用 route.fetch() 获取原始响应，然后使用 route.fulfill({ response }) 将响应返回给浏览器。同时，我们还打印出拦截到的请求 URL，以便于观察。

为了确保加载更多内容，我们使用 page.evaluate() 滚动页面三次，并在每次滚动后使用 page.waitForTimeout() 等待 2 秒，以确保内容加载完成。