使用cypress-cucumber-preprocessor遇‘Step implementation missing’问题（Cypress 13.1.0）

环境信息 #

• Cypress版本：13.1.0
• cypress-cucumber-preprocessor版本：4.3.1
• 安装命令：npm install --save-dev cypress-cucumber-preprocessor

相关文件代码 #

cypress.config.js #

const cucumber = require('cypress-cucumber-preprocessor').default
const { defineConfig } = require("cypress")

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
      on('file:preprocessor', cucumber())
    },
    specPattern: "cypress/e2e/*.feature",
  },
});

package.json #

{
  "name": "cypress_cucumber_bdd",
  "version": "2.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "cypress open"
  },
  "author": "sudeep mahato",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^13.1.0",
    "cypress-iframe": "^1.0.1"
  },
  "chromeWebSecurity": false,
  "dependencies": {
    "axios": "^1.5.0",
    "cypress-cucumber-preprocessor": "^4.3.1"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "step-definations": "cypress/e2e/hubspot",
    "cucumberJson": {
      "generate": "true",
      "outputFolder": "cypress/cucumber-json",
      "filePrefix": "",
      "fileSuffix": ".cucumber"
  }
  }
}

hubspot.feature #

Feature: Hubspot user interaction

want to see the demo

    Scenario: User should be able to browse the application
    Given context
    When event
    Then outcome

hubspotSteps.js #

import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps";
            
Given("context", ()=>{
    cy.visit('https://www.hubspot.com');
});
            
When("event", ()=>{
    cy.get('#hs-eu-confirmation-button').click();
});
            
Then("outcome", ()=>{
    cy.get('.hsg-nav__link').eq(3).click();
});

问题 #

运行测试时出现**“Step implementation missing”**错误，无法关联feature步骤与实现代码。

解决方案 #

1. 修复配置项拼写错误 #

package.json中cypress-cucumber-preprocessor配置里的step-definations是拼写错误，正确键名为stepDefinitions（注意是Definitions而非definations）。修改后配置如下：

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": false,
  "stepDefinitions": "cypress/e2e/hubspot",
  "cucumberJson": {
    "generate": "true",
    "outputFolder": "cypress/cucumber-json",
    "filePrefix": "",
    "fileSuffix": ".cucumber"
  }
}

2. 验证文件路径与命名 #

• 确认hubspotSteps.js确实存放在cypress/e2e/hubspot目录下
• 步骤定义文件支持*.steps.js或任意.js命名，只要配置的路径能覆盖到该文件即可

3. 优化Cypress配置的预处理器注册 #

在setupNodeEvents中显式传递cucumber配置，确保Cypress能正确读取规则：

const cucumber = require('cypress-cucumber-preprocessor').default
const { defineConfig } = require("cypress")
const packageJson = require('./package.json')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      const cucumberConfig = packageJson['cypress-cucumber-preprocessor']
      on('file:preprocessor', cucumber(cucumberConfig))
    },
    specPattern: "cypress/e2e/*.feature",
  },
});

4. 清除缓存并重启Cypress #

• 关闭当前Cypress窗口
• 删除node_modules/.cache目录
• 重新执行npm run test启动Cypress

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