How to Run Tests with Cypress and Cucumber: Tutorial

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.

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

Understand this tutorial better with the below Cypress Cucumber 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 Cypress Tests on Cucumber

First you can 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.

Best Practices to run Cypress and Cucumber Tests

Here are some best practices to run Cypress and Cucumber Tests:

• Organize Cucumber feature files logically. Create feature files based on functionality and ensure they have clear comments and descriptions.
• Utilize Cypress Commands for Reusability. Create custom Cypress commands rather than repeating actions in your test cases.
• Steps ought to be Simple and Modular. Break down your Gherkin steps into smaller, reusable functions.
• Utilize Cypress Assertions. Cypress provides built-in assertions to let you verify elements. Use assertions to check visibility and state.
• Leverage parallel testing via Cypress for large suites to split the load and speed up the process.

Useful Resources for Cucumber and Cypress

• Cypress Cucumber Preprocessor: Uses & Configuration
• What is Cucumber Framework?
• Cypress Web Testing Framework: Getting Started
• Cross Browser Testing Using Cucumber
• How To Use Annotations In Cucumber Framework
• Page Object Model in Cucumber

Conclusion

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
• Cypress Cross-Browser Testing
• Cypress Visual Regression Testing
• Cypress Geolocation Testing
• Cypress Parallel Testing

Run Cypress Cucumber Testing