升级Cypress 10后使用Cucumber运行场景遇步骤实现缺失错误求助

以下是针对该错误的逐一排查和修复方案：

1. 确认Cucumber配置路径与插件版本 #

Cypress 10改用cypress.config.js（或.ts）作为核心配置文件，旧版cypress.json已废弃。需确保配置中正确关联feature文件路径，并使用适配Cypress 10的Cucumber插件：

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

module.exports = defineConfig({
  e2e: {
    specPattern: "cypress/e2e/**/*.feature", // 匹配你的feature文件实际路径
    async setupNodeEvents(on, config) {
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      });
      on("file:preprocessor", bundler);
      await addCucumberPreprocessorPlugin(on, config);
      return config;
    },
  },
});

注意：必须使用@badeball/cypress-cucumber-preprocessor（旧版cypress-cucumber-preprocessor已停止维护，不兼容Cypress 10）。

2. 检查步骤定义文件的规范 #

• 路径与命名：步骤定义文件需放在Cypress可扫描到的目录下（如cypress/e2e/step_definitions），若自定义路径，需在配置中额外声明。
• 导出方式：步骤必须通过Given/When/Then等关键字正确导出，示例：

import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";

Given("我访问系统首页", () => {
  cy.visit("/");
});

若使用ES模块，需确保package.json中添加"type": "module"，或配置文件改用.cjs后缀。

3. 校验Feature与步骤定义的文本匹配度 #

• 确保feature文件中的步骤文本与代码定义完全一致，包括空格、标点、参数占位符。例如feature中写：

Given 我输入用户名"admin"

对应代码需写成：

Given("我输入用户名{string}", (username) => {
  cy.get("#username").type(username);
});

• 避免因编码问题导致的文本不匹配，将feature文件保存为UTF-8格式。

4. 核对package.json依赖与脚本 #

• 确认依赖版本适配：

{
  "devDependencies": {
    "cypress": "^10.0.0",
    "@badeball/cypress-cucumber-preprocessor": "^12.0.0",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.0.0",
    "esbuild": "^0.15.0"
  }
}

• 运行脚本需使用Cypress 10的标准命令：

"scripts": {
  "cypress:open": "cypress open",
  "cypress:run": "cypress run"
}

5. 清理缓存并重启Cypress #

执行npx cypress cache clear清理缓存，然后关闭Cypress重新启动，缓存残留可能导致步骤定义无法被识别。

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