使用Cypress上传PDF文件失效，如何正确实现PDF文件上传功能？

首先确认PDF文件form.pdf已经存放在你项目的cypress/fixtures目录下，再按以下代码调整：

// 直接定位隐藏的原生文件输入框，不要选外层的div按钮
cy.get('input[type="file"]')
  .attachFile('form.pdf', {
    force: true
  })
// 添加上传接口断言，确认实际请求成功
cy.intercept('POST', '/你的实际上传接口路径').as('upload')
cy.wait('@upload').its('response.statusCode').should('eq', 200)

调整说明 #

• 修正元素选择逻辑：attachFile方法必须绑定到原生<input type="file">节点，你之前选择外层div.button会导致文件数据没有注入到实际的上传字段，前端仅触发了选文件后的交互提示，没有携带数据发起上传请求。
• 简化不必要的参数配置：cypress-file-upload插件会自动识别PDF文件的mimeType和编码格式，手动指定base64编码容易出现编码不匹配，导致后端接收的文件数据损坏。
• 添加上传结果校验：很多前端上传组件会在用户选完文件后立刻提示「上传成功」，但实际异步上传请求还在处理中，添加接口拦截断言可以确认后端确实接收并处理了文件。

如果你的上传组件是自定义封装的，触发上传需要额外点击确认按钮，在上述代码后补充对应点击逻辑即可：

cy.get('div.button').click()

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