如何在Testcafe中用RequestLogger读取表单数据并提取指定字段

问题分析 #

你当前的代码直接输出整个请求体，而文件上传的请求属于multipart/form-data格式，包含大量二进制文件内容，因此需要解析请求体，仅提取目标文本字段operationName。

解决方案 #

通过解析multipart请求的边界分割内容，定位并提取目标字段，修正后的代码示例如下：

const logger = RequestLogger({ requestUrl, method: 'post' }, {
  logRequestBody: true,
  stringifyRequestBody: true, // 将multipart请求体转为字符串，方便后续解析
});

fixture(`Career Pathways`)
  .page(`${baseUrl}`)
  .requestHooks(logger);

test('upload-resume', async t => {
  await t
    .click(Selector('button'))
    // 执行触发文件上传请求的操作（如选择文件、提交表单等）
    
  // 等待请求被Logger捕获，避免出现请求未记录的情况
  await t.waitForRequest(logger);

  // 定位目标POST请求（若存在多个同类型请求，可添加更精准的URL匹配规则）
  const targetRequest = logger.requests.find(req => req.method === 'POST' && req.url.includes(requestUrl));

  if (targetRequest) {
    const requestBody = targetRequest.body;
    let operationName = '';

    // 从请求头中获取multipart的边界标识
    const contentTypeHeader = targetRequest.headers['content-type'] || targetRequest.headers['Content-Type'];
    if (contentTypeHeader) {
      const boundary = contentTypeHeader.split('boundary=')[1];
      if (boundary) {
        // 按边界标识分割请求体为各个表单部分
        const parts = requestBody.split(`--${boundary}`);
        
        // 遍历各部分，找到包含operationName字段的内容
        for (const part of parts) {
          if (part.includes('name="operationName"')) {
            // 提取字段值：跳过头部换行符，截取到下一个边界前的内容
            const valueStartIndex = part.indexOf('\r\n\r\n') + 4;
            const valueEndIndex = part.indexOf('\r\n--');
            operationName = part.substring(valueStartIndex, valueEndIndex).trim();
            break;
          }
        }
      }
    }

    // 将提取到的字段写入文件
    const fs = require('fs');
    const path = require('path');
    const logFilePath = path.join(__dirname, '/request_logs/requests.json');
    
    // 以JSON格式写入，便于后续读取和处理
    fs.writeFileSync(logFilePath, JSON.stringify({ operationName }, null, 2));
    
    // 若需要纯文本格式，可替换为：
    // fs.writeFileSync(logFilePath, `#7 Request Body: operationName = ${operationName}`);
  }
});

关键说明 #

1. 等待请求捕获：使用t.waitForRequest(logger)确保请求已被Logger记录，避免出现获取不到请求数据的情况。
2. 解析multipart请求：通过请求头中的boundary分割请求体，精准定位包含operationName的表单部分，完全避开二进制文件内容。
3. 修正原代码问题：修复了原代码中的语法错误（未闭合的括号、字符串拼接错误），同时处理了logger.requests为数组的情况，需先定位具体请求。

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