我使用 Cypress/Cucumber 不断收到 Step definiton 错误

Question

I am getting a "Step implementation missing for: I open ecommerce page" when I try to run my Cypress/Cucumber test.feature file.

I was referring to another post to help me but didn't manage to help clear up my own issue. The link for the post I used is below

Cypress.io and Cucumber.io testing integration, Step implementation missing for:

So here is what everything I have for this.

As a start here is my current file structure that I have adjusted

-cypress
  -integration
  -test
    -test.feature
    -test.js

Here is my test.feature file

Feature: End to end GFM validation



Scenario: Ecommerce products delivery
Given I open ecommerce page
When I add items to cart
And Validate the total prices
Then select the country submit and verify thank you

Here is the test.js file with the step definitions

/// <reference types="Cypress" />
import { Given,When,Then,And } from 'cypress-cucumber-preprocessor/steps'
import HomePage from "../../support/classes/HomePage"
import ProductPage from "../../support/classes/ProductPage"
import CheckOutPg from "../../support/classes/CheckOutPg"



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




Given("I open ecommerce page",()=>{
    cy.visit(Cypress.env('url')+"/angularpractice/")
})


//When using hook to load data, use non-es6 syntax for a function.....might need to check if this was updated in later releases
When('I add items to cart',function(){
    
    homePage.getShopTab().click()
    
    
    testData.productName.forEach((product)=>{
        cy.selectProduct(product)
    })


    
    productPage.getCheckoutBtn().click()


})

And('Validate the total prices',()=>{
    let sum = 0
    let total;
                                              
    checkOut.getItemPrices().each(($el,index,$list)=>{
        let price = $el.text().split(' ')[1].trim()
        sum = Number(sum) + Number(price);
    }).then(()=>{
        cy.log(sum)
        
    })
    checkOut.getTotal().then((el)=> {
        total =   el.text().split(' ')[1].trim()
        expect(Number(total)).to.eq(sum)
       })

})

Then('select the country submit and verify thank you',()=>{
    cy.get(':nth-child(6) > :nth-child(5) > .btn').click()
    cy.get('#country').type('United States')
    cy.wait(6000)
    cy.get('.suggestions > ul > li > a').click()
    cy.get('input[type="checkbox"]').check({force:true})
    cy.get('.ng-untouched > .btn').click()
    cy.get('.alert').then((el)=>{
        const text = el.text()
       expect(text.includes('Success')).to.be.true
    })
})

I added the stepDefinitions in my package.json, and set the nonGlobalStepDifitions attribute to true as per cucumber docs when the the path for stepDefinition is set to "cypress/integration" .

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

I am not sure if I presented the context well on this, so I am open to any suggestion. Other than that is anyone able to assist me to see where this might have gone wrong?

Answer 1

Cypress-cucumber-preprocessor recommends this folder structure when you set "nonGlobalStepDefinitions": true and "stepDefinitions": "cypress/integration" in package.json .

See doc here .

- cypress/
  - integration/
    - feature1.feature
    - feature1/
      - feature1.js
    - feature2.feature
    - feature2/
      - feature2.js

So:

1. Create your .feature file in cypress/integration
2. Create a folder with the same name as your .feature file, also in cypress/integration
3. Create a .js file in the newly created folder with your step definitions