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

In this blog, I’ll show you how to test your web apps more efficiently with Cypress and Cucumber. I’ll highlight the benefits of combining BDD Gherkin scenarios with Cypress and 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 BDD (behavior driven development).

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

Why Cucumber?

BDD has been widely adopted over the past few years and serves as the bridge between the “three amigos,” (Business, Testing, and Developers).

With BDD and Gherkin scripting (Given, When, Then), 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 above, Cypress is a modern front-end test automation framework rich with capabilities to quickly create robust test scenarios.

It is open source with an active 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 and Cucumber Together

To enjoy both frameworks’ benefits, teams could easily integrate BDD with Cypress and not close the technology gaps, improving the coverage of key business scenarios together with a modern JS based framework.

Cypress Testing: Practical Considerations for Dev Teams >>

To do so, 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 and 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 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.

Cypress and Cucumber have proven to be a robust and sustainable pair.

Hence, it is a valid choice of technologies for cross-browser testers and developers.

See Cypress and Cucumber 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 Cypress and Cucumber harnessed by the power of Perfecto, 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