如何用Cypress测试实现p-fileUpload组件的文件上传？

问题核心是cy.selectFile()仅能作用于原生<input type="file">元素，而你直接定位到了PrimeNG封装的<p-fileUpload>组件上，因此触发报错。

解决步骤 #

1. 定位到<p-fileUpload>组件内部的原生文件输入框
2. 对该原生input元素调用selectFile()方法

修改后的Cypress测试代码：

cy.get('[data-cy="fileUpload"]')
  .should('be.visible')
  .find('input[type="file"]') // 定位组件内部的原生文件输入框
  .selectFile('cypress/fixtures/myfile.xlsx', { force: true }); // force:true 处理元素隐藏的情况

额外注意事项 #

• 你的组件设置了accept="text/xml"，但测试使用的是.xlsx文件，这会被浏览器拦截，建议更换为符合格式的.xml测试文件，或临时移除accept属性用于测试。
• 若组件启用了multiple="true"，可通过数组传入多个文件：

  .selectFile(['cypress/fixtures/file1.xml', 'cypress/fixtures/file2.xml'], { force: true })
  

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