cypress-cucumber-preprocessor: Error: Step implementation missing for: {stepName}

Hello,

I am trying to implement Cucumber framework to my previously written cases while following a Cypress course. When I execute my feature file, I get an error below.

Running: examples/BDD/ecommerce/ecommerce.feature (1 of 1)

End2End E-Commerce Validation 1) E-Commerce Products Delivery

0 passing (1s) 1 failing

  1) End2End E-Commerce Validation
       E-Commerce Products Delivery:
     Error: Step implementation missing for: I open e-commerce page
      at Context.resolveAndRunStepDefinition (http://localhost:59873/__cypress/tests?p=cypress/integration/examples/BDD/ecommerce/ecommerce.feature:13435:11)
      at Context.eval (http://localhost:59873/__cypress/tests?p=cypress/integration/examples/BDD/ecommerce/ecommerce.feature:12773:35)

My ecommer.feature file :

Feature: End2End E-Commerce Validation



    application Regression

    Scenario: E-Commerce Products Delivery
        Given I open e-commerce page
        When I add items to cart
        And Validate the total prices
        Then select the country submit and verify message

My eCommStepDef.js file:

import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps"
import HomePage from '../../../../support/pageObjects/HomePage'
import ProductPage from '../../../../support/pageObjects/ProductPage'

const homePage = new HomePage()
const productPage = new ProductPage()

Given('I open e-commerce page', function () {

    cy.visit(Cypress.env('url') + '/angularpractice')


})

When('I add items to cart', function () {


    homePage.getShopTab().click()


    this.data.productNames.forEach(function (element) {
        cy.addProductByName(element)
    });

    productPage.getCheckoutButton().click()


})

And('Validate the total prices', () => {

    cy.get('tr td:nth-child(4) strong').each(($el, index, $list) => {


        const amount = $el.text()
        var res = amount.split(" ")
        res = res[1].trim()
        sum = Number(sum) + Number(res)

    }).then(function () {
        cy.log(sum)
    })
    cy.get('h3 strong').then(function (element) {
        const amount = element.text()
        var res = amount.split(" ")
        var total = res[1].trim()
        expect(Number(total)).to.equal(sum)

    })

})


Then('select the country submit and verify message', () => {

    cy.contains('Checkout').click()
    cy.get('#country').type('Turkey')
    Cypress.config('defaultCommandTimeout', 15000)
    cy.get('.suggestions > ul > li > a').click()
    cy.get('#checkbox2').check({ force: true })
    cy.get('input[type="submit"]').click()
    cy.get('.alert.alert-success.alert-dismissible').then(function (element) {

        const actualText = element.text()

        expect(actualText.includes("Success")).to.be.true

    }


    )


})

My package.json file:

{
  "name": "cypress-training",
  "version": "1.0.0",
  "description": "Cypress Training",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "cy:run": "cypress run"
  },
  "author": "Kerem Sezen",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^4.3.0",
    "cypress-cucumber-preprocessor": "^4.0.0",
    "cypress-iframe": "^1.0.1",
    "mocha": "^5.2.0",
    "mochawesome": "^6.2.1",
    "mochawesome-merge": "^4.2.0"
  },
  "dependencies": {
    "@types/core-js": "^2.5.4",
    "@types/jasmine": "^3.6.2"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }
}

My cypress.json file:

{
    "defaultCommandTimeout": 10000,
    "env": {
        "url": "https://www.rahulshettyacademy.com/"
    },
    "projectId": "ax1shi",
    "reporter": "mochawesome",
    "reporterOptions": {
        "overwrite": true,
        "html": true,
        "json": true
    },
    "testFiles": "**/*.feature"
}

My plugins/index.js file:

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

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

The error:

node_modules/cypress-cucumber-preprocessor/lib/resolveStepDefinition.js:195:1

Error: Step implementation missing for: I open e-commerce page at Context.resolveAndRunStepDefinition (http://localhost:60346/__cypress/tests?p=cypress/integration/examples/BDD/ecommerce/ecommerce.feature:13435:11) at Context.eval (http://localhost:60346/__cypress/tests?p=cypress/integration/examples/BDD/ecommerce/ecommerce.feature:12773:35) From previous event: at Context.thenFn (http://localhost:60346/__cypress/runner/cypress_runner.js:155133:23) at Context.then (http://localhost:60346/__cypress/runner/cypress_runner.js:155572:21) at Context.<anonymous> (http://localhost:60346/__cypress/runner/cypress_runner.js:169999:21) at http://localhost:60346/__cypress/runner/cypress_runner.js:169423:15 From previous event: at runCommand (http://localhost:60346/__cypress/runner/cypress_runner.js:169402:8)

Test code to reproduce

Versions

• Cypress version: 4.3.0
• Preprocessor version: 4.0.0
• Node version: 12.14.1