BDD with Cypress Cucumber Testing

Perform BDD seamlessly and efficiently by running Cypress Cucumber Tests on Real Devices & Browsers

Get Started free
Home Guide How to Run Tests with Cypress and Cucumber

How to Run Tests with Cypress and Cucumber

By Neha Vaidya, Community Contributor -

Cypress is a modern front-end test automation framework with capabilities for quickly creating robust test scenarios. Cucumber is a testing approach/tool that supports Behaviour Driven Development (BDD). It provides a way to write tests that anybody can understand, regardless of their extent of technical knowledge.

This article will thoroughly explore BDD using Cucumber and integrating it with Cypress. In other words, it will discuss running tests with Cypress and Cucumber.

What is the Cypress Framework?

Cypress framework is a JavaScript-based end-to-end testing framework built on Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.

How to Run Tests with Cypress and Cucumber

What is Cucumber?

Cucumber is a tool that supports behavior-driven development (BDD). It runs automated acceptance tests written in BDD format. Cucumber was initially written in the Ruby programming language and provided a way to write tests that anybody can understand, regardless of their technical knowledge. It explains test steps and application behavior using the Cypress Gherkin language in simple English

Why use Cucumber for testing?

Cucumber is important as a testing tool for the following reasons:

  1. Cucumber is open-source and free to use.
  2. Using Cucumber, QAs can write your test scripts in multiple languages such as Java, Ruby, .NET, Python, etc.
  3. It integrates with Selenium, Ruby on Rails, Cypress, Watir, and other web-based testing tools.
  4. Cucumber is one of the most widely used BDD tools.

Overview of Behavior-Driven Development

  • Behaviour-driven Development (BDD) is a software development technique that has evolved from TDD (Test Driven Development). In this programming practice, the developers write new code only when the automated test case fails.
  • This approach involves the usage of shared language that enhances communication between various tech and non-tech teams.
  • Tests are more user-focused and based on the system’s behavior.
  • In BDD, “Given-When-Then” is the proposed approach for writing test cases.
  • Focuses on defining ‘behavior’ rather than defining ‘tests’.
  • Enhances communication among the members of cross-functional product teams.
  • Helps reach a wider audience via the usage of non-technical language

Let’s understand this tutorial better with a Cypress Cucumber example.

BrowserStack Automate Banner 7

How to Integrate Cypress and Cucumber

Let’s first start by installing a Cypress and Cucumber preprocessor.

Step 1: Install Cypress 

Run the following command to install Cypress locally:

 npm install cypress

Step 2: Install Cucumber for Cypress

Run the following command to install the Cucumber for Cypress package: 

npm install –save-dev cypress-cucumber-preprocessor  

Step 3: Add the configuration Cypress environment files

Under plugins/Index.JS file add the following:

const cucumber = require('cypress-cucumber-preprocessor').default 

module.exports = (on, config) => {

  on('file:preprocessor', cucumber())

}

Within the package.json file, add the following configuration:

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

In the spec files extension parameter in the cypress.json file, make sure to point to the feature files:

{

  "testFiles": "**/*.feature"

}

Run Tests with Cypress and Cucumber

Let’s first write this test by just using Cypress:

cy.visit('/login')

  .findByPlaceholder(/email/)

  .type(xyz@gmail.com')

  .findByPlaceholder(/password/)

  .type('my password')

  .findByText('Log in')

  .click()

  .url()

  .should('eq', '/')

  .window().its('localStorage.email')

  .should('eq', 'xyz@gmail.com)


This test navigates to /login (using the baseUrl specified in cypress.json), enters the username and the password, and clicks the “Log in” button. 

In Cypress, users can group multiple commands into a single custom command by creating a file called cypress/support/commands.js and add:

Cypress.Commands.add('loginWith', ({ email, password }) =>

  cy.visit('/login')

    .findByPlaceholderText(/email/)

    .type(email)

    .findByPlaceholderText(/password/)

    .type(password)

    .findByText('Log in')

    .click()

)

And then open cypress/support/index.js and add:

import './commands'

Now, use the custom command in the tests:

cy.loginWith({

  email: xyz@gmail.com',

  password: 'mypassword'

})

  .url()

  .should('eq', '/')

  .window().its('localStorage.email')

  .should('eq', 'xyz@gmail.com')

The above code is written using Cypress. Now, on using Gherkin for Cucumber, the code goes as follows:

First, create a cypress/integration/login.feature file:

Feature: Login App

Scenario:

  When I log in

  Then the url is /

  And I'm logged in

The test comprises 3 defined steps: ‘I login’, ‘the url is {word}’, and ‘I’m logged in’. So create 3 step definitions. Create a Javascript file inside a directory named as the feature file (login/login.js) and write:

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

When('I login', () => {

  cy.loginWith({ email: 'xyz@gmail.com', password: 'my password'})

})

Then('the url is {word}', (url) => {

  cy.url()

    .should('eq', `${Cypress.config().baseUrl}${url}`)

})

Then('I\'m logged' in, () => {

  cy.window().its('localStorage.email')

    .should('eq', 'xyz@gmail.com')

})

Talk to an Expert

Once this code runs, Cucumber will convert it into Cypress commands. And that’s how it works.

Remember that Cypress testing must be executed on real browsers for accurate results. Start running tests on 30+ versions of the latest browsers across Windows and macOS with BrowserStack. Use instant, hassle-free parallelization to get faster results without compromising on accuracy. Detect bugs before users do by testing software in real user conditions with BrowserStack. 

With BrowserStack’s cloud infrastructure, teams can conduct the following tests:

Run Cypress Cucumber Testing

Tags
Cypress Testing Tools

Featured Articles

Cypress Best Practices for Test Automation

What is Cypress Test Suite?

Cypress E2E Angular Testing: Advanced Tutorial

How to Test React using Cypress

Automation Tests on Real Devices & Browsers

Seamlessly Run Automation Tests on 3500+ real Devices & Browsers