How to Run Tests with Cypress and Cucumber

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:

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.

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.

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

ncG1vNJzZmivp6x7o77OsKqeqqOprqS3jZympmeXqralsY6hprBlpKR6s8HNZpqyqKKawLR5wq6arqWSmr9uwMSsqw%3D%3D