Cypress从6.8.0升级至7.0.1后，POST请求携带文件时出现ERR_INVALID_ARG_TYPE错误的解决方案咨询

你的推测完全正确——问题的核心就是Cypress运行在Node.js环境中，而Axios在Node环境下不支持浏览器的File类型，这直接导致了ERR_INVALID_ARG_TYPE错误。要让函数同时兼容浏览器（应用本身）和Cypress测试环境，我们需要把File对象转换为Node.js支持的类型，这里推荐用Buffer（实现简单，且完美适配Spring Boot的MultipartFile接收逻辑）。

具体解决方案 #

1. 实现File到Buffer的转换函数 #

首先需要把浏览器的File对象先转为ArrayBuffer，再转为Node.js的Buffer类型：

async function fileToBuffer(file) {
  // 从File对象读取ArrayBuffer
  const arrayBuffer = await file.arrayBuffer();
  // 转换为Node.js的Buffer
  return Buffer.from(arrayBuffer);
}

2. 修改saveTask函数，兼容双环境 #

我们需要判断当前运行环境，在浏览器中直接使用File对象，在Node环境（Cypress）中转换为Buffer并附加必要的文件元信息：

async saveTask (task, file) { 
  const requestBody = new FormData();
  
  // 判断是否处于Node.js环境（Cypress测试时会触发）
  const isNodeEnv = typeof process !== 'undefined' && process.versions?.node;
  
  let fileToSend = file;
  if (isNodeEnv) {
    // 转换File为Buffer，并在FormData中指定文件名和MIME类型
    const fileBuffer = await fileToBuffer(file);
    requestBody.append('file', fileBuffer, {
      filename: file.name,
      contentType: file.type
    });
  } else {
    // 浏览器环境直接使用原始File对象
    requestBody.append('file', file);
  }
  
  return await http.post('/api/endpoint', requestBody, { 
    headers: { 
      'Content-Type': 'multipart/form-data' 
    } 
  }); 
}

为什么这样有效？ #

• Node环境适配：Axios在Node环境下支持Buffer类型作为请求体数据，且Cypress内置的FormData（基于form-data库）需要明确指定文件名和MIME类型，这样Spring Boot的MultipartFile才能正确识别并解析文件。
• 浏览器兼容：在浏览器环境中，我们依然使用原始的File对象，完全不影响应用本身的功能。

备选方案（大文件场景） #

如果需要处理大文件，使用Stream会更节省内存。你可以将File转换为可读流，但前提是你的测试中的File对象对应本地文件路径（比如Cypress中通过cy.fixture加载的文件）：

// 示例：使用Cypress fixture加载文件并转为Stream
const fileStream = Cypress.Blob.fileToStream(file, file.name, file.type);
requestBody.append('file', fileStream, {
  filename: file.name,
  contentType: file.type
});

不过对于大多数常规测试场景，Buffer的方案已经足够简单高效。

内容的提问来源于stack exchange，提问作者Dónal