Cypress: Cucumber Integration

In this article we will see, what behaviour driven development is, how cucumber supports BDD and cucumber integration with Cypress. Most of you may often hear the phrase “BDD Test”. In the beginning only let me make it very clear BDD is not testing. They both are very different, they have different roles and responsibilities. BDD is an approach, and testing is an activity to make sure whether the application is developed.

Behaviour Driven Development

Behaviour-driven development is an Agile software development process that fosters collaboration between developers, software testers, and the non-technical, business side in a software development process. Behavior Driven testing is an extension of Test Driven Development. Like in TDD, In BDD also we write tests first and then code implementation is done. The major difference is

1. In BDD tests are written in plain english language

2. In BDD tests are more end user focused

3. It encourages collaboration between developers, QA and non-technical or BA

4. It verifies how applications should behave from the end user perspective. The below figure gives a basic overview of the steps involved in the BDD process

One of the biggest advantages of BDD is we use a common language known as Gherkin (which is more like plain english) to write the test cases. Each behaviour is based on a user story written in the gherkin language which is commonly known as feature file.

Once the feature file has been established and agreed by the business participants, we then write the acceptance criteria to test that behavior. The acceptance criteria for a feature is written in terms of scenarios. A scenario is written in the following format:

● Given [initial condition]

● When [event occurs]

● Then [expected condition ]

● And/But [more validations if needed]

Cucumber

Cucumber is one of Gherkin based tools which supports and helps in Behavior Driven Development (BDD). Gherkin is a domain-specific language for behavior descriptions. Cucumber is used to execute automated tests written in the “Gherkin” language. Cucumber automation tests makes use of two files

1. Feature file : it is a file where you will write your tests or acceptance criteria in plain english using gherkin language. This is the entry point for your cucumber tests. Which includes one or many scenarios in the form of GIven-When-Then. Each scenario represents one test.

2. Step definition file : This is the file which contains actual code for the steps written in feature files. Cucumber finds the corresponding step definition file with the help of the glue code mentioned in cucumber options. Cucumber is responsible for executing this code which has the implementation for corresponding steps.

Cypress Cucumber Integration

Cypress is the front end testing tool built for the modern web. Because of its Architectural design, Cypress delivers fast, consistent and reliable test execution compared to other Automation tools. Some if it's cool features are automatic waiting, network traffic control and easy support for cross browser testing.

Let's understand step by step how we can integrate Cucumber in Cypress for development of a BDD automation framework in Cypress.

● As the cypress is built on the node.js framework first you need to download node.js from https://nodejs.org/en/download/ as per your operating system.

● Now create a folder: cypress-bdd-example

● Import this folder to one of your favourite editors and set up a new npm package. I am using visual studio code for this example.

$ npm init -y

This will create a package.json file in your project folder.

● Next we have to install cypress and the dependency of cucumber preprocessor in the framework.

$ npm install cypress $ npm install cypress-cucumber-preprocessor

It will add a new dependency in the "package.json". Now execute the command

$ npx cypress open

This will create new folders (default cypress setup) which you can see in your left panel folder structure.

● To enable usage of Cucumber in the Cypress automation framework, we need to make some configurations

● We need to make the following changes in the “cypress/plugins/index.js” file, which exports Cucumber as a module and makes it accessible in other Cypress files.

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

● The next change we need to make is in the “cypress.json” file. Changes made here will specify that cypress should consider only those files as test files which end with extension “feature or features”. For this add the below code

{ "testFiles": "**/*.{feature,features}" }

● Last file which we need to update is “package.json”. Here we need to specify the configuration that non-global step definitions are allowed, which means that step definitions can exist in sub-folders as well. This is to bind our step definitions to feature file

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

Cucumber feature file

Now, let's see how we can write our test scenarios with Cucumber and Cypress.

Here I will be using http://automationpractice.com/index.php site for demonstration purposes.

● Create a folder under the Integration folder as CucumberTests

● Create a file login.feature and click login.feature and type Feature and auto help will pop up. Complete the feature file by providing all the details

● Feature file will look like this

● Now we have to create the step definition for the scenario written in the feature file.

● Create a folder login, the folder name should be the same as feature file name.

● Under the login folder create a file loginSteps.js file and start Mapping the test steps with feature file test cases. you need to import {Given, When, Then} from cypress-cucumber-preprocessor/steps package

● Bingo! We just successfully wrote a simple BDD fashioned test using Cypress.io. Now, it's time to launch the Test Runner and execute the tests.

● Run the command npx cypress open and select the login.feature yours first test will get executed.