How to Run Tests with Cypress and Cucumber in Just “10” steps

What is Cucumber?

Cucumber is a software tool that supports behavior-driven development (BDD).

What is BDD?

BDD bridges the gap between business stakeholders and the technical team through a common platform. Hence, communication among the team becomes more transparent.

Gherkin is being used as the language in which the test cases are written in a simple format and can also be read and modified by a non-technical user.

Cucumber integration with Cypress In 10 steps

Step 1: Create a folder and Generate package.json

1. Create a new folder, I called mine project cypress_cucumber
2. Type npm init (package.json) is created

Step 2: Install cypress

To install Cypress, still in the project folder, Run > npm install cypress — save-dev

Step 3: Install Cucumber

Run > npm install — save-dev cypress-cucumber-preprocessor

Step 4: Add below line under plugins -> index.js

const cucumber = require(“cypress-cucumber-preprocessor”).default;

module.exports = (on, config) => {

on(“file:preprocessor”, cucumber());

};

Step 5: Add below line in package.json

“cypress-cucumber-preprocessor”: {

“nonGlobalStepDefinitions”: true

}

Step 6: Add below line in cypress.json

{ “testFiles”: “**/*.feature” }

Step 7: Create feature and .spec file

1. Create Folder with name “Login” under integration folder
2. Create login.spec.js file under Login folder
3. Create Login. feature file under integration folder

Step 8: Enter the Below line under Login. feature file

Our feature file looks like as given below, here we take the example of the login screen for site http://automationpractice.com/

Step 9: Enter the below lines in the step definition file

Step 10: Run the test case and see commands log

Run > yarn run cypress open , Cypress test runner is open

See the result in command log , Steps (Given,When,Then) display in commands log in cypress runner

Video attached: Please see the Video for the live DEMO