Home Guide How to Run Tests with Cypress and Cucumber

How to Run Tests with Cypress and Cucumber

By Neha Vaidya, Community Contributor -

Table of Contents

Cypress is a modern front-end test automation framework rich 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 explore BDD in a simple way using Cucumber and integrating it with Cypress. In other words, it will discuss how to run tests with Cypress and Cucumber.

What is the Cypress Framework?

Cypress framework is a JavaScript-based end-to-end testing framework built on top of 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.

What is Cucumber?

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

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. By 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) – a programming practice where 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 with the help of an example.

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')

})

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

Bear in mind 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.

Run Cypress Tests on Real Browsers

Tags
Automation Testing Cypress Testing Tools

Featured Articles

Test Automation using Selenium and Cucumber Framework: Tutorial

Getting Started with Cypress Installation for Test Automation

How to use CSS Selector to locate web elements in Selenium scripts

BrowserStack Logo Run Cypress Tests on 30+ Browser Versions Contact us Get Started Free