使用Cypress拦截请求记录网络失败后报错的解决方法

问题原因 #

直接将完整的request和response对象推入networkFails数组会触发报错，因为这两个对象内部存在循环引用的属性（比如response与request互相引用），当Cypress在测试结束时尝试序列化这些对象进行后续处理，就会出现循环引用的序列化错误。

解决方法 #

不要存储完整的request和response对象，而是提取你需要的关键信息（如请求URL、状态码、请求方法等）存入数组，从根源避免循环引用问题。

修改后的代码示例

// 在测试文件顶部或beforeEach中声明数组，确保作用域正确
let networkFails = [];

cy.intercept('*', (request) => {
  request.continue(response => {
    if (response.statusMessage !== "OK") {
      // 提取关键信息存入数组，而非完整对象
      networkFails.push({
        request: {
          url: request.url,
          method: request.method,
          headers: { ...request.headers } // 浅拷贝避免引用问题
        },
        response: {
          statusCode: response.statusCode,
          statusMessage: response.statusMessage,
          body: response.body ? { ...response.body } : null
        }
      });
    }
  });
});

可选：使用Cypress环境变量存储（规避作用域问题）

如果networkFails的作用域导致数据丢失或异常，可改用Cypress环境变量存储：

beforeEach(() => {
  // 测试前初始化空数组
  Cypress.env('networkFails', []);
});

cy.intercept('*', (request) => {
  request.continue(response => {
    if (response.statusMessage !== "OK") {
      const currentFails = Cypress.env('networkFails');
      currentFails.push({
        request: { url: request.url, method: request.method },
        response: { statusCode: response.statusCode, statusMessage: response.statusMessage }
      });
      Cypress.env('networkFails', currentFails);
    }
  });
});

// 测试结束后可取出数据处理，比如打印或写入文件
after(() => {
  console.log('网络失败请求记录:', Cypress.env('networkFails'));
});

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