使用Playwright codegen能否录制全量网络流量并回放测试用例？

虽然Playwright Codegen本身没有内置的网络流量录制回放功能，但可以通过自定义脚本结合请求拦截来实现需求，以下是具体步骤：

一、录制页面所有网络请求与响应 #

创建一个自定义录制脚本，在启动浏览器的同时拦截并记录所有请求和响应：

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

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  const networkLogs = [];

  // 捕获请求详情
  page.on('request', request => {
    networkLogs.push({
      type: 'request',
      method: request.method(),
      url: request.url(),
      headers: request.headers(),
      postData: request.postData(),
      timestamp: request.timestamp()
    });
  });

  // 捕获响应详情
  page.on('response', async response => {
    const req = response.request();
    let resBody;
    try {
      // 读取文本响应
      resBody = await response.text();
    } catch (err) {
      // 处理二进制资源（如图片、视频），转base64存储
      resBody = `[base64]${(await response.body()).toString('base64')}`;
    }

    networkLogs.push({
      type: 'response',
      url: response.url(),
      status: response.status(),
      headers: response.headers(),
      body: resBody,
      requestKey: `${req.method()}::${req.url()}`,
      timestamp: response.timestamp()
    });
  });

  // 打开目标页面，等待用户操作后关闭浏览器
  await page.goto('https://你的目标页面.com');
  console.log('开始录制，请操作页面，完成后关闭浏览器窗口');
  await browser.waitForEvent('close');

  // 保存日志到本地文件
  fs.writeFileSync('network-recording.json', JSON.stringify(networkLogs, null, 2));
  console.log('网络录制日志已保存至 network-recording.json');
})();

运行脚本：

node record-network.js

操作页面完成后关闭浏览器，即可得到包含所有请求响应的JSON文件。

二、利用录制的流量回放测试用例 #

编写回放脚本，通过路由拦截将页面请求替换为录制好的响应：

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

(async () => {
  // 读取录制的网络日志
  const recording = JSON.parse(fs.readFileSync('network-recording.json', 'utf8'));
  // 构建请求-响应映射表
  const responseMap = new Map();
  recording.forEach(item => {
    if (item.type === 'response') {
      responseMap.set(item.requestKey, item);
    }
  });

  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // 拦截所有请求，返回录制的响应
  await page.route('**/*', async route => {
    const req = route.request();
    const key = `${req.method()}::${req.url()}`;
    const cachedRes = responseMap.get(key);

    if (cachedRes) {
      // 解析二进制响应
      const body = cachedRes.body.startsWith('[base64]') 
        ? Buffer.from(cachedRes.body.slice(8), 'base64') 
        : cachedRes.body;

      await route.fulfill({
        status: cachedRes.status,
        headers: cachedRes.headers,
        body: body
      });
    } else {
      // 无录制记录时允许正常请求
      await route.continue();
    }
  });

  // 执行测试逻辑
  await page.goto('https://你的目标页面.com');
  // 示例断言：验证页面标题
  const pageTitle = await page.title();
  console.log('页面标题:', pageTitle);
  // 可添加更多断言逻辑

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

运行回放脚本：

node replay-network.js

注意事项 #

• 对于带动态参数的请求（如含时间戳、随机ID的URL），需要调整requestKey的生成规则，确保能匹配到对应的响应。
• 敏感数据（如token、密码）会被记录在日志中，回放前建议清理或加密。
• 部分网站会通过签名校验请求，这种情况下回放可能失败，需要额外处理请求签名逻辑。

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