Error: Step implementation missing for: [step_definition] when trying to run a scenario using cucumber with cypress

Question

I tried to do a simple test to try how cucumber works with cypress, but I didn't manage to solve the problem described in the title.

Bellow is my js file:

import {Given, When, Then} from "cypress-cucumber-preprocessor/steps"
 
Given('I am in the demo site',()=>{
 
    cy.visit("https://www.saucedemo.com/index.html");
 
})

here is my feature file:

Feature: Login Feature
 
Scenario: Login Validation
 
Given I am in the Swag Labs login page

Here is a screenshot with the issue

In tried a lot of things, but I didn't manage to solve this issue. Any suggestions?

Answer 1

Finally, I have identified the solution.The issue is with the folder structure and naming conventions. Below are the two main rules we need to follow

1. Folder name and Feature file name should be the same
2. Feature file and step definitions should not be in the same folder ( stepdefinations/ .js file should always be in a folder which we have created earlier).

Answer 2

Your step definition file should be

import {Given, When, Then} from "cypress-cucumber-preprocessor/steps"

Given('I am in the Swag Labs login page',()=>{

    cy.visit("https://www.saucedemo.com/index.html");

})

Answer 3

create the file .cypress-cucumber-preprocessorrc.json project directory

 {
    "nonGlobalStepDefinitions": true,
    "cucumberJson": {
        "generate": "true",
        "outputFolder": "cypress/cucumber-json",
        "filePrefix": "",
        "fileSuffix": ".cucumber"
    }
}

Answer 4

Add this in the package.json with your custom path

"cypress-cucumber-preprocessor": {
   "step_definitions": "cypress/integration/features/step_definitions/**/"
}