Cypress Cucumber via Cucumber JSON Report

AIO Tests supports importing Cypress Cucumber results in 2 ways:

1. AIO Tests Cypress Reporter - An NPM package plugin for Cypress. As a cypress plugin, it can be configured to report results to AIO Tests directly from cypress.

2. Via Cucumber.json Report- The Cypress Cucumber preprocessor not only helps to run Cucumber tests in Cypress but also generates a JSON report compatible with AIO Tests.

Using the Cypress Cucumber report, scenarios can be mapped to existing cases or new ones can be created from the Cucumber results JSON file.
This document provides an overview of how you can generate the Junit report from Cypress runs and upload it to AIO Tests.

In this documentation, you’ll understand:

Required Cypress Setup

1. Node.js 12 or 14 and above

2. cd /your/project/path

3. npm init

4. npm install cypress --save-dev

5. npm install @badeball/cypress-cucumber-preprocessor

6. Download Cucumber Standalone JSON Formatter

7. Configure your preferred bundler to process feature files. See examples/ for how-to using Browserify, Esbuild or Webpack.

8. For the current example, we would be using Webpack.

Sample package.json dependencies:

Sample Cucumber Scenario

Gherkin uses a set of keywords to formalize a behavior. Most lines start with one of the keywords.

Cucumber tests can be structured as Features. A feature can look at encapsulating a particular functionality of a system.

Features are made of Scenarios, which are essentially different user flows of the functionality being tested.

Scenarios are made of Steps. Each step starts with Given, When, Then or And.

Running Cucumber Tests

1. Configure specPattern with "**/*.feature", in cypress.config.js.

   import { defineConfig } from "cypress"; export default defineConfig({ e2e: { specPattern: "**/*.feature" } });

2. Configure your preferred bundler to process feature files. The below example uses Webpack.

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

3. Run your tests cypress run --spec cypress/e2e/*

Generating Cucumber.json Report

1. This requires you to have downloaded and installed the cucumber-json-formatter as shown in the setup. Add the downloaded formatter to your PATH.

2. JSON reports can be enabled using the json.enabled property in package.json. Add the below to your package.json.

   //./package.json "cypress-cucumber-preprocessor": { "json": { "enabled": true } }

3. Register the cypress-cucumber-preprocessor module in your cypress.config.js as below:

The report is written to cucumber-report.json in the project directory but can be configured through the json.output property.

Consolidated Cypress config File

Screenshots in Report

Screenshots are automatically added to JSON reports, including those of failed tests (unless you have disabled screenshotOnRunFailure). However, while importing, AIO Tests only import artifacts for failed cases.

Cucumber Sample JSON Report

The JSON report generated by Cucumber gives a detailed step-by-step report as follows :

Status Mapping Cucumber → AIO Tests

To understand the status mapping from Cucumber results to AIO Tests run statuses, click here.

Mapping Cucumber tests to AIO Tests

To understand how to map automated cases to cases in AIO Tests, click here.

Importing Results

Post execution of cucumber tests, the result file can be imported to AIO Tests via the REST APIs or the Jenkins plugin or manually via the Cycles screen. Read about all possible options @ Importing Results in AIO Tests.

For further queries and suggestions, feel free to reach out to our customer support via help@aiotests.com.