Cypress测试中上传CSV文件后数据未正常加载问题求助

数据老陈

2026-9-29

问题根因与修复方案

上传操作执行成功但内容未解析的问题，通常由编码处理错误、文件内容格式不匹配、事件触发不全三类原因导致，对应修复方案如下：

1 推荐最简修复写法

cypress-file-upload插件支持直接传入fixture文件路径，自动处理编码、MIME类型识别，避免手动读取文件带来的编码问题：

cy.get('input[type="file"]').attachFile('contentData.csv', {
  mimeType: 'text/csv',
  // 如果当前文件选择input被UI组件隐藏，补充force参数
  // force: true
})

2 手动读取fixture的修正写法

如果需要自定义处理文件内容，需要给cy.fixture指定utf8编码，避免默认返回Buffer转字符串时出现乱码、BOM头残留问题：

// 显式指定编码为utf8
cy.fixture('contentData.csv', 'utf8').then((fileContent) => {
  cy.get('input[type="file"]').attachFile({
    fileContent: fileContent,
    fileName: 'contentData.csv',
    mimeType: 'text/csv',
  });
});

3 排查验证步骤

如果修改后问题依旧，可以按以下步骤定位问题：

校验CSV文件格式：确认cypress/fixtures/contentData.csv的表头、分隔符、特殊字符转义规则符合业务组件的解析要求，无多余空行、空格

验证上传内容正确性：上传后添加断言打印校验文件内容是否符合预期

cy.get('input[type="file"]').then($input => {
  const uploadedFile = $input[0].files[0];
  const reader = new FileReader();
  reader.onload = e => {
    // 控制台打印上传内容，对比本地源文件确认是否一致
    console.log('已上传的文件内容', e.target.result)
  }
  reader.readAsText(uploadedFile)
})

补充事件触发：部分自定义上传组件需要额外触发change事件才会启动内容解析，可以在上传后补充事件触发逻辑：
```
cy.get('input[type="file"]').attachFile('contentData.csv').trigger('change', {force: true})
```