Setup

Table of Contents

• Prerequisites
• Install
• Setup cypress
• Setup cypress-cucumber-preprocessor
• Setup cypress-cucumber-steps
• Setup IDE

Prerequisites

• Node.js
• NPM or Yarn

Install

Dependencies:

• cypress
• @badeball/cypress-cucumber-preprocessor
• @bahmutov/cypress-esbuild-preprocessor
• cypress-cucumber-steps

Install with NPM:

npm install --save-dev cypress @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor cypress-cucumber-steps

Or with Yarn:

yarn add --dev cypress @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor cypress-cucumber-steps

Setup cypress

Open Cypress:

npx cypress open

Click E2E Testing:

Setup cypress-cucumber-preprocessor

Follow cypress-cucumber-preprocessor's quick start.

If you're using TypeScript, update cypress.config.ts:

import { defineConfig } from 'cypress';
import createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
import createEsbuildPlugin from '@badeball/cypress-cucumber-preprocessor/esbuild';

export default defineConfig({
  e2e: {
    specPattern: 'cypress/e2e/**/*.feature',
    async setupNodeEvents(on, config) {
      await addCucumberPreprocessorPlugin(on, config);
      on(
        'file:preprocessor',
        createBundler({ plugins: [createEsbuildPlugin(config)] })
      );
      return config;
    },
  },
});

Or if you're using JavaScript, update cypress.config.js:

const { defineConfig } = require('cypress');
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor');
const createEsbuildPlugin = require('@badeball/cypress-cucumber-preprocessor/esbuild');

export default defineConfig({
  e2e: {
    specPattern: '**/*.feature',
    async setupNodeEvents(on, config) {
      await addCucumberPreprocessorPlugin(on, config);
      on(
        'file:preprocessor',
        createBundler({ plugins: [createEsbuildPlugin(config)] })
      );
      return config;
    },
  },
});

Setup cypress-cucumber-steps

Create a directory for the common step definitions:

mkdir -p cypress/support/step_definitions/

If you're using TypeScript, create cypress/support/step_definitions/index.ts:

import 'cypress-cucumber-steps';

Or if you're using JavaScript, create cypress/support/step_definitions/index.js:

require('cypress-cucumber-steps');

Optionally, if you're using TypeScript, create cypress/tsconfig.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "target": "es2021",
    "types": ["cypress"]
  },
  "include": ["../node_modules/cypress", "./**/*.ts"],
  "exclude": ["node_modules"]
}

Now you can use cypress-cucumber-steps in your feature files:

# cypress/e2e/example.feature
When I visit "https://example.com/"
Then I see text "Example Domain"

See docs and examples.

Setup IDE

Set up code editor.