Cypress文件上传测试显示成功但实际未上传问题如何解决

问题原因 #

• 该网站使用自定义封装的上传组件，原生<input type="file">默认是隐藏状态，你直接通过attachFile给隐藏的input赋值后，没有触发组件监听的change/input自定义事件，页面上层UI不会同步更新上传状态，因此出现Cypress判定文件已挂载、但页面无上传显示的差异。
• 代码中先点击#fileUploadButton触发了系统级文件选择弹窗，Cypress无法操作系统原生弹窗，这一步操作会导致页面交互状态异常，后续对input元素的赋值无法被页面逻辑捕获。
• 未等待文件上传状态同步完成就直接点击提交按钮，操作时序存在问题。

解决方法 #

• 跳过点击上传按钮弹出系统弹窗的步骤，直接操作隐藏的原生file输入框，操作时添加force: true参数绕过Cypress的可见性检查。
• 上传文件后主动触发input元素的change事件，通知自定义组件更新状态。
• 添加上传状态断言，等待页面识别到文件、上传队列更新完成后再点击提交按钮。

修正后的代码 #

describe ('Upload Test' , function(){
    it('Upload Test' , function(){
        cy.visit('https://document.online-convert.com/convert/csv-to-excel')
        const catalogue ='../integration/Example.csv';
        // 直接操作隐藏的file input，跳过弹窗步骤，强制操作隐藏元素
        cy.get('#file').attachFile(catalogue, { force: true })
        // 主动触发change事件通知页面组件
        cy.get('#file').trigger('change', { force: true })
        // 等待页面上传队列加载完成，确认文件已被页面识别
        cy.contains('Example.csv', { timeout: 10000 }).should('be.visible')
        // 再点击提交按钮
        cy.get('#multifile-submit-button-main').click()
    })
})

内容的提问来源于stack exchange，提问作者Yazan Abu Hussein