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.
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:
- It's free to use as it's open-source.
- No longer need to write test scripts in multiple languages such as javascript, Python, Java, etc.
- 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 cypressStep 2: Install Cucumber for Cypress
Run the following command to install the Cucumber for Cypress package:
1
npm install –save-dev cypress-cucumber-preprocessorStep 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(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:
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: 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:
1
2
3
4
5
Feature: Login App
Scenario:
When I log in
Then the url is /
And I'm logged inThe 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: 'xyz@gmail.com', password: 'mypassword'})
})
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.