Cypress 11+TypeScript下@badeball/cucumber预处理器配置及兼容旧插件方案

完全可以同时保留旧插件文件的逻辑并配置@badeball/cypress-cucumber-preprocessor，以下是具体实现步骤：

1. 补充安装依赖 #

除了你已安装的@badeball/cypress-cucumber-preprocessor，还需要安装webpack相关依赖以支持TypeScript和.feature文件处理：

npm install @cypress/webpack-preprocessor ts-loader webpack --save-dev

2. 修改cypress.config.ts配置 #

在配置文件中导入旧插件，先执行其逻辑，再配置cucumber预处理器：

import { defineConfig } from "cypress";
import { preprocessor } from "@badeball/cypress-cucumber-preprocessor";
import webpack from "@cypress/webpack-preprocessor";
// 导入旧插件文件（注意路径匹配你的实际位置）
import oldPlugins from "./cypress/plugins/index.js";

async function setupNodeEvents(on, config) {
  // 优先执行旧插件的自定义逻辑
  await oldPlugins(on, config);

  // 配置Cucumber预处理器的webpack选项
  const webpackOptions = {
    resolve: {
      extensions: [".ts", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: { loader: "ts-loader" },
        },
        {
          test: /\.feature$/,
          use: [
            {
              loader: "@badeball/cypress-cucumber-preprocessor/webpack",
              options: config,
            },
          ],
        },
      ],
    },
  };

  // 注册预处理器
  on("file:preprocessor", preprocessor(config, webpack({ webpackOptions })));

  return config;
}

export default defineConfig({
  e2e: {
    setupNodeEvents,
    // 同时支持.feature和原有.ts测试文件（按需调整）
    specPattern: ["cypress/e2e/**/*.feature", "cypress/e2e/**/*.ts"],
    // 步骤定义文件的路径（按需调整）
    stepDefinitions: "cypress/e2e/**/*.ts",
  },
});

3. 兼容旧插件的CommonJS格式 #

如果你的./cypress/plugins/index.js是CommonJS格式（比如使用module.exports），需要在tsconfig.json中开启allowJs选项，确保TypeScript能正确导入：

{
  "compilerOptions": {
    "allowJs": true,
    // 其他已有配置...
  }
}

关键注意事项 #

• 旧插件的逻辑会先执行，不会与cucumber预处理器的配置冲突
• specPattern可根据需求调整，既可以只保留.feature文件，也可以同时兼容原有TypeScript测试文件
• 确保stepDefinitions路径与你的实际步骤定义文件位置匹配，支持glob模式

内容的提问来源于stack exchange，提问作者Ivan Markov