Cypress 10及以上版本集成Cucumber方法及loader问题咨询

标准集成步骤 #

• 安装适配10+版本的正确依赖，注意不要使用已停止维护的旧版cypress-cucumber-preprocessor，执行以下命令安装兼容包：

npm install @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor -D

• 修改Cypress 10+版本的核心配置文件cypress.config.js（TS项目对应.ts后缀文件），废弃9.x版本在cypress.json写配置的逻辑，参考以下配置注册预处理器：

const { defineConfig } = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const { addCucumberPlugin, createEsbuildPlugin } = require("@badeball/cypress-cucumber-preprocessor/esbuild");

module.exports = defineConfig({
  e2e: {
    async setupNodeEvents(on, config) {
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      });
      on("file:preprocessor", bundler);
      await addCucumberPlugin(on, config);
      return config;
    },
    specPattern: "cypress/e2e/**/*.feature",
  },
});

• 在项目package.json中添加Cucumber配置，指定步骤定义文件的扫描路径：

{
  "cypress-cucumber-preprocessor": {
    "stepDefinitions": "cypress/support/step_definitions/**/*.js",
    "nonGlobalStepDefinitions": false
  }
}

• 按目录规范编写.feature用例和对应步骤定义代码，重启Cypress即可识别运行。

loader异常针对性修复 #

9.x版本默认内置webpack预处理器及对应Cucumber loader规则，10+版本重构了预处理器逻辑，配置错误、依赖不兼容都会触发loader类异常，按以下顺序排查修复：

• 完全卸载残留的旧版不兼容包：执行npm uninstall cypress-cucumber-preprocessor -D，新旧包同时存在会直接触发loader调用冲突。
• 不要直接照搬9.x版本的webpack loader配置，使用esbuild预处理器方案时不需要额外配置babel-loader、ts-loader等多余规则，重复的编译规则会打断Cucumber文件的编译流程。
• 如果项目必须使用自定义webpack预处理器，不要引用旧包的loader路径，替换为新版插件提供的webpack loader，对应规则配置如下：

{
  test: /\.feature$/,
  use: [{
    loader: "@badeball/cypress-cucumber-preprocessor/webpack",
    options: config
  }]
}

• 执行npm ci重装全量依赖，修复因依赖半安装、文件权限问题导致的loader加载失败问题。
• 使用Cypress 12/13等更高版本时，将@badeball/cypress-cucumber-preprocessor升级到最新发布版本，旧版插件未适配Cypress大版本的API变动，也会抛出loader初始化错误。

内容的提问来源于stack exchange，提问作者manish tiwari