Setup

Table of Contents

• Prerequisites
• Install
• Setup cypress
• Setup TypeScript
• 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 cypress

Open Cypress:

npx cypress open

Click E2E Testing:

Setup TypeScript

Install with NPM:

npm install --save-dev typescript

Or install with Yarn:

yarn add --dev typescript

Create cypress/tsconfig.json:

touch cypress/tsconfig.json

Update cypress/tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "esnext"],
    "moduleResolution": "nodenext",
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["./**/*.ts"]
}

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';
import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
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,
  // },
});

Or 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 cypress/e2e/
touch cypress/e2e/example.feature

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

See docs and examples.

Setup IDE

Set up your code editor.