Automated Testing with Cypress and Cucumber

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.

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