Cypress文件上传测试成功但未实际上传问题求助

数据老陈

2026-8-4

解决Cypress文件上传测试成功但未实际上传的问题

嘿，我来帮你捋捋这个文件上传的问题～测试跑通了但文件没真的传上去，大概率是定位元素或者操作逻辑出了点小问题，咱们一步步来排查：

先确认你定位的是正确的文件输入元素
你当前的选择器指向的是.input-group-text，这应该是上传按钮的图标部分，而不是真正负责接收文件的<input type="file">元素。这类自定义上传组件通常会把真实的文件输入框隐藏起来，你需要找到那个隐藏的input。
打开开发者工具，在上传按钮的父元素（比如.custom-file）下找带有type="file"属性的input标签，然后用它来绑定attachFile。
检查文件路径是否正确
cypress-file-upload默认会从cypress/fixtures文件夹读取文件，所以要确保teste.pdf放在这个目录下。如果文件在其他路径，要写完整相对路径，比如'./cypress/fixtures/teste.pdf'，同时注意文件名的大小写要完全匹配。
处理隐藏的文件输入框
因为真实的input可能被设置为display: none，Cypress默认不允许操作隐藏元素，这时候需要加上{force: true}参数强制操作：
```
const filePath = 'teste.pdf'
cy.get('.custom-file input[type="file"]').attachFile(filePath, {force: true})
```
别忘了触发上传确认
有些组件在选择文件后，还需要点击“确认”或“上传”按钮才会真正提交文件。如果你的界面有这样的按钮，在attachFile之后加上点击操作：
```
cy.get('.custom-file input[type="file"]')
  .attachFile(filePath, {force: true})
  .then(() => {
    // 替换成你实际的确认按钮选择器
    cy.get('button:contains("上传")').click()
  })
```