如何记录TestCafe中同一URL的所有请求并获取指定调用数据？

问题分析 #

你当前代码存在两个关键问题：

1. 语法错误：测试函数的括号位置错误，导致代码逻辑执行异常
2. RequestLogger用法错误：logger.count()返回的是匹配请求的数量（数字类型），不是请求数组，所以你打印的x.length实际无效；要获取具体请求数据，应该用logger.requests数组。

解决步骤及修正代码 #

1. 修正语法错误 #

把测试函数的错误括号调整：
原错误代码：

test('the thing i am testing'), async (t) => {

修正为：

test('the thing i am testing', async (t) => {

2. 正确获取第2、3次请求数据 #

logger.requests是存储所有匹配请求的数组，数组索引从0开始，因此第2次调用对应索引1，第3次对应索引2。你需要先确保测试步骤中触发了这两次请求，再从数组中提取对应数据。

完整修正代码示例：

const myEndpointUrl = `${base}/dwr/path/myEndpoint.dwr`;
const logger = new RequestLogger(
   [myEndpointUrl],
  {
    logResponseHeaders: true,
    logResponseBody: true,
    stringifyResponseBody: true,
    logRequestBody: true,
    stringifyRequestBody: true,
    logRequestHeaders: true,
  }
);

fixture`Page I am testing`.page`${landingPage}` // 修正原代码的拼写错误：ladingPage → landingPage
  .requestHooks(logger)
  .beforeEach(async (t) => {
    await t.useRole(_authenticatedUser).navigateTo(landingPage);
  });

test('the thing i am testing', async (t) => {
  // 执行触发3次接口调用的页面操作（示例：点击按钮等）
  await t
    .click('#trigger-first-call') // 触发第一次调用
    .click('#trigger-second-call') // 触发第二次调用
    .click('#trigger-third-call'); // 触发第三次调用

  // 等待请求完成（可选，确保日志已收集）
  await t.wait(1000); // 建议优先用TestCafe内置等待（如等待元素加载）替代固定等待

  // 查看总请求数
  console.log('总请求数:', logger.requests.length);

  // 获取第2次调用的请求和响应数据
  const secondCall = logger.requests[1];
  console.log('第2次请求参数:', secondCall.request.body);
  console.log('第2次响应体:', secondCall.response.body);

  // 获取第3次调用的请求和响应数据
  const thirdCall = logger.requests[2];
  console.log('第3次请求参数:', thirdCall.request.body);
  console.log('第3次响应体:', thirdCall.response.body);

  // 你的断言逻辑示例
  await t.expect(secondCall.response.statusCode).eql(200);
});

3. 额外注意事项 #

• 确保页面操作确实触发了3次接口调用，可通过浏览器开发者工具的网络标签确认请求是否发出
• 尽量避免固定等待时间，优先使用TestCafe的内置等待机制（如等待请求完成后出现的页面元素）
• 检查拼写错误：原代码中的ladingPage应为landingPage，否则会导致页面导航失败

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