Cucumber integration with Cypress

We all know that Cypress itself provides its framework with well versed folder structure. But still there are requirements for the user-friendly neatly written test cases which are easy to understand even for a non-technical person.
Cucumber is widely used tool which supports and helps in Behavior Driven Development (BDD) using Gherkin language. Cypress uses all the capabilities of Cucumber by using the Cucumber-preprocessor node module.

Prerequisite in the system-

Node.js must be installed to use NPM commands.(to check if it is installed use command node -version). You can directly download from https://nodejs.org/en/download/ .

Visual Studio code editor. You can directly download from https://code.visualstudio.com/download.

Installation and integration with Cucumber-

Let’s understand step by step from basic how to integrate Cucumber with Cypress-

Step 1- Create a new folder in your directory. (For ex- cyCucumber).

Step 2- Open VS code and open recently created folder.(here it is cyCucumber).

Step 3- Open terminal from VS code present at header menu like-

Step 3- Run command npm init in the terminal. This will create package.json folder.

Step 4- Install cypress by running command npm install cypress –save-dev

Note — This will create cypress latest version(currently it is 12.16.0).

Step 5- Install the Cucumber plugin by running command npm install — save-dev cypress-cucumber-preprocessor

Step 6- After all installation, run command npx cypress open. This will create the required folder structure.(If using cypress version 10 and above and if you are using cypress version below 10 then folder structure would have already been created. Recommendation is to use latest version).

Step 7- Now open cypress.config.js and set path for feature file-

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

Step 8- Open package.json and set path for step_definitions as-

"cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "step_definitions": "cypress/e2e/step_Definitions/"
  },

Step 9- Create folders ‘features’ and ‘step_Definitions’ inside e2e folder and folder structure will look like -

Step 9- Create feature file inside Features folder and add the test script like-

Feature: Smoke suite for practice
Scenario: Validate the landing page
Given I navigate to https://automationexercise.com/
And I should see text AutomationExercise
When I click tab CONTACT US
Then I should see text Feedback For Us

Step 10- Create one folder say ‘Common’ and created file Common.steps.js inside this like-

import {Given, When, Then} from "cypress-cucumber-preprocessor/steps";
import {common} from "./common";
const commonComp = new common();
Given(/^I navigate to (.*)$/,(URL)=>{
commonComp.openURL(URL);
})
Then(/^I should see text (.*)$/, (text)=>{
commonComp.validateText(text);
})
When(/^I click on (.*$)/, (link)=>{
commonComp.clickOnLink(link);
})
When(/^I click tab (.*$)/, (tab)=>{
commonComp.clickOnHeaderTab(tab);
})

Note- inside this you can keep all the common steps which is required in all pages.

Step 11- Create ‘Common.js file’ inside same ‘Common’ folder for the common steps implementation like-

export class common{
    locators= {
       "CONTACT US":"//a[contains(text(),'Contact us')]"
   }
    openURL=(URL)=>{
       return cy.visit(URL);
   };
   validateText(text){
       cy.contains(text).should('be.visible');
   }
   clickOnLink(link){
       cy.contains(link).click();
   }
   clickOnHeaderTab(tab){
       cy.xpath(this.locators[tab]).click();
   }
}

Note — to user xpath, run command npm i cypress-xpath

And add — require (‘cypress-xpath’) in Support >>e2e.js file.

Now you are all set to run your feature file. Use any of these commands to open the cypress runner.

npm run cypress open or npx cypress open

This complete installation and integration guide is recommended for the cypress version 10.0.0 or above.

Please provide your feedback if it helps OR if finding some difficulties.