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

In this blog, I’ll show you how to use a combination of Cypress-Cucumber technology to test your web apps more efficiently. I’ll highlight the benefits of combining Cucumber-supported BDD Gherkin scenarios with Cypress, as well as show you how to get started.

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

Building E2E functional testing with the Cypress framework is quite efficient, robust, and fast.

However, there are additional libraries that work very well with Cypress, like Cucumber - a popular BDD (behavior driven development) testing framework.

Related Reading: Playwright vs. Cypress: Which Cross-Browser Testing Solution To Use? >>

Why Cucumber?

Cucumber is a popular BDD (business-driven development) testing tool for writing tests in plain language to appeal to all users, regardless of coding knowledge. 

BDD has been widely adopted over the past few years and serves as the bridge between the “three amigos” of building applications: Business, Testing, and Developers. Like other BDD frameworks, Cucumber uses Gherkin scripting, which is a plain-English scripting language that anyone, technical or not, can read, write, and understand. 

With Cucumber BDD and Gherkin scripting, practitioners can easily define end-user scenarios that strengthen validations and remove misunderstandings. 

In addition, the adoption of BDD has been key to also bridging skillset gaps. BDD allows both business testers and SDETs/developers to contribute to higher test automation coverage.

By definition, BDD is dependent on code-based step definitions that can be used by various Gherkin scenarios.

To summarize this section, BDD helps in test automation creation with low-code scripting. It also reduces error rates in test scenarios by including more personas in the testing process.

Why Cypress?

As mentioned previously, Cypress is a modern front-end test automation framework rich with capabilities to quickly create robust test scenarios.

It is an open-source framework with an active user community, support, documentation, and great capabilities like Time Travel, network traffic control, Cypress commands running inside the browsers, and more.

5 Benefits of Cypress Automation for Web Testing >>

Cypress is JavaScript base with Mocha testing framework at its core. This makes it easier for existing test automation engineers or developers who have used Selenium to ramp up with Cypress.

In addition, the framework allows running from its GUI runner, CLI, or through the cloud with solutions like Perfecto.

Using Cypress & Cucumber Together

To enjoy both frameworks’ benefits, teams could easily do a Cypress-Cucumber integration. This integration closes the technology gaps while employing low-code BDD testing methods, improving the coverage of key business scenarios together with a modern JS based framework.

Cypress Testing: Practical Considerations for Dev Teams >>

To get started with Cypress-Cucumber testing, few things needs to be set up. 

Step 1

Install Cypress (It’s recommended to get the latest version).
Run the following command to locally install Cypress: npm install cypress

Step 2

Install Cucumber for Cypress.
Run the following command to install the cucumber for cypress package: 
npm install –save-dev cypress-cucumber-preprocessor  

Step 3

Add the relevant configurations to your Cypress environment files accordingly.
Under plugins/Index.JS file add the following:

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {

  on('file:preprocessor', cucumber())

}

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

 "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"

}

How to Run Cypress-Cucumber Tests in the Perfecto Cloud

• Install the Perfecto Cypress SDK
  • Follow the documentation and initialization steps to configure the cloud settings.
• Configure your perfecto-config.json file with all relevant browser capabilities that you wish to run your tests against.
• Run the tests at scale in the cloud: npx perfecto-cypress –config=[path to your config file]

Once configured and executed, you can review your Cypress-Cucumber test report from within the Perfecto rich test reporting platform.

The above screenshot represents a live view of Cypress-Cucumber running a test against a web browser editor in the cloud.

The above screenshot shows the post execution test report in the Perfecto repository. It allows you to view the step-by-step details, videos, and if taken — the screenshots as well.

Bottom Line

As Cypress continuously matures and evolves, it is a great opportunity for BDD practitioners to explore the benefits of this framework to maximize the test coverage and simplicity of their test creation.

The Cypress-Cucumber integration has proven to make the most of this robust and sustainable pair of technologies. Hence, it is a valid choice of technologies for cross-browser testers and developers.

See Cypress, Cucumber, and More in Action With Perfecto

Perfecto supports both Cypress and Cucumber, and offers more BDD capabilities through the Quantum framework.

With Perfecto, teams have a secure, scalable cloud environment for web and mobile testing that offers fast parallel executions and fast feedback via reporting. 

To get started with this Cypress-Cucumber integration harnessed by the power of Perfecto, as well as many other open-source testing frameworks, try a free 14-day trial today.

Start Trial

Related Content

• Cypress vs. Selenium: What’s the Right Cross-Browser Testing Solution for You?
• Selenium vs Cucumber Explained: Quick Guide to Key Differences
• Quantum BDD Testing & Perfecto
• Cypress Testing: Practical Considerations for Dev Teams
• How Gliffy Developers Sped Up End-to-End Testing With Cypress + Perfecto