---
title: Cypress and Cucumber Browser Testing | Testing Resources
description: Cypress and Cucumber is a great combination to write clean and precise
  end-to-end browser tests.
source_url:
  html: https://testingbot.com/resources/articles/cypress-cucumber-testing
  md: https://testingbot.com/resources/articles/cypress-cucumber-testing.md
---

![Cypress and Cucumber Browser Testing](https://testingbot.com/assets/resources/articles/6.webp)

# Automated Testing with Cypress and Cucumber

Cypress and Cucumber is a great combination to write clean and precise end-to-end browser tests.

By [Jochen D.](https://testingbot.com/about/jochen-d)2021-08-20

 Share on Facebook 

 Share on Twitter 

 Post on Reddit 

 Share link 

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.

## Table of Contents

- [What is the Cypress Framework?](https://testingbot.com#introduction)
- [What is Cucumber Testing?](https://testingbot.com#cucumber)
- [Integrate Cypress and Cucumber](https://testingbot.com#integration)
- [Cucumber and Cypress Text Example](https://testingbot.com#example)
- [Cucumber, Cypress and Typescript](https://testingbot.com#typescript)

## 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:

```bash
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).

```javascript
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:

```json
{
  "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:**

```yaml
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`

```javascript
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:

```bash
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](https://testingbot.com/support/cypress) 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:

```javascript
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:

```javascript
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:

```bash
cypress run --spec **/*.features
```

## Sidebar

### TestingBot Cloud Testing

Run automated, manual and visual tests on remote browsers and devices. Sign up for a free trial.

[Free Trial](https://testingbot.com/users/sign_up)

### Latest articles

[![TestNG automation with Selenium](https://testingbot.com/assets/resources/articles/5-46a5444bcdd6b07d6bbe8e9e58be5093fe3aaa8d1a7939b89291d7173d4e4c74.webp)](https://testingbot.com/resources/articles/testng-selenium)

#### [TestNG automation with Selenium](https://testingbot.com/resources/articles/testng-selenium)

TestNG is a popular Java Test Framework which allows you ...

[Read article →](https://testingbot.com/resources/articles/testng-selenium)

[![blank](https://testingbot.com/assets/blank-765bda2d39d03b623c68515d78259503eb9ca884105d9fff58b2693418720ea1.gif)](https://testingbot.com/resources/articles/cross-browser-testing-competitors)

#### [TestingBot vs Browserstack and SauceLabs - Competitor analysis](https://testingbot.com/resources/articles/cross-browser-testing-competitors)

Why would you choose TestingBot instead of an other compa...

[Read article →](https://testingbot.com/resources/articles/cross-browser-testing-competitors)

[![blank](https://testingbot.com/assets/blank-765bda2d39d03b623c68515d78259503eb9ca884105d9fff58b2693418720ea1.gif)](https://testingbot.com/resources/articles/automated-testing)

#### [Automated website testing with TestingBot and Selenium](https://testingbot.com/resources/articles/automated-testing)

With a large number of different browsers platforms and m...

[Read article →](https://testingbot.com/resources/articles/automated-testing)

## Other Articles

[![TestNG automation with Selenium](https://testingbot.com/assets/resources/articles/5-46a5444bcdd6b07d6bbe8e9e58be5093fe3aaa8d1a7939b89291d7173d4e4c74.webp)](https://testingbot.com/resources/articles/testng-selenium "TestNG automation with Selenium")

### [TestNG automation with Selenium](https://testingbot.com/resources/articles/testng-selenium)

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

[Read article →](https://testingbot.com/resources/articles/testng-selenium)

[![blank](https://testingbot.com/assets/blank-765bda2d39d03b623c68515d78259503eb9ca884105d9fff58b2693418720ea1.gif)](https://testingbot.com/resources/articles/cross-browser-testing-competitors "TestingBot vs Browserstack and SauceLabs - Competitor analysis")

### [TestingBot vs Browserstack and SauceLabs - Competitor analysis](https://testingbot.com/resources/articles/cross-browser-testing-competitors)

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

[Read article →](https://testingbot.com/resources/articles/cross-browser-testing-competitors)

[![blank](https://testingbot.com/assets/blank-765bda2d39d03b623c68515d78259503eb9ca884105d9fff58b2693418720ea1.gif)](https://testingbot.com/resources/articles/automated-testing "Automated website testing with TestingBot and Selenium")

### [Automated website testing with TestingBot and Selenium](https://testingbot.com/resources/articles/automated-testing)

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 article →](https://testingbot.com/resources/articles/automated-testing)

[![blank](https://testingbot.com/assets/blank-765bda2d39d03b623c68515d78259503eb9ca884105d9fff58b2693418720ea1.gif)](https://testingbot.com/resources/articles/why-automated-testing "Why Automated Testing Matters")

### [Why Automated Testing Matters](https://testingbot.com/resources/articles/why-automated-testing)

A single piece of botched code in the wrong place can cost your company millions of dollars, and if it's not reported in good time, it can potentially break the back of your business.

[Read article →](https://testingbot.com/resources/articles/why-automated-testing)

## Ready to start testing?
[Start a free trial](https://testingbot.com/users/sign_up)