Cypress10+如何在cypress.config.js中添加cypress-plugin-tab

cypress-plugin-tab 最后一次更新早于Cypress 10.0.0正式发布，官方文档没有跟进新版Cypress的配置规则，给出的「在cypress/support/index.js中引入插件」的指引完全不适配10.0.0之后的版本——Cypress 10+重构了整个配置体系，废弃了原有的index.js支持文件入口，插件注册逻辑、全局命令扩展的加载路径都做了调整。

• 先完成插件安装，在项目根目录执行命令：

  npm i cypress-plugin-tab -D
  

• 打开对应测试类型的支持文件入口：
  • 做E2E测试时打开cypress/support/e2e.js
  • 做组件测试时打开cypress/support/component.js
    在文件最顶部添加引入语句：

  require('cypress-plugin-tab')
  

• 不需要修改cypress.config.js中的setupNodeEvents配置：这个插件的核心是扩展浏览器端的cy自定义命令，不属于Node端事件类插件，不需要在Node侧钩子做注册。
• 完全关闭并重启Cypress运行器，即可在测试用例中正常调用cy.tab()方法。

• 如果出现cy.tab is not a function报错：优先检查引入语句是否写在了当前测试类型对应的support文件中，是否重启了Cypress运行器
• 如果出现模块找不到报错：删除node_modules和锁文件后重新执行npm install安装依赖即可
• 不要把插件引入语句写在cypress.config.js文件内，配置文件运行在Node环境，无法加载面向浏览器端的自定义命令扩展，会直接抛出环境错误。

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