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

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 set up your files and debugged through the source code.
Where should the step files be?
Basically, in loader.js this line
const stepDefinitionsToRequire = getStepDefinitionsPaths(filePath)
.map((sdPath) => `require('${sdPath}')`);
returns an empty array with your setup.
Digging into getStepDefinitionsPaths, and ignoring common steps for the moment, this line
let nonGlobalPath = getStepDefinitionPathsFrom(filePath);
is responsible for deciding where the steps files come from (filePath is the feature file full path).
and getStepDefinitionPathsFrom.js is just
return filePath.replace(path.extname(filePath), "")
which just removes the extension from
.../cypress/integration/examples/BDD/shoppingCart.feature
to give
.../cypress/integration/examples/BDD/shoppingCart
Then on this line nonGlobalPath is turned into a glob pattern to get all files of type .js, .ts, or .tsx
const nonGlobalPattern = `${nonGlobalPath}/**/*.+(js|ts|tsx)`;
which gives
.../cypress/integration/examples/BDD/shoppingCart/**/*.+(js|ts|tsx)
Conclusion: the step files must be in a folder with the same name as the feature file (in your case cypress/integration/examples/BDD/shoppingCart/) - except if you modify the commonPath setting (see below).
The step definition files can be named anything, as long as they have the correct extension. All files in that folder get searched for step definitions.
There is no need to move files up into the integration folder.
Fix #1
Create a new folder cypress/integration/examples/BDD/shoppingCart/ and move shoppingCartStepDef.js into it.
Config setting
stepDefinitions by itself has no effect on the steps location, but clearly it should from the documentation. This looks like a bug introduced by some change.
nonGlobalStepBaseDir affects the common steps path (which contains steps used across many features, e.g login), but not the path specific to the shoppingCart feature. Again, a bug due to the above problem.
commonPath seems to work as long as it points directly to the step definitions. The glob pattern **/*.+(js|ts|tsx) usage also has a bug - the pattern omits a trailing / which means the ** part (indicating any subfolder) is ineffective (See the difference between line 28 and the preceding line 26)
Fix #2
Set the commonPath config option to the folder containing the step definitions
"commonPath": "cypress/integration/examples/BDD/"
and you tests will work.

Answer 3

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"
},

Answer 4

I think these changes will help. From your error I can tell is that the Feature file is not able to find your step definitions.
Change the name of the integration/examples to integration. Because of what I see from the cypress pre-processor plugins page, the tests are being searched under cypress/integration.
Again referring to the cypress pre-processor plugins page, the recommended way of writing a step definition file is that the steps definitions are searched from a directory with the same name as your .feature file.
So in your case, your .feature file is at cypress/integration/BDD/shoppingCart.feature. Now create a folder by the same name as the feature file inside the BDD folder cypress/integration/BDD/shoppingCart and inside that place your step definitions file there.

Answer 5

According to TheBrainFamily/cypress-cucumber-preprocessor/issues/596, use a folder matching the feature file

Answer 6

If the feature file is unable to read the .js script file then try to add the following in the package.json file.
When you define correct folder hierarchy then it will be able to detect and run the the script in the test runner of cypress. Like i have new folder with name "Drayxchange" so i added it like this below:
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"stepDefinitions": "cypress/integration/Drayxchange"
},