Cypress测试Angular+NG-ZORRO隐藏文件上传组件方案问询

问题原因 #

1. .selectFile()方法的限制：Cypress的.selectFile()仅支持直接作用于<input type="file">元素，你的IMPORT按钮是nz-button组件，并非文件输入控件，所以直接调用按钮的.selectFile()不会生效。
2. 隐藏元素的定位限制：你的文件输入元素被通过CSS（如display: none、visibility: hidden）或组件逻辑完全隐藏，Cypress默认会过滤掉不可见元素，因此cy.get('input[type="file"]')无法找到该元素。

解决方法 #

方法一：强制定位隐藏的文件输入元素 #

利用Cypress的{force: true}选项跳过可见性检查，直接定位隐藏的文件输入元素并执行文件选择：

// 先确保模态框已加载完成
cy.get('.your-modal-container-class').should('be.visible')
// 强制获取隐藏的file元素并上传文件
cy.get('input[type="file"]', { force: true }).selectFile('file.csv')

方法二：临时显示隐藏元素后操作 #

如果强制定位无效，可以通过修改元素CSS属性让其临时可见，再执行文件上传：

cy.get('input[type="file"]')
  .invoke('css', 'display', 'block') // 覆盖原隐藏样式
  .selectFile('file.csv')
  .invoke('css', 'display', 'none') // 可选：恢复元素原隐藏状态

方法三：模拟按钮点击后操作文件输入 #

如果上述方法都不生效，可以先触发按钮的点击事件，再直接操作隐藏的文件输入元素：

cy.get('.import-button').click()
cy.get('input[type="file"]', { force: true }).selectFile('file.csv')

注意：测试文件file.csv需放在Cypress的fixtures目录下，或使用绝对路径指定文件位置。

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