💻Setup Cypress v10 E2E testing

Installing

First is navigate to your intended directory and initialized npm by:

npm init

This will create a package.json file on your directory.

Next is to install Cypress via npm:

npm install cypress --save-dev

This will install Cypress locally as a dev dependency for your project.

Running the test with the command below will open the cypress test window:

npx cypress open

Notice that node_modules and cypress folder will be added in the directory as well as other files like cypress-config.js

Now that cypress is installed we can proceed to installation of cucumber plugins and Typescript.

To install Typescript, execute this command:

npm install typescript --save-dev

Initialized typescript by running:

npx tsc --init

This is to define and create your tsconfig file.

Change your tsconfig.json with this configuration:

{
  "compilerOptions": {
    "target": "es2020",

    "module": "commonjs",
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitAny": true,
    "removeComments": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowJs": true,
    "types": ["cypress","node"],
    "lib": ["es2020", "dom"]
  },
  "include": ["**/*.ts"]
}

Next is to install Cypress cucumber preprocessor

npm install @badeball/cypress-cucumber-preprocessor

In version 10, plugins File is removed because Cypress now supports JavaScript and TypeScript configuration files, a separate "plugins file" (which used to default to cypress/plugins/index.js)

Support for the plugins file has been removed, and it has been replaced with the new setupNodeEvents() and devServer config options. If you wan't to read further about the depreciation of plugins file follow this link.

Global step definitions exaple

{
  "name": "my project",
  "depdendencies": {},
  "devDepdendencies": {},
  "cypress-cucumber-preprocessor": {
    "stepDefinitions": "cypress/support/step_definitions/**/*.{js,ts}"
  }
}

Step definitions besides scenario

{
  "name": "my project",
  "depdendencies": {},
  "devDepdendencies": {},
  "cypress-cucumber-preprocessor": {
    "stepDefinitions": "cypress/integration/[filepath].{js,ts}"
  }
}

Step definitions in a directory besides the scenario

{
  "name": "my project",
  "depdendencies": {},
  "devDepdendencies": {},
  "cypress-cucumber-preprocessor": {
    "stepDefinitions": "cypress/integration/[filepath]/**/*.{js,ts}"
  }
}

Combination of all of the above (default)

{
  "name": "my project",
  "depdendencies": {},
  "devDepdendencies": {},
  "cypress-cucumber-preprocessor": {
    "stepDefinitions": [
      "cypress/integration/[filepath]/**/*.{js,ts}",
      "cypress/integration/[filepath].{js,ts}",
      "cypress/support/step_definitions/**/*.{js,ts}"
    ]
  }
}

Installing of bundler Browserify and Webpack

Browesrify-ts installation:

npm install --save-dev @cypress/browserify-preprocessor

And add this under cypress-config.ts file.

import { defineConfig } from "cypress";
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
import browserify from "@badeball/cypress-cucumber-preprocessor/browserify";

async function setupNodeEvents(
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
  await addCucumberPreprocessorPlugin(on, config);

  on(
    "file:preprocessor",
    browserify(config, {
      typescript: require.resolve("typescript"),
    })
  );

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}

export default defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    setupNodeEvents,
  },
});ter

Webpack-ts installation:

npm install --save-dev @cypress/webpack-preprocessor

npm install --save-dev ts-loader

And add this under cypress-config.ts file.

import { defineConfig } from "cypress";
import webpack from "@cypress/webpack-preprocessor";
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";

async function setupNodeEvents(
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
  await addCucumberPreprocessorPlugin(on, config);

  on(
    "file:preprocessor",
    webpack({
      webpackOptions: {
        resolve: {
          extensions: [".ts", ".js"],
        },
        module: {
          rules: [
            {
              test: /\.ts$/,
              exclude: [/node_modules/],
              use: [
                {
                  loader: "ts-loader",
                },
              ],
            },
            {
              test: /\.feature$/,
              use: [
                {
                  loader: "@badeball/cypress-cucumber-preprocessor/webpack",
                  options: config,
                },
              ],
            },
          ],
        },
      },
    })
  );

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}

export default defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    setupNodeEvents,
  },
});

Install cucumber-json-formatter

npm install -g @deepakvishwakarma/cucumber-json-formatter

And add this at package.json

  "cypress-cucumber-preprocessor": {
    "json": {
      "enabled": true,
      "formatter": "cucumber-json-formatter"
    }
  }

Now that everything are set, we can start writing our test.

Write a test

Write Gherkin documents and add a file for type definitions with a corresponding name (read more about how step definitions are resolved in docs/step-definitions.md). Reading docs/cucumber-basics.md is highly recommended.

# cypress/e2e/duckduckgo.feature
Feature: duckduckgo.com
  Scenario: visiting the frontpage
    When I visit duckduckgo.com
    Then I should see a search bar

// cypress/e2e/duckduckgo.ts
import { When, Then } from "@badeball/cypress-cucumber-preprocessor";

When("I visit duckduckgo.com", () => {
  cy.visit("https://www.duckduckgo.com");
});

Then("I should see a search bar", () => {
  cy.get("input").should(
    "have.attr",
    "placeholder",
    "Search the web without being tracked"
  );
});

Running a test in browserless mode:

npx cypress run --browser chrome

Running the test with browser that directs into the spec file:

npx cypress run --browser chrome --e2e

For further details and changes about the migration, your can read it in here.