Cypress如何上传png、csv、docx文件？上传无响应是什么原因？

常见原因及修复方法 #

• 定位元素错误
  绝大多数无响应的问题都是因为定位器指向了前端封装的上传按钮、外层div等元素，没有指向真正的原生input[type="file"]元素。该元素通常会被前端设置为隐藏，定位到正确元素后需添加{force: true}参数强制操作：

  cy.get('input[type="file"]').attachFile({
      fileContent,
      fileName: 'csvfile.csv',
      mimeType: 'text/csv'
  }, {force: true})
  

• MIME type配置错误
  csv格式的标准MIME type为text/csv，你当前使用的application/csv属于非标准配置，会导致解析失败。三类文件的正确MIME type参考：
  • csv：text/csv
  • png：image/png
  • docx：application/vnd.openxmlformats-officedocument.wordprocessingml.document
• fixture读取编码错误
  非纯文本类文件读取fixture时必须指定对应编码，否则内容会被错误解析，推荐所有类型文件都指定base64编码：

  cy.fixture('myfiles/csvfile.csv', 'base64').then(fileContent => {
      cy.get('input[type="file"]').attachFile({
          fileContent,
          fileName: 'csvfile.csv',
          mimeType: 'text/csv',
          encoding: 'base64'
      }, {force: true})
  })
  

• 第三方依赖兼容问题
  如果你使用的Cypress版本≥9.3，无需额外安装cypress-file-upload第三方插件，可以直接用Cypress内置的selectFile命令完成上传，兼容性更强：

  // 单文件上传示例，自动识别文件类型
  cy.get('input[type="file"]').selectFile('cypress/fixtures/myfiles/csvfile.csv', {force: true})
  

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