使用cy.origin()时cypress-file-upload插件报attachFile不是函数错误

问题原因 #

cy.origin()会创建独立的跨域测试上下文，主测试上下文（cypress/support/commands.js）中导入的cypress-file-upload插件命令，不会自动同步到这个新上下文，因此会触发cy.get(...).attachFile is not a function错误。

解决方案 #

在cy.origin()的回调函数内部，手动导入cypress-file-upload插件，确保跨域上下文能识别attachFile命令：

cy.origin('你的目标域名', () => {
  // 在跨域上下文内导入插件
  import 'cypress-file-upload';

  // 执行文件上传操作
  cy.get('input[type="file"]').attachFile('测试文件路径');
});

补充说明 #

• 若项目使用CommonJS模块规范，可替换为require('cypress-file-upload')
• 需在多个cy.origin()场景复用的话，可封装导入逻辑：

const setupFileUpload = () => {
  import 'cypress-file-upload';
};

// 调用示例
cy.origin('域名A', () => {
  setupFileUpload();
  cy.get('#file-input').attachFile('fileA.jpg');
});

cy.origin('域名B', () => {
  setupFileUpload();
  cy.get('.upload-btn').attachFile('fileB.pdf');
});

已验证的前置操作确认 #

你完成的以下操作无需改动：

• 通过npm install cypress-file-upload安装插件
• 在cypress/support/commands.js中导入import 'cypress-file-upload'
• 非跨域场景下attachFile()可正常运行

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