如何在Cypress中实现自动选择文件完成.txt文件上传

完全可以实现自动选文件的需求，不需要手动操作系统弹出的文件选择窗口。
Cypress运行在浏览器沙箱环境中，本身确实无法直接控制操作系统层面的原生弹窗，但我们完全可以绕过「点击按钮唤起弹窗」的步骤，直接给页面里的文件上传输入框绑定目标文件，最终触发的上传逻辑和手动选文件完全一致，稳定性还更高。

具体实现步骤 #

• 第一步：先把你要用于测试上传的txt文件，放到Cypress项目的cypress/fixtures目录下，比如命名为test-demo.txt
• 第二步：用Cypress官方原生提供的.selectFile()方法（Cypress 9.3.0及以上版本默认支持，不需要安装额外插件）直接给文件输入框挂载文件即可

注意：大部分项目会把原生的<input type="file">元素设为隐藏状态，用来实现自定义样式的上传按钮，所以选择元素时要加{ force: true }参数，跳过元素可见性校验。

参考代码如下：

// 直接定位文件上传输入框，不需要点Choose file唤起弹窗
cy.get('input[type="file"]')
  .selectFile('cypress/fixtures/test-demo.txt', { force: true })

// 文件挂载完成后，正常触发后续上传逻辑即可，比如点击提交上传的按钮
cy.get('[data-testid="upload-submit"]').click()

如果你用的是9.3以下的老版本Cypress，可以借助第三方插件实现：

1. 先安装依赖：npm install cypress-file-upload --save-dev
2. 在项目的cypress/support/commands.js文件中引入依赖：import 'cypress-file-upload'
3. 用.attachFile()方法替代.selectFile()即可，用法逻辑完全一致：

cy.get('input[type="file"]')
  .attachFile('test-demo.txt', { force: true })

不要尝试通过自动化脚本操作系统级的文件选择弹窗，这类弹窗不属于浏览器DOM的管控范围，所有前端E2E测试工具都无法稳定控制这类原生控件，直接给file输入框挂载文件是行业通用的标准实现方案，不会因为系统版本、弹窗样式变化导致用例运行失败。

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