Cypress BDD: Cypress Cucumber processor: Cannot Run Step Definition .js file

Question

I am trying to build a cypress BDD framework. I've think I've created the feature and step definition file correctly. When I run the the test with npx cypress run --spec cypress/integration/examples/shoppingCart.feature --headed --browser chrome, I get the following result here in this video , the vid is about 20sec long.

I wasn't sure what to think so I did another video that was a process of elimination and looking at the BDD set up. I'm still unsure (this one is about 8 mins long).

I will add the feature file, step definition file and error message.

I am totally puzzled.

Error message

`1) End to End shopping cart
       User can purchase items and have them delivered to shipping address:
     Error: Step implementation missing for: I am on the Ecommerce page
      at Context.resolveAndRunStepDefinition (http://localhost:54824/__cypress/tests?p=cypress/integration/examples/shoppingCart.feature:12277:11)
      at Context.eval (http://localhost:54824/__cypress/tests?p=cypress/integration/examples/shoppingCart.feature:11603:35)
`

Feature file

Scenario: User can purchase items and have them delivered to shipping address

Given I am on the Ecommerce page
When I add the mobile handsets to the shopping cart
And I verify the total price of shopping cart
Then I select the checkout button
When I will select my shipping location
And I agree to the terms and conditions checkbox
When I select the Purchase button
Then I will see an alert stating my order was successful, plus an ETA delivery

Step Definition file

/// <reference types="Cypress" />

import { Given,When,Then,And } from "cypress-cucumber-preprocessor/steps";
import Homepage from "../../../support/pageObjects/Homepage";
import orderSummaryPage from "../../../support/pageObjects/orderSummaryPage";
import completeOrderPage from "../../../support/pageObjects/completeOrderPage";
 
const homepage = new Homepage()
const StartCheckout = new orderSummaryPage()
const CompleteOrder = new completeOrderPage()
 
Given ( 'I am on the Ecommerce page', () => {
 
    cy.visit(Cypress.env('url')+"/angularpractice/")
    
    })
 
When('I add the mobile handsets to the shopping cart',function () {
 
        homepage.getShopTab().click() 
    
        this.data.mobileHandset.forEach(function(element) {// this custom commad will add items to your cart
    
              cy.AddToCart(element)  
            }); 
    
    
    StartCheckout.getBasketCheckoutButton().click()
    
    } )//end of step 
 
And('I verify the total price of shopping cart',() => {
 
    //calculate shopping cart here
    let sum=0
       
    CompleteOrder.getProductCost().each(($e1, index, $list) =>{
    
      const unitCost=$e1.text()  
      let res= unitCost.split(" ") 
      res= res[1].trim() 
      sum=Number(sum)+Number(res)
      
    }).then(function() 
    {
      cy.log(sum)
    
    })
    
    CompleteOrder.getBasketTotalCost().then(function(element)
    {
      const shopCartTotal=element.text()  
      var res= shopCartTotal.split(" ") 
      var total= res[1].trim() 
      expect(Number(total)).to.equal(sum)
    
    })
    
    
    } )//end of step
 
Then('I select the checkout button',() => {
 
    StartCheckout.getStartCheckoutButton().click()
 
} )//end of step
 
When('I will select my shipping location',() => {
 
    CompleteOrder.getShippingCountry().type('United Kingdom')
    CompleteOrder.getShippingCountryConfirm().click()
 
} )//end of step
 
And('I agree to the terms and conditions checkbox',()=> {
 
    CompleteOrder.getTermsConditionsCheckbox().click({force: true})
 
})//end of step 
 
When('I select the Purchase button',()=> {
 
    CompleteOrder.getPurchaseButton().click()
 
})
 
Then('I will see an alert stating my order was successful, plus an ETA delivery',()=> {
 
    CompleteOrder.getPurchaseAlert().then(function(element){
 
      
        const actualText= element.text()
       expect(actualText.includes('Success')).to.be.true
    
      }) 
 
})

I'm sure I even created the BDD framework in the right place.

Update:

I was just asked about the non global step definitions in my package.json (I only copied from the 'script' section onwards).
Taking a quick look I don't even see it.

 "scripts": {
    "open": "cypress open",
    "scripts": "cypress run",
    "headTest": "cypress run --headed ",
    "chromeTest": "cypress run --browser chrome",
    "firefoxTest": "cypress run --browser firefox",
    "edgeTest": "cypress run --browser edge",
    "testDashboard": "cypress run --record --key 1642c226-ca7f-49c3-b513-da4ee9222ca8 --parallel",
    "clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports && mkdir cypress/reports/mochareports",
    "pretest": "npm run clean:reports",
    "combine-reports": "mochawesome-merge ./cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test": "npm run scripts || npm run posttest"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  },
  
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^7.4.0",
    "cypress-cucumber-preprocessor": "^4.1.3"
  },
  "dependencies": {
    "cypress-multi-reporters": "^1.5.0",
    "mocha": "^9.0.0",
    "mochawesome": "^6.2.2",
    "mochawesome-merge": "^4.2.0",
    "mochawesome-report-generator": "^5.2.0",
    "start-server-and-test": "^1.12.5"
  }
}

Answer 1

Add the stepDefinitions option to the configuration,

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true,
  "stepDefinitions": "cypress/integration/examples/BDD"
},

Answer 2

I was able to resolve this issue by doing the following:

I raised a ticket with the Developer as I noticed a NUMBER of people were all experiencing the same issue. The developer found they had a bug, fixed it and released a new version.

I had another issue after the new release and was able to fix that by:

I created a new folder under BDD called shopping cart. so it integrations/BDD/shoppingCart

Then I added the following to the package.json

 },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "stepDefinitions": "cypress/integration/BDD"
  },