@badeball/cypress-cucumber-preprocessor

What is @badeball/cypress-cucumber-preprocessor?

@badeball/cypress-cucumber-preprocessor is a plugin for Cypress that allows you to use Cucumber syntax for writing your end-to-end tests. It enables you to write tests in a more human-readable format using Gherkin language, which can improve collaboration between developers, testers, and non-technical stakeholders.

What are @badeball/cypress-cucumber-preprocessor's main functionalities?

Writing Gherkin Scenarios

This feature allows you to write test scenarios in Gherkin syntax, which is a human-readable language. The example demonstrates a simple login scenario.

Feature: Login functionality

  Scenario: Successful login
    Given I am on the login page
    When I enter valid credentials
    Then I should be redirected to the dashboard

Step Definitions

This feature allows you to define the steps for your Gherkin scenarios using JavaScript. The example shows how to implement the steps for the login scenario.

import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';

Given('I am on the login page', () => {
  cy.visit('/login');
});

When('I enter valid credentials', () => {
  cy.get('input[name="username"]').type('user');
  cy.get('input[name="password"]').type('password');
  cy.get('button[type="submit"]').click();
});

Then('I should be redirected to the dashboard', () => {
  cy.url().should('include', '/dashboard');
});

Data-Driven Testing

This feature allows you to run the same scenario with different sets of data using the Scenario Outline and Examples keywords. The example demonstrates how to test unsuccessful login attempts with different credentials.

Feature: Login functionality

  Scenario Outline: Unsuccessful login
    Given I am on the login page
    When I enter <username> and <password>
    Then I should see an error message

    Examples:
      | username | password |
      | user1    | wrongpass|
      | user2    | wrongpass|
      | user3    | wrongpass|

Other packages similar to @badeball/cypress-cucumber-preprocessor

cypress-cucumber-preprocessor

cypress-cucumber-preprocessor is another plugin for integrating Cucumber with Cypress. It provides similar functionality to @badeball/cypress-cucumber-preprocessor, allowing you to write Gherkin syntax for your tests. However, @badeball/cypress-cucumber-preprocessor is a fork of this package and may have additional features or improvements.

jest-cucumber

jest-cucumber is a package that allows you to use Cucumber with Jest, a popular JavaScript testing framework. While it provides similar Gherkin syntax support, it is designed for unit and integration testing rather than end-to-end testing like Cypress.

README

cypress-cucumber-preprocessor

Quick start • Documentation • Contributing

This preprocessor aims to provide a developer experience and behavior similar to that of Cucumber, to Cypress.

:information_source: The repositor has recently moved from github.com/TheBrainFamily to github.com/badeball. Read more about the transfer of ownership here.

Installation

$ npm install @badeball/cypress-cucumber-preprocessor

Introduction

The preprocessor (with its dependencies) parses Gherkin documents and allows you to write tests as shown below.

# 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"
  );
});

Building

Building can be done once using:

$ npm run build

Or upon file changes with:

$ npm run watch

There are multiple types of tests, all ran using npm scripts:

$ npm run test:fmt
$ npm run test:types
$ npm run test:unit
$ npm run test:integration # make sure to build first
$ npm run test # runs all of the above

Attribution

A special thanks goes out to Łukasz Gandecki for developing and maintaning the cypress-cucumber integration before me, in addition to all other contributors. Some of the work has partially been sponsored by Klaveness Digital.