Set up Cucumber BDD Automation Framework in Cypress

This article explains setting up Cypress with BDD in detail.
Cypress version is 13.9.0, earlier there was cypress.json but now it is replace with cypress.config.js.
So, in this setup we keep configuration in config.

Pre-Requisite

1. Install NodeJS
2. Install Visual Studio Code

Step 1: Create a new folder

Navigate to the desired drive on your computer and create a new folder for Cypress (ex:bddCypress)

Step 2: Open created folder in Visual Studio Code IDE

Open Visual Code Studio
File>Open Folder>Select path of folder>Open (bddCypress)

Step 3: Create a package.json file

The package.json file helps to keep track of all node modules installed.

From your Visual Studio Code > Open Terminal

Execute below command

npm init

Once you execute the above command it asks you set of questions just answer them or Press Enter until package.json gets created.

Step 4: Install Cypress
From your Visual Studio Code > Open Terminal

Execute below command

npm install cypress --save-dev

Now the folder structure will look likes this:

Step 5: Run the command to generate configuration files.

From your Visual Studio Code > Open Terminal

Execute below command

npx cypress open

Setup Configuration

Step 6: Create folders for feature and step definitions

Inside Cypress folder, create new folder name step_definitions and you can rename e2e(ex: integration) if you want to rename it.

Step 7: Install cucumber

From your Visual Studio Code > Open Terminal

Execute below command

 npm install --save-dev cypress-cucumber-preprocessor

After complete installation of cucumber, define spec pattern in cypress.config.js and step definition in package.json

Update cypress.config.js

const { defineConfig } = require("cypress");
const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('file:preprocessor',cucumber())
      // implement node event listeners here
    },
    specPattern:'cypress/e2e/*.feature'
  },
});

Update package.json (define step definition path inside cypress-cucumber-preprocesssor)

{
  "name": "bddcypress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cypress": "^13.9.0"
  },
  "devDependencies": {
    "cypress-cucumber-preprocessor": "^4.3.1"
  },
  "cypress-cucumber-preprocessor":{
    "step_definitions":"cypress/step_definitions/"
  }

}

Step 8: Create files and implement

Now create a feature file inside e2e folder and save it with .feature

Feature: User Signup Functionality

  Scenario: User successfully signs up for an account
    Given User navigates to webpage
    Then Verify user has not already registered an account with the platform
    When the user navigates to the signup page
    And fills out the registration form with valid information
    And submits the registration form
    Then the user receives a success message indicating account creation

create steps file inside step_definitions and save it with .js

import { Given , And , Then , When} from "cypress-cucumber-preprocessor/steps";
import { faker } from '@faker-js/faker';

const randomEmail = faker.internet.email();
const randomPassword = faker.internet.password();
Given("User navigates to webpage", () => {
      cy.visit('https://parabank.parasoft.com/parabank/index.htm');
  });
  
  Given("Verify user has not already registered an account with the platform", () => {
    cy.get('[name="username"]').type(randomEmail);
    cy.get('[name="password"]').type(randomPassword);
    cy.get('input[type="submit"]').click();
    cy.get('div[id="rightPanel"] p').should('have.text','The username and password could not be verified.')
  });
  
  When("the user navigates to the signup page", () => {
    cy.contains('Register').click();
});
  
  When("fills out the registration form with valid information", () => {
    cy.get('[id="customer.firstName"]').type(faker.string.alpha(4));
    cy.get('[id="customer.lastName"]').type(faker.string.alpha(6));
    cy.get('[id="customer.address.street"]').type(faker.string.alpha(10));
    cy.get('[id="customer.address.city"]').type('Indore');
    cy.get('[id="customer.address.state"]').type('MP');
    cy.get('[id="customer.address.zipCode"]').type(faker.string.numeric(6));
    cy.get('[id="customer.phoneNumber"]').type(faker.string.numeric(10));
    cy.get('[id="customer.ssn"]').type(faker.string.numeric(15));
    cy.get('[id="customer.username"]').type(randomEmail);
    cy.get('[id="customer.password"]').type(randomPassword);
    cy.get('[id="repeatedPassword"]').type(randomPassword);
  })
  
  And("submits the registration form", () => {
    cy.get('input[value="Register"]').click();     
  });
  
  Then("the user receives a success message indicating account creation", () => {
    cy.contains('Your account was created successfully. You are now logged in.').should('be.visible');
  });