Synpress/Cypress项目自定义命令调用报错如何解决

自定义命令不生效的核心原因是Synpress支持包的导入位置错误，触发了Synpress内部的命令注册表重置逻辑：

• Synpress作为Cypress的封装框架，在加载自身@synthetixio/synpress/support模块时，会重新初始化Cypress的命令挂载流程，覆盖该模块加载前注册的所有自定义命令
• 你当前将Synpress支持包的导入语句放在commands.js中，虽然代码顺序上是先导入Synpress再注册自定义命令，但子模块导入的执行时机和Synpress的启动流程存在冲突，注册的自定义命令不会被挂载到最终的cy实例上

按照以下步骤调整配置即可修复：

1. 调整支持文件的导入逻辑，将所有框架级支持包的导入移到cypress/support/index.js的最顶部，禁止在commands.js等子模块中导入Synpress或Cypress扩展支持包
2. 修改两个文件的内容：
   • cypress/support/index.js：

   // 必须放在第一行，优先加载Synpress核心支持
   import "@synthetixio/synpress/support";
   import "@testing-library/cypress/add-commands";
   // 最后加载自定义命令文件
   import './commands'
   

   • cypress/support/commands.js：

   // 仅保留自定义命令注册逻辑，不要导入任何框架支持包
   Cypress.Commands.add("disconnectFromDappify", () => {
     cy.disconnectMetamaskWalletFromDapp().should("be.true");
   });
   

3. 如果修改后仍报错，先清除缓存再重新运行测试：
   • 删除项目根目录下的.cache缓存文件夹
   • 执行npx synpress cache clear清除Synpress缓存
   • 重新运行测试命令即可

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