如何使用Playwright记录APIRequestContext发起的所有请求与响应？

你可以通过重写request fixture并监听APIRequestContext的request和response事件，实现所有请求与响应的记录。以下是具体实现方案：

1. 扩展并覆写request fixture #

创建一个自定义fixtures文件（比如fixtures.ts），在其中扩展Playwright的test对象，重写request fixture并添加事件监听：

import { test as base } from '@playwright/test';
import * as fs from 'fs';

// 创建日志写入流（可选，也可直接输出到控制台）
const logStream = fs.createWriteStream('api-traffic.log', { flags: 'a' });

export const test = base.extend({
  request: async ({ request: originalRequest }, use) => {
    // 监听请求发送事件
    originalRequest.on('request', (req) => {
      const logEntry = `[${new Date().toISOString()}] REQUEST: ${req.method()} ${req.url()}
Headers: ${JSON.stringify(req.headers(), null, 2)}
${req.postData() ? `Body: ${req.postData()}\n` : ''}`;
      
      console.log(logEntry);
      logStream.write(logEntry + '\n');
    });

    // 监听响应接收事件
    originalRequest.on('response', async (res) => {
      let body = '';
      try {
        body = await res.text();
      } catch (e) {
        body = '[Binary/unreadable content]';
      }

      const logEntry = `[${new Date().toISOString()}] RESPONSE: ${res.status()} ${res.url()}
Headers: ${JSON.stringify(res.headers(), null, 2)}
Body: ${body}\n`;
      
      console.log(logEntry);
      logStream.write(logEntry + '\n');
    });

    // 传递修改后的request对象给测试用例
    await use(originalRequest);

    // 测试结束后关闭日志流
    await new Promise(resolve => logStream.end(resolve));
  },
});

export { expect } from '@playwright/test';

2. 在测试用例中使用自定义fixture #

在你的API测试文件中，引入自定义的test和expect，直接使用request fixture即可自动记录流量：

import { test, expect } from './fixtures';

test('获取用户数据API测试', async ({ request }) => {
  const response = await request.get('https://your-api-domain.com/users/1');
  expect(response.ok()).toBeTruthy();
  
  const userData = await response.json();
  expect(userData.id).toBe(1);
});

关键细节说明 #

• 事件监听覆盖所有请求：包括直接调用的API请求、内部重定向请求等，比单独包装get/post方法更全面。
• 日志处理灵活：示例中同时输出到控制台和写入文件，你可以根据需求调整（比如只写入文件、转换为JSON格式等）。
• 二进制内容兼容：通过try-catch处理无法转为文本的响应（如图片、压缩包），避免报错中断测试。

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