Unable to run Step Definition.js file

[fypnlp]

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. I don't know what to post so I will post everything. If you want to remove anything let me know.

Error message

Current behavior

`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)
`

Desired behavior

My desired behaviour would be to run the end to end test scenario as expected. I followed the installation as per the tech documentation.

Test code to reproduce

Feature file

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 using page object model

/// <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
    
      }) 
 
})

Versions

• Cypress version: 7.4.0
• Preprocessor version: Mac Big Sur 11.4
• Node version: 14.17.1

[fypnlp]

Also my feature file and the step definition file are in the SAME folder

[lgandecki]

🎉 This issue has been resolved in version 4.1.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[fypnlp]

Dude thanks for the speedy fix. Much appreciated.