Cypress+Cucumber步骤执行正常但VS Code标记为Undefined求助

你遇到的情况是：Cypress集成Cucumber后，feature文件中的步骤能在Cypress运行器正常执行，但VS Code里这些步骤始终被标记为Undefined，修改cypress.config.js的多种配置都无效，且不使用IntelliJ或TypeScript，无法套用现有TS相关的解决方案。

核心原因 #

Cypress的cypress.config.js配置是给Cypress运行器使用的，而VS Code中的Cucumber插件（比如常用的Cucumber (Gherkin) Full Support）是独立工具，不会自动读取Cypress的配置，所以需要单独给VS Code的Cucumber插件指定步骤定义和feature文件的路径。

解决方案 #

1. 确保VS Code中已安装Cucumber (Gherkin) Full Support插件
2. 打开VS Code的设置文件（settings.json），添加以下配置：

{
  "cucumber.glue": ["cypress/e2e/support/step_definitions/**/*.js"],
  "cucumber.featurePaths": ["cypress/e2e/**/*.feature"]
}

3. 重启VS Code，打开feature文件，检查步骤的Undefined标记是否消失

问题背景信息 #

依赖配置 #

{
  "@badeball/cypress-cucumber-preprocessor": "^21.0.2",
  "@cypress/webpack-preprocessor": "^6.0.2",
  "@testing-library/cypress": "^10.0.2",
  "cypress": "^13.15.0",
  "globals": "^15.11.0",
  "webpack": "^5.96.1",
  "webpack-cli": "^5.1.4",
  "@bahmutov/cypress-esbuild-preprocessor": "^2.2.3"
}

cypress.config.js代码 #

const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const cucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
const esbuildPreprocessor = require("@badeball/cypress-cucumber-preprocessor/esbuild");

module.exports = {
  e2e: {
    specPattern: [
      'cypress/e2e/**/*.feature', // 定义feature文件路径
      'cypress/e2e/0-test/*.js', // 定义普通测试文件路径
      // 'cypress/e2e/support/step_definitions/**/*.js', // 定义glue路径
    ],
    stepDefinitions: 'cypress/e2e/support/step_definitions/**/*.js', // 显式指定步骤定义路径
    async setupNodeEvents(on, config) {
      await cucumberPreprocessor.addCucumberPreprocessorPlugin(on, config);
      on(
        "file:preprocessor",
        createBundler({
          plugins: [esbuildPreprocessor.createEsbuildPlugin(config)],
        })
      );
      return config;
    },
  },
};

feature文件内容 #

Feature: 示例功能

  Scenario: 示例场景
    Given 我访问首页
    Then 我应该看到欢迎消息

步骤定义代码 #

const { Given, Then } = require("@badeball/cypress-cucumber-preprocessor");

Given("我访问首页", () => {
  debugger;
  cy.visit("https://example.com");
});

Then("我应该看到欢迎消息", () => {
  cy.contains("Example Domain");
});

文件夹结构 #

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