How To Use Cucumber With Cypress 10 And Above-2023

Cypress is a very popular tool based on JavaScript. By using Cypress we can write Unit tests, integration tests and E2E tests. If you are not familiar with how to get started with Cypress then first read this article. After the recent Cypress update, there are many breaking changes in the code(Cypress version <10). This post will teach how to use Cucumber with Cypress 10 and above.

Table of Contents

How To Integrate Cucumber With Cypress

Cucumber is a behaviour-driven development framework that uses plain English to define the behaviour of the application which helps in bridging the gap between the business stakeholders and technical team.

Prerequisite

1)Node.js
2)VSCode

Installation

1)Create an empty folder

Open this folder in VS code and initialize it.

npm init

Answer the basic questions like name, and description and keep pressing enter, a package.json will be generated with the provided information and added to the project.

2)Install Cypress v10

npm install cypress — save-dev

This command will install Cypress’s latest version in package.json.

3)Install Cucumber

First, install the cucumber support plugin in VS code.

1. Go to the visual studio marketplace and install Cucumber(Gherkin) Plugin.

2. Restart the visual studio code to apply changes.

Next, install the Cypress BDD dependency. Go to this link and follow the steps.

Install the cypress cucumber preprocessor using npm.

npm install @badeball/cypress-cucumber-preprocessor

2. Install browserify-preprocessor dependency using npm.

npm install @cypress/browserify-preprocessor

This dependency basically helps the preprocessor to interact with Cypress with the browser.

3. Next go to cypress.config.js and add the below configuration.

const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");

async function setupNodeEvents(on, config) {
  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
await preprocessor.addCucumberPreprocessorPlugin(on, config);
on("file:preprocessor", browserify.default(config));
return config;
}

Create Feature and Spec File

Go to the cypress Project –>Open e2e Folder –>Right click–>Create New Folder and name it as “bdd-cucumber”.

Open “bdd-cucumber” and create two more folders inside it .one for feature files and another for step definition.

Now Go to the features folder and create a feature file “login. feature” and add scenarios inside this feature file in plain Gherkin language.

Feature: Login
Scenario: Login user with correct email and password
Given I navigate to automation exercise website
When I enter login credentials
Then I should be logged in

Create a step definition file “login.js” inside the step-definition folder and add the below code.

import {Given, When, Then} from ‘@badeball/cypress-cucumber-preprocessor’;
Given(‘I navigate to automation exercise website’, () => {
cy.visit(‘https://automationexercise.com/');
})

When(‘I enter login credentials’, () => {
cy.get(‘a[href=”/login”]’).click();
cy.contains(‘Login to your account’).should(‘be.visible’);
cy.get(‘input[data-qa=”login-email”]’).type(‘[email protected]’);
cy.get(‘input[data-qa=”login-password”]’).type(‘foobar’);
cy.get(‘button[data-qa=”login-button”]’).click();
})

Then(‘I should be logged in’, () => {
cy.contains(‘ Logged in as ‘).should(‘be.visible’);
})

Configure feature file and step definition path

Open the package.json file and under the cypress-cucumber-preprocessor node add the step definition path.

 "cypress-cucumber-preprocessor": {
    "stepDefinitions": "cypress/e2e/bdd-cucumber/step-defination/*.js",
    "filterSpecs": true,
    "omitFiltered": true
   }

2) Go to Cypress. config.js file and under the module. export add feature file path.

module.exports = defineConfig({
  e2e: {
    setupNodeEvents,
    baseUrl:'your url',
    specPattern: "cypress/e2e/bdd-cucumber/features/*.feature",
    watchForFileChanges:false,
    chromeWebSecurity: false,
    experimentalModifyObstructiveThirdPartyCode: true,
    defaultCommandTimeout: 10000
 },
});

Your final Cypress.config.js should look like the below image.

Execute Script

In the command line type “npx cypress open” .Cypress Runner will open. Select E2E testing then choose browser. A spec dashboard will open containing all the feature files listed. Select the desired feature file and that test will start executing.

Pro Tip: If you want to execute all your test suites at once instead of executing features files one by one from the Cypress dashboard then go to package.json and add the test script inside the “scripts” node.

 "scripts": {
    "script": "cypress run --browser chrome",
    "test": "npm run script ",
  }

Now run the “npm run test” command. This will immediately start execution in headless mode for the Chrome browser. You can change the browser as per your requirement. With the Cypress scripts, you can configure pretest and posttest steps as well.

Suppose before every execution you want to clean all the reports, and screenshots, then you can configure the pre-step node in the scripts section.

How to run Cypress Cucumber tests using Tags

Just like the other frameworks, you can provide tags to your cucumber scenarios like @smoke, @sanity, @regression etc.

1)To filter out the Cypress tests on the basis of cucumber tags run the below command.

npx cypress run --env tags="@Smoke"

Just make sure that you have added these 2 settings under the “cypress-cucumber-preprocessor” tag in package.json. This command will execute all the tests tagged as ‘Smoke’.

   "filterSpecs": true,
    "omitFiltered": true

Since Cypress version 10 these settings are important to mention. You can refer package.json image in this article.

2) To execute other tests except ‘Smoke’ use this command.

npx cypress run --env tags="not @Smoke"

This executes all the test scenarios excluding the ‘Smoke’ test cases.

3) To execute all tests that contain either one of the tags.

npx cypress run --env tags="@Smoke or @regression"

4) Execute all tests that contain both of the tags.

npx cypress run --env tags="@Smoke and @regression"

Refer the below image for the test execution result.

We can see the total no of test cases executed, passed test cases, failed test cases, skipped etc.