Features

Automated Testing with Cypress and Cucumber

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews

Cypress is a popular frontend test automation framework, designed to help developers in creating and maintaining end to end tests.


Together with Cucumber, a Behavior Driven Development (BDD) tool, tests will be both clean to write and maintain. The syntax is easy to read, which means even non-technical people can interpret the tests.

What is the Cypress Framework?


Cypress is a Javascript based, end-to-end testing framework, built on top of Mocha.
It runs as a standalone process and instructs the browser under test to perform certain actions. Cypress offers built-in automatic waiting (so no more sleeps or waits), snapshot functionality and consistent results.

What is Cucumber Testing?


Cucumber is a test framework that provides Behavior Driven Development (BDD). It supports the BDD file format and describes tests in a Gherkin format, which makes it easy to read and understand.


Cucumber offers a Gherkin editor to build and modify your tests and provides good documentation.

Integrate Cypress and Cucumber


Cucumber integrates with Cypress nicely. It allows you to write clean, readable and consistent tests in the Gherkin format.


To get started, please install the cypress-cucumber-preprocessor, which adds support for using feature files to Cypress:

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

Once installed, you'll need to add the Cypress plugin to your plugins file.
The default Cypress plugin file is located in cypress/plugins/index.js, but you might be using a different one (as defined in your cypress.json file).

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

module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

Next, you'll need to make sure Cypress picks up your feature files.
Modify your cypress.json file:

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

Feature Files

Now that you've installed and configured Cucumber for Cypress, you can start adding feature files in cypress/integration.


Example feature file:
Feature: Google Main Page


  I want to open Google

  

  @focus

  Scenario: Opening Google

    Given I open Google page

    Then I see "Google" in the title

Cucumber and Cypress Text Example

Now that you have your feature file, you're not ready yet to start running your tests.


To be able to run a test, you'll need to create your step definition files, so that Cucumber knows what to do with the feature files.

Let's create a step-definition file called: cypress/integration/Google/google.js

import { Given } from "cypress-cucumber-preprocessor/steps";

const url = 'https://google.com'
Given('I open Google page', () => {
  cy.visit(url)
})
Then(`I see {string} in the title`, (title) => {
  cy.title().should('include', title)
})

With these step definitions, Cucumber is able to link the Gherkin syntax to actual code that does the testing.


To run this first test, you'll need to run this command in your console:

cypress run --spec **/*.features

Running Cypress tests on TestingBot

TestingBot provides a feature to run these tests on the TestingBot browser grid.
Running these Cypress tests in the cloud has a couple of advantages:

  • You can run the tests in parallel
  • Tests can run on multiple browser versions and operating systems
  • No infrastructure cost or maintenance/upgrade work

To get started, please see our Cypress Cross-Browser documentation.

Cucumber, Cypress and Typescript

Using Typescript with Cypress and Cucumber is pretty straightforward, and greatly improves the developer experience. By using Typescript, your test code will be cleaner and less error-prone, because of the extra typings.


You can choose to use Typescript in combination with Webpack, in which case you'll need to create a cypress/webpack.config.js file:

module.exports = {
  resolve: {
    extensions: [".ts", ".js"]
  },
  node: { fs: "empty", child_process: "empty", readline: "empty" },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "ts-loader"
          }
        ]
      },
      {
        test: /\.feature$/,
        use: [
          {
            loader: "cypress-cucumber-preprocessor/loader"
          }
        ]
      },
      {
        test: /\.features$/,
        use: [
          {
            loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
          }
        ]
      }
    ]
  }
};

Webpack will use the cypress-cucumber-preprocessor to convert Typescript to plain Javascript, which Cypress will then use to run your tests.


To run this first test, you'll need to run this command in your console:


Your step-definition files can now use Typescript as well:

import { Given } from "cypress-cucumber-preprocessor/steps";

const localFunctionWithTypes = (a: number, b: number): number => a + b;

Given(/I pass/, () => {
  pass("hi there");
  console.log(localFunctionWithTypes(1,2) === 2)
});

To run this TypeScript + Cucumber test with Cypress, you'll need to run this command in your console:

cypress run --spec **/*.features
  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews
TestingBot Logo

Sign up for a Free Trial

Start testing your apps with TestingBot.

No credit card required.

Other Articles

TestNG automation with Selenium

TestNG is a popular Java Test Framework which allows you to write clean Selenium tests with built-in parallelisation.

Read more

Why would you choose TestingBot instead of an other company like SauceLabs or BrowserStack?

Read more

With a large number of different browsers platforms and mobile devices it is very important to make sure your website looks and behaves the way you want it to across all these different browsers.

Read more