Behavior Driven Development with React & Cucumber & Cypress (BDD)

BDD is a way for software teams to work that closes the gap between business people and technical people by:

• Encouraging collaboration across roles to build shared understanding of the problem to be solved
• Working in rapid, small iterations to increase feedback and the flow of value
• Producing system documentation that is automatically checked against the system’s behaviour.

We do this by focusing collaborative work around concrete, real-world examples that illustrate how we want the system to behave. We use those examples to guide us from concept through to implementation, in a process of continuous collaboration.

What is Cypress ? What is Cucumber ?

Cypress is a next generation front end testing tool built for the modern web. Most of React developers build their end-to-end tests by using Cypress. It’s a great tool for creating your end-to-end test cases.

Cucumber is an open-source software testing tool. Cucumber enables you to write test cases that anyone can easily understand regardless of their technical knowledge.

Cucumber reads executable specifications written in plain text and validates that the software does what those specifications say. The specifications consists of multiple examples, or scenarios.

In order for Cucumber to understand the scenarios, they must follow some basic syntax rules, called Gherkin. Also these scenarios are written in feature file.

Here is the example of a login.feature:

Feature: Login
  This feature describes login process
  Scenario: 
    Given Navigate Login Page
    Then Fill use login form
    When Click on Login Button
    Then User should be logged in

As you can see, it’s just a plain text that every people can understand easily.

How to set up Cucumber with Cypress?

The first step in the integration of Cucumber with Cypress is installing the dependency of Cucumber preprocessor in the framework. For installing the Cucumber-preprocessor node module for Cypress, we can use the following command:

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

To enable usage of Cucumber in the Cypress automation framework, we need to make some configurations in 3 files as shown in the below screenshot:

The first file (shown by marker 1) is the “index.js” file under the plugins folder. We need to make the following changes in the “index.js” file, which exports Cucumber as a module and make it accessible in other Cypress files.

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
}
const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

The next set of configuration changes are in the “cypress.json” file*(shown by marker 2). The changes here specify that Cypress should only consider those as test files, which end with extension as “.feature or .features*”, which are the extensions for the Cucumber feature files. Specify the below configuration in the “cypress.json” file:

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

The last file which needs to be updated is the “package.json” file*(shown by marker 3)*. 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. Add the following code at the end of the package.json file just after the devDependencies section:

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

Conclusively, with all the configuration changes for integration of the Cucumber with Cypress framework. We have set up the initial milestone for the development of the BDD.

How to write Cucumber BDD tests in the Cypress framework?

I’m using POM (Page Object Model) for cypress structure. You could check here for more information. So we have Login.feature. That has acceptance criteria within it.

Login.feature

Cypress needs to know when to run which steps and how to do it. So we need to connection between feature and cypress file. StepDef (Step Definition) files are the bridge between them.

Step Definition is a small piece of code with a design pattern attached to it. An annotation followed by the pattern that we have mentioned in the feature file links the Step Definition to all the matching Steps. Cucumber will execute the code when it sees a Gherkin Step mentioned in the feature file. Cucumber finds the corresponding Step Definition file with the help of the Glue code that we mention in Cucumber Options.

Folder Structure

StepDefLogin.ts

As a last thing, we have to define every step function related with login page class. Then our cypress-cucumber implementation will be ready.

If you open Cypress now, you will find the feature file (as shown below) there, and all you have to do is double click and see how the test runs. You can open cypress by using “npx cypress open” command.

You can run your feature and check your test result. Thanks for reading, Have a happy BDD’s !

References: https://cucumber.io/, https://www.cypress.io/, https://www.toolsqa.com/cypress/bdd-automation-framework-in-cypress/