Introduction

Combining Cypress with Cucumber allows for expressive and readable test cases. Cypress is a robust, fast, and easy-to-use end-to-end testing framework, while Cucumber enables writing tests in a natural language style. This guide will walk you through setting up Cypress with Cucumber, ensuring a smooth integration for your testing needs.

Prerequisites

Before you start, make sure you have the following installed:

• Node.js (>=12.0.0)
• npm (>=6.0.0) or yarn

Step 1: Initialize Your Project

First, create a new directory for your project and navigate into it:

mkdir cypress-cucumber-project
cd cypress-cucumber-project

Initialize a new npm project:

npm init -y

Step 2: Install Cypress

Install Cypress as a dev dependency:

npm install cypress --save-dev

Open Cypress for the first time to generate the necessary folders and files:

npx cypress open

Step 3: Install Cucumber Preprocessor

To use Cucumber with Cypress, we need the cypress-cucumber-preprocessor plugin. Install it along with @badeball/cypress-cucumber-preprocessor and its dependencies:

npm install @badeball/cypress-cucumber-preprocessor --save-dev

Step 4: Configure Cypress for Cucumber

4.1: Update cypress.config.js

Create or update cypress.config.js to configure the Cucumber preprocessor:

const { defineConfig } = require('cypress');
const preprocessor = require('@badeball/cypress-cucumber-preprocessor');

module.exports = defineConfig({
  e2e: {
    async setupNodeEvents(on, config) {
      await preprocessor.addCucumberPreprocessorPlugin(on, config);

      on('file:preprocessor', preprocessor.createEsbuildPlugin(config));
      return config;
    },
    specPattern: 'cypress/e2e/**/*.feature',
    supportFile: false
  }
});

4.2: Update package.json

Add the following script to your package.json to run Cypress tests with Cucumber:

"scripts": {
  "cypress:open": "cypress open",
  "cypress:run": "cypress run"
}

Step 5: Create Feature Files and Step Definitions

5.1: Create a Feature File

Create a directory structure for your features and step definitions. Inside the cypress/e2e directory, create a features directory:

mkdir -p cypress/e2e/features

Create your first feature file, example.feature, inside the features directory:

Feature: Example feature

  Scenario: Visit the example page
    Given I open the homepage
    Then I see the title "Example Domain"

5.2: Create Step Definitions

Create a step_definitions directory inside cypress/e2e and add a example.js file for your step definitions:

mkdir -p cypress/e2e/step_definitions

In example.js, add the following step definitions:

import { Given, Then } from "@badeball/cypress-cucumber-preprocessor";

Given('I open the homepage', () => {
  cy.visit('https://example.com');
});

Then('I see the title {string}', (title) => {
  cy.title().should('include', title);
});

Step 6: Run Your Tests

Run your tests using the following command:

npm run cypress:open

Select your test from the Cypress UI and see it in action.

Conclusion

You've successfully set up Cypress with Cucumber! You can now write readable, natural language tests and leverage the power of Cypress for end-to-end testing. Expand on this foundation by adding more features and step definitions as your application grows.

Happy testing!