proskynete / cypress-cucumber-boilerplate

A boilerplate designed to run e2e tests using TS, Gherkins and Linter, generating a report at the end of the execution

Cypress Cucumber Boilerplate

https://img.shields.io/coverallsCoverage/github/proskynete/node-api-skeleton

Table of contents

1. Description
2. Getting Started
3. How to use
4. Folder Structure

👀 Description

This project will allow you to have a starting point to create end-to-end tests using a very complete suite.

🔝

⚙️ Getting Started

Technologies used and that are necessary prior to installation:

• Node JavaScript runtime (I recommend using nvm to manage multiple versions of node).
• TypeScript TypeScript compiler.
• Eslint TypeScript linter.
• Cypress End-to-End testing runner.
• Testing Library Testing utilities that encourage good testing practices.
• Cucumber Cucumber is a tool that supports Behaviour-Driven Development (BDD).
• Gherkin The syntax that Cucumber understands to run the tests.
• Cucumber JSON Formatter Convert Cucumber messages into a JSON document. (Please follow the instructions to install this in your computer)
• Multiple Cucumber Html Reporter Transform Cucumber JSON output to beautiful HTML report.

🔝

💪 How to use

Scripts	Description
start:open	Will open the Cypress interface to run the tests.
start	Will run the tests headless.
start:report	It will create the report using the information of the tests already executed.
lint	It will review the syntax of the tests (step_definitions folder).
lint:fix	It will fix tests that can be fixed automatically.

🔝

👾 Folder structure

The following folder structure shows only the most important folders.

.
├── cypress/
│   ├── downloads/
│   ├── e2e/
│   │   ├── features/                         # Features folder.
│   │   │   ├── {domain}/                     # Domain folder.
│   │   │   │   └── {feature}.feature         # Feature 1 file.
│   │   │   └── {domain}/                     # Domain folder.
│   │   │   │   └── {feature}.feature         # Feature 2 file.
│   │   └── ├── step_definitions/             # Step definitions folder.
│   │   │   ├── {domain}/                     # Domain folder.
│   │   │   │   └── {step_definition}.cy.ts   # Step definition 1 file.
│   │   └── └── {domain}/                     # Domain folder.
│   │           └── {step_definition}.cy.ts   # Step definition 2 file.
│   ├── support/
│   │   ├── commands.js
│   │   └── e2e.js
│   ├── fixtures/
│   ├── screenshots/                          # Folder with the screenshots of the failed tests
│   ├── support/
│   └── videos/                               # Folder with the videos of the failed tests
├── jsonlogs/                                 # This folder is used to store the JSON logs generated by the tests.
├── reports/                                  # This folder is created by the start:report command.
├── .cypress-cucumber-preprocessorrc.json     # Configuration file for the cucumber preprocessor.
├── cypress.config.js                         # Configuration file for the Cypress interface.
├── generate/report/config.js                 # Configuration file for the report generator.
└── ...

🔝

License

GPL-3.0 - Eduardo Esteban Álvarez Castañeda