如何使用Cypress操作自定义上传按钮实现本地文件选择上传

你当前的写法行不通的核心原因有两个：

1. attachFile 方法只能作用于原生的 <input type="file"> 元素，不能作用于你封装好的业务按钮元素
2. Cypress 无法操作系统级的弹窗，触发按钮点击后弹出的Windows文件资源管理器窗口Cypress完全无法控制，会直接导致测试阻塞。

解决方案 #

• 第一步：找到页面中伴随该按钮存在的隐藏 <input type="file"> 元素。这类封装上传按钮的实现逻辑，都会默认绑定一个设置了display: none等隐藏属性的原生文件输入框，你代码里的SelectFile()方法本质就是触发这个隐藏输入框的点击事件。
• 第二步：直接对这个隐藏输入框调用attachFile方法，操作时加上{force: true}参数，绕过Cypress的可见性检查即可。

示例代码 #

const imgfile = 'Needlers76950.pdf';
// 请将input[type="file"]替换为你实际的隐藏文件输入框选择器，有id属性优先用id定位
cy.get('input[type="file"]')
  .attachFile(imgfile, { force: true });

文件上传完成后，后续的业务逻辑和手动选择文件的触发逻辑完全一致，不需要额外做其他操作。

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