How to set up Cucumber with Cypress?
Back to Blog page

How to set up Cucumber with Cypress?

Till now, we have written all the Cypress test scripts directly in the JavaScript files, but with the integration of Cucumber, the test structure will change, and now the entry points will be the Cucumber feature files.

Published by PJ

PJ Jan 24, 2022 2 min read

What is Cucumber?

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

Why use Cucumber for testing?

Cucumber is an important testing tool for the following reasons:

  1. It's free to use as it's open-source.
  2. No longer need to write test scripts in multiple languages such as javascript, Python, Java, etc.
  3. It can be integrated with many Automation tools such as Cypress, Selenium, Ruby on Rails, and other web-based testing tools.

How to configure Cucumber with Cypress?

Step 1: Install Cypress

Run the following command to install Cypress locally:

1 npm install cypress

Step 2: Install Cucumber for Cypress

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

1 npm install –save-dev cypress-cucumber-preprocessor

Step 3: Add the configuration Cypress environment files

Under plugins/Index.js file add the following:

1 2 3 4 const cucumber =require('cypress-cucumber-preprocessor').default module.exports =(on, config)=>{ on('file:preprocessor', cucumber()) }

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

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

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

1 2 3 { "testFiles":"**/*.feature" }

Run Tests with Cypress and Cucumber

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

1 2 3 4 5 6 7 8 9 10 11 cy.visit('/login') .findByPlaceholder(/email/) .type(') .findByPlaceholder(/password/) .type('my password') .findByText('Log in') .click() .url() .should('eq', '/') .window().its('') .should('eq', '

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:

1 2 3 4 5 6 7 8 9 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:

1 import'./commands'

Now, use the custom command in the tests:

1 2 3 4 5 cy.loginWith({ email:', password: 'mypassword' }) .url() .should('eq', '/') .window().its('') .should('eq', '')

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

1 2 3 4 5 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import { When, Then } from 'cypress-cucumber-preprocessor/steps' When('I login', () => { cy.loginWith({ email: '', password: 'mypassword'}) }) Then('the url is {word}', (url) => { cy.url() .should('eq', `${Cypress.config().baseUrl}${url}`) }) Then('I\'m logged' in, () => { cy.window().its('') .should('eq', '') })

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

Tagged with:
Enjoyed this article?
Leave a comment below!