Cucumber Integration with in 5 Minutes

In this article we are going to see how we can use Cypress and Cucumber for effective BDD style test automation.

Step – 1: First thing first, create a folder: cypress-bdd-example

Step – 2: Open Terminal and navigate to the folder. Time to install Cypress in that folder. So, run the below command –

npm install cypress

Step – 3: In order to combine Cypress with Cucumber, we need to pull a package, cypress-cucumber-preprocessor

npm install cypress-cucumber-preprocessor

Step – 4: Once these two packages are installed, lets now lets call the cucumber-preprocessor in the index.js file

const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
  on('file:preprocessor', cucumber())

Step – 5: Lets bind the step definitions by adding the below command in packages.json file

"cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true

Step – 6: The features and the step definitions hierarchy is a bit different from other languages. The step definitions file should be located inside a folder and the best practice is to have the folder name, feature file name and the step definitions file name as one and the same.

Folder Structure for

Step – 7: In this article we will use Swag Labs ( website.

Let’s create a feature file with a scenario in it. Create a feature file named – login.feature

Feature: Login Feature

As a valid customer
In order to purchase items
I want to login successfully to Swag Labs

Scenario: Login Validation

Given I am in the Swag Labs login page
When I enter valid credentials
Then I should be able to login successfully

Step – 8: Now, let’s create a step definitions class under login folder – login.js.

Please note, you need to import {Given, When, Then} from cypress-cucumber-preprocessor/steps package

import {Given, When, Then} from "cypress-cucumber-preprocessor/steps"

So, our Step Definitions class would look like –

import {Given, When, Then} from "cypress-cucumber-preprocessor/steps"

Given('I am in the demo site',()=>{



When('I enter valid credentials',()=>{


Then('I should be able to login successfully',()=>{

    cy.get('.bm-burger-button > button').click();


Step -9: Bingo! We just successfully wrote a simple BDD fashioned test using Now, its time to launch the Test Runner and execute the tests. As usual, execute the below command to invoke Test Runner

cypress-bdd-example giridhar$ npx cypress open
Test Runner containing the Feature Files

Let’s see it in action –

Execution of Sample BDD – Fashioned Tests


You can get the code base for this article from GitHub

3 thoughts on “Cucumber Integration with in 5 Minutes

Add yours

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Powered by

Up ↑

%d bloggers like this: