Base template for end-to-end testing using Gherkin, Cucumber, and Cypress.

Introduction

Template where Cypress & Cucumber is already integrated. This repository acts externally, you only need to provide the path of the system or website in the environment to use it.

The main benefit of using it as an external project is that it can be coupled with any other framework and that it also does not add more load to the real project, that is, to the application itself, since it does not install any package or dependency because it acts as an independent project.

Importance

End-to-end (E2E) testing is crucial in application development because it ensures that all components of the application work together correctly, just as they would in a production environment. Using tools such as Gherkin, Cucumber, and Cypress, test scenarios can be defined and automated in natural language, facilitating understanding and collaboration between developers and stakeholders. These tests help identify integration issues and user flows that might not be detected in unit or integration tests, ensuring a consistent and functional user experience.

Steps

npm install

Execution

npm run cypress:open

Feature Example

# language: es

Característica: Iniciar sesión

Escenario: Iniciar sesión con éxito

Dado que abro la página de login

Cuando tipeo "admin" en el campo de usuario

Y tipeo "admin" en el campo de contraseña

Y doy click en el botón de login

Entonces debería ver la página de dashboard

Step Example

import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";

Given("I open the login page", () => { cy.visit("https://www.google.com/"); });

When("I type {string} in the username field", (username) => { cy.get("#username").type(username); });

When("I type {string} in the password field", (password) => { cy.get("#password").type(password); });

When("I click on the login button", () => { cy.get("#login-button").click(); });

Then("I should see the dashboard page", () => { cy.get("#dashboard").should("be.visible"); });

Github: https://github.com/NeisserMS/Cypress_Cucumber_Template