The Talent500 Blog
How to Build an Efficient Test Automation Suite With Cypress and Cucumber 1

How to Build an Efficient Test Automation Suite With Cypress and Cucumber

As you may be aware, Cypress is the de-facto front-end cross-browser JavaScript test automation framework.

The Cypress framework makes it easy to create E2E functional testing that is efficient, robust, and rapid.

But, there are other libraries that perform quite well with Cypress, such as Cucumber BDD (behavior driven development).

Why Cucumber?

BDD has gained popularity in recent years and acts as a link between the “three amigos” (Business, Testing, and Developers).

Practitioners may simply build end-user scenarios that enhance validations and eliminate misconceptions using BDD and Gherkin scripting (Given, When, Then).

Furthermore, the use of BDD has proved critical in closing skill gaps. BDD enables business testers as well as SDETs/developers to contribute to increased test automation coverage.

BDD is defined by code-based step definitions that may be used by various Gherkin scenarios.

Why Cypress?

As previously stated, Cypress is a contemporary front-end test automation framework with extensive features for rapidly creating comprehensive test scenarios.

It is free source, with a vibrant community, support, and documentation, as well as fantastic features like as Time Travel, network traffic control, Cypress commands running inside browsers, and more.

Cypress is a JavaScript framework with the Mocha testing framework at its heart. This simplifies the transition for existing test automation experts or developers that have used Selenium to Cypress.

Moreover, the framework supports execution through its GUI runner, CLI, or via the cloud with solutions such as Perfecto.

Using Cypress and Cucumber Together

To reap the benefits of both frameworks, teams may quickly combine BDD with Cypress while avoiding technological gaps, enhancing coverage of essential business cases alongside a current JS-based framework.

To do so, few things needs to be set up. 

Step 1

  • Install Cypress (latest version is recommended).
  • To locally install Cypress, run the following command:

    npm install cypress

Step 2

  • Now Install Cucumber for Cypress.
  • To install the cucumber for cypress package, run the following command: 

npm install –save-dev cypress-cucumber-preprocessor  

Step 3

Add the necessary settings to your 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())

}

 

add the following configuration within the package.json file:

“cypress-cucumber-preprocessor”: {    “nonGlobalStepDefinitions”: true

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

{

  “testFiles”: “**/*.feature”

}

 

Run Tests with Cypress and Cucumber

Let’s start by writing this test entirely in 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 goes to /login (through the baseUrl given in cypress.json), enters the username and password, then hits the “Log in” button.

Users in Cypress may combine numerous commands into a single custom command by creating a file named cypress/support/commands.js and adding the following code:

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

  cy.visit(‘/login’)

    .findByPlaceholderText(/email/)

    .type(email)

    .findByPlaceholderText(/password/)

    .type(password)

    .findByText(‘Log in’)

    .click()

)

Next, in cypress/support/index.js, add:

import ‘./commands’

Now, in the tests, use the custom command:

cy.loginWith({

  email: xyz@gmail.com’,

  password: ‘mypassword’

})

  .url()

  .should(‘eq’, ‘/’)

  .window().its(‘localStorage.email’)

  .should(‘eq’, ‘xyz@gmail.com’)

The preceding code was written in Cypress. Now, when using Gherkin for Cucumber, the code looks like this:

Create a cypress/integration/login.feature file first:

Feature: Login App

Scenario:

  When I log in

  Then the url is /

  And I’m logged in

The test has 3 stated steps: ‘I login’, ‘the url is {word}’, and ‘I’m logged in’. Create three-step definitions. Write a Javascript file in the feature file directory (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’)

})

Cucumber will turn this code into Cypress commands once it has executed. That is how it works.

Conclusion

As Cypress continues to expand and evolve, it is an excellent opportunity for BDD practitioners to investigate the benefits of this framework in order to maximise test coverage and simplify test design.

Cypress and cucumber have shown to be a strong and long-lasting pairing. As a result, it is a viable technology option for cross-browser testers and developers.

 

0
Afreen Khalfe

Afreen Khalfe

A professional writer and graphic design expert. She loves writing about technology trends, web development, coding, and much more. A strong lady who loves to sit around nature and hear nature’s sound.

Add comment