Setup

Table of Contents

• Prerequisites
• Install
• Setup TypeScript
• 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 install with Yarn:

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

Setup TypeScript (Optional)

Install with NPM:

npm install --save-dev typescript

Or install with Yarn:

yarn add --dev typescript

Create cypress/tsconfig.json:

mkdir -p cypress && touch cypress/tsconfig.json

Add to cypress/tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "esnext"],
    "moduleResolution": "nodenext",
    "strict": true,
    "skipLibCheck": true
  }
}

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 { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
// @ts-expect-error Cannot find module or its corresponding type declarations.
import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
// @ts-expect-error Module can only be default-imported using the 'esModuleInterop' flag
import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    // baseUrl: 'http://localhost:3000',
    specPattern: '**/*.feature',
    async setupNodeEvents(
      on: Cypress.PluginEvents,
      config: Cypress.PluginConfigOptions
    ): Promise<Cypress.PluginConfigOptions> {
      await addCucumberPreprocessorPlugin(on, config);
      on(
        'file:preprocessor',
        createBundler({ plugins: [createEsbuildPlugin(config)] })
      );
      return config;
    },
  },
  // defaultCommandTimeout: 5000,
  // retries: {
  //   runMode: 3,
  // },
});

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

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

export default defineConfig({
  e2e: {
    // baseUrl: 'http://localhost:3000',
    specPattern: '**/*.feature',
    async setupNodeEvents(on, config) {
      await addCucumberPreprocessorPlugin(on, config);
      on(
        'file:preprocessor',
        createBundler({ plugins: [createEsbuildPlugin(config)] })
      );
      return config;
    },
  },
  // defaultCommandTimeout: 5000,
  // retries: {
  //   runMode: 3,
  // },
});

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:

echo "import 'cypress-cucumber-steps';" > cypress/support/step_definitions/index.ts

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

echo "require('cypress-cucumber-steps');" > cypress/support/step_definitions/index.js

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

mkdir -p cypress/e2e && touch cypress/e2e/example.feature

Update cypress/e2e/example.feature:

Feature: Example
  Scenario: Visit example site
    Given I visit "https://example.com/"
    Then I see text "Example Domain"

See the docs and examples.

Scripts

Create a package.json script:

"cypress:open": "cypress open"

Which allows you to open Cypress with NPM:

npm run cypress:open

Or Yarn:

yarn cypress:open

Setup IDE

Set up your code editor.