如何使用 Playwright 记录所有请求

Question

我使用剧作家的请求：APIRequestContext 夹具来实现 API 测试，我想记录所有请求/响应，但我不知道如何做。 对于页面固定装置，我可以监视网络流量并记录它们，但请求固定装置不提供任何类似的内容。

我使用扩展的剧作家/测试并覆盖/添加额外的固定装置，基于：https://playwright.dev/docs/test-fixtures#overriding-fixtures

对于记录所有流量的顶级解决方案有什么想法吗？

Answer 1

我遇到了同样的问题，想在发出 put 或 post 请求之前记录所有请求数据，并使其在 HTML 报告中可见。我所做的是定义一个代理来记录发布和放置请求所需的数据：

const globalTest = test.extend<ProjectProps>({
  request: async ({ request }, use) => {
    const requestProxy = new Proxy<APIRequestContext>(request, {
      get(target, prop: keyof APIRequestContext) {
        if (typeof prop === 'string' && ['post', 'put'].includes(prop)) {
          return async (url: string, options: Record<string, unknown>) => {
            const payload = options?.data || null;
            globalTest.step(`Request method: ${prop}, Payload: ${JSON.stringify(payload)}`, () => {});
            return await target[prop](url, options);
          };
        }
        return target[prop];
      },
    });

    await use(requestProxy);
  },
});

我使用了一个空的

test.step

来使有效负载在 HTML 报告中可见，您可以将其替换为您拥有的任何日志记录逻辑。另外，对于响应，您可以将响应存储在调用的变量中，而不是像我的情况一样返回它并记录它。

您将在报告中看到的一个变化是请求上下文方法的所有步骤都将使用

proxy.{method}

而不是

apiRequestContext.{method}

，但这对我来说不是问题。

Answer 2

您可以使用

request.on('response')

事件来记录响应：

const request = context.request({
  url: 'https://example.com',
  method: 'GET',
});

request.on('response', (response) => {
  console.log(response.status());
  console.log(response.headers());
  console.log(response.body());
});

await request.send();