QA Automation Labs

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


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
Folder Structure

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

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts


Mocking API Response In Cypress

What is Mocking ? Mocking, in a broader software development and testing context, is a technique used to simulate the behavior of certain components o
Read More

Cypress 13 Integration With BDD/Cucumber & POM

Problem Statement After Cypress version 10, there are some changes needed to integrate Cucumber/BDD with Cypress effectively. In this blog post, we wi
Read More

Running End-to-End Cypress Test cases in a Google Cloud Pipeline

Cypress is an end-to-end testing framework that is used to test web applications. It is an open-source JavaScript-based framework that enables de
Read More