使用Cypress实现文件上传自动化时出现跨域脚本错误如何解决

开发者阿泽

2026-10-6

问题根因说明

这个报错的触发逻辑是Cypress检测到被测应用自身的跨域脚本抛出了未捕获异常，不属于Cypress测试框架的问题，Cypress默认配置下遇到应用侧未捕获异常会直接标记测试失败，无法直接给出具体报错栈，需要手动排查。

分步解决方案

第一步：定位真实报错

触发测试后打开浏览器F12开发者工具的「控制台」标签，就能看到具体的错误详情，优先根据实际报错定位具体问题。

第二步：临时验证上传功能可用性

如果需要先排除异常干扰，验证上传逻辑本身是否正常，可以在测试用例中添加异常监听，临时忽略应用侧抛出的未捕获异常：

it('Single File Upload-DOM', () => {
    cy.on('uncaught:exception', (err, runnable) => {
      // 返回false即告知Cypress忽略本次异常，不中断测试
      return false
    })
    cy.visit('http://127.0.0.1:5500/Help%20Folder/fileupload.html')
    cy.get('#file-upload1').attachFile('dog_small.jpg')
    cy.get('span#fileName1').should('have.text','dog_small.jpg')
});

注意：该配置仅用于临时排查，不要长期使用，避免漏过应用的真实问题。

第三步：上传场景常见问题排查

确认已正确安装cypress-file-upload插件：attachFile是该第三方插件提供的方法，需要先执行npm install cypress-file-upload --save-dev安装，再在cypress/support/commands.js中添加import 'cypress-file-upload'完成注册。
确认测试文件存放路径：attachFile默认从cypress/fixtures目录读取文件，请确认dog_small.jpg已经放在该目录下。
跨域配置调整：如果上传请求指向跨域接口，可以在cypress.config.js中添加chromeWebSecurity: false关闭浏览器跨域安全校验，临时解决跨域脚本异常问题。