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

Let’s Play with Cypress Feature “Test Replay”

Problem Statement Before Cypress v13, test failures in CI have historically been captured through screenshots, videos, and stack trace outputs, b
Read More

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More