Cypress无法识别steps.js中的步骤实现，E2E测试执行失败

问题场景 #

• 执行npx cypress open启动Cypress，仅配置E2E Testing
• 选择E2E测试启动Chrome v110后，可看到feature文件并点击
• 点击feature文件后加载失败，左侧提示Step implementation missing，无匹配Websites URL.的步骤定义
• 系统可识别feature文件和loginSteps.js，但无法识别其中的步骤定义（已确认语法正确）

排查与解决步骤 #

1. 严格匹配步骤文本

feature文件中的步骤和loginSteps.js里的定义必须完全一致，包括空格、标点、大小写：
比如feature中是Given Websites URL.，步骤定义必须写成：

Given('Websites URL.', () => {
  // 你的步骤实现代码
})

哪怕多一个空格或者少个句号，都会导致匹配失败。

2. 核对Cypress Cucumber预处理器配置

如果使用cypress-cucumber-preprocessor，重点检查以下配置：

package.json 配置项

确保添加了正确的步骤定义路径：

{
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "stepDefinitions": "cypress/e2e/**/*.js" // 路径要对应你的步骤文件所在目录
  }
}

cypress.config.js 配置

确认预处理器已正确注册：

const { defineConfig } = require('cypress')
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
const addCucumberPreprocessorPlugin = require('cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin
const createEsbuildPlugin = require('cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin

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

3. 检查步骤文件的位置与命名

• 步骤文件（如loginSteps.js）必须放在stepDefinitions配置指定的目录下，比如cypress/e2e/或其子文件夹
• 文件名不能有拼写错误，后缀必须是.js（用TypeScript则为.ts）

4. 旧版本Cypress（v9及以下）检查plugins配置

如果用的是旧版Cypress，确认plugins/index.js配置正确：

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
  return config
}

5. 清除Cypress缓存重试

执行以下命令清除缓存后重新启动Cypress：

npx cypress cache clear
npx cypress open

内容的提问来源于stack exchange，提问作者Molnár Manó