CodeceptJS中Playwright网络流量记录方法重复调用问题解析

问题背景

在使用CodeceptJS结合Playwright进行自动化测试时，开发人员发现当连续两次调用grabRecordedNetworkTraffics方法时，会出现"request.response.then is not a function"的错误。这个问题影响了测试流程中对网络请求的监控和分析能力。

问题本质分析

该问题的核心在于grabRecordedNetworkTraffic方法的实现存在两个关键缺陷：

1. 异步处理不当：在map函数内部使用了await但没有正确处理异步流程，导致Promise链断裂
2. 对象污染：第一次调用后修改了request.response对象，使其从原始Playwright响应对象变成了自定义对象，导致第二次调用时无法正常操作

技术细节剖析

原始代码的问题

原始实现中，方法通过遍历所有记录的请求，对每个请求做以下操作：

• 等待获取响应对象
• 尝试解析响应体、状态码和状态文本
• 将响应对象替换为自定义格式的对象

这种实现方式存在严重问题，因为：

1. 替换后的response对象丢失了原始Playwright响应对象的所有方法和属性
2. 没有返回任何值给map函数，导致Promise.all无法正确收集结果

正确的实现思路

正确的实现应该：

1. 保持原始响应对象的完整性
2. 创建新的数据结构来存储提取的信息
3. 确保所有异步操作都正确等待

解决方案

以下是改进后的实现建议：

async grabRecordedNetworkTraffics() {
  if (!this.recording || !this.recordedAtLeastOnce) {
    throw new Error('必须先调用startRecordingTraffic方法');
  }
  
  const requests = await this.requests;
  const processedRequests = [];
  
  for (const request of requests) {
    try {
      const response = await request.response;
      let processedRequest = {
        url: request.url(),
        method: request.method(),
        headers: request.headers(),
        postData: request.postData(),
        response: null
      };
      
      if (response) {
        try {
          processedRequest.response = {
            status: response.status(),
            statusText: response.statusText(),
            body: await response.body().then(buf => buf.toString())
          };
        } catch (e) {
          processedRequest.response = {
            error: '无法解析响应'
          };
        }
      }
      
      processedRequests.push(processedRequest);
    } catch (error) {
      processedRequests.push({
        url: request.url(),
        error: error.message
      });
    }
  }
  
  return processedRequests;
}

最佳实践建议

1. 避免修改原始对象：始终保持Playwright提供的原始对象不变，创建新的数据结构来存储处理后的数据
2. 使用for循环替代map：在处理多个异步操作时，for循环通常比map+Promise.all更易读且更不容易出错
3. 完善的错误处理：为每个可能失败的步骤添加错误处理，确保单个请求失败不会中断整个流程
4. 保持方法幂等性：确保方法可以安全地多次调用而不产生副作用

总结

在CodeceptJS中使用Playwright记录网络流量时，正确处理异步操作和对象引用是关键。通过创建新的数据结构而非修改原始对象，可以避免这类问题。开发者应当注意保持方法的幂等性，确保测试代码的可靠性和可维护性。