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.
cypress-cucumber-preprocessor
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
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.