In Our previous posts, we already learnt How to create a Cypress-Cucumber framework with a Page Object Model. In this article, we will learn how to generate a beautiful HTML report in Cypress framework. This will help us in identifying the bugs and errors way faster.
Please Read the below articles related to Cypress E2E framework if not read them already.
Cypress is a javascript-based framework and is widely used, so there are multiple options to generate Reports.
By default, spec reporter is used by Cypress, but in this article, we will learn 3 popular reporter plugin integrations with Cypress framework.
- Mochawesome Reporter
- Cucumber HTML reporter
- Allure Reporter
1)How to create a Mochawesome HTML Report In Cypress
Cypress is built on top of Mocha so that any mocha-based reporter can be integrated with Cypress easily.
a) Installation Of the Mochawesome Reporter plugin
The first step is to install the Mochawesome reporter plugin in our test framework. Use the below command on the terminal to install it.
npm i --save-dev cypress-mochawesome-reporterOnce the required dependency is installed, we need to configure our framework to utilize this dependency.
b) Configuration Of the Mochawesome Reporter
Go to Cypress. config.js file and under the module. export add Mochawesome reporter to it.
module.exports = defineConfig({
reporter: 'cypress-mochawesome-reporter'
)}async function setupNodeEvents(on, config) {
await preprocessor.addCucumberPreprocessorPlugin(on, config);
on("file:preprocessor", browserify.default(config));
require('cypress-mochawesome-reporter/plugin')(on);
return config;
}Add require dependency under setupNodeEvents functions as mentioned in the above code snippet.
Your config.js should look like the below image.
Next, go to the support folder in the project path and open e2e.js. Add import statement inside e2e.js file.
import 'cypress-mochawesome-reporter/register';add below custom options under the “reporterOptions” tag to generate an HTML Mochaesome report.
module.exports = defineConfig({
reporter: 'cypress-mochawesome-reporter',
reporterOptions: {
reportDir:'cypress/mochawesomeresults',
charts: true,
reportPageTitle: 'custom-title',
embeddedScreenshots: true,
inlineAssets: true,
saveAllAttempts: false,
debug: true
})reportDir is the location where reports are to be saved.
embeddedScreenshots =true, if you want to embed screenshots in the report. Make it false otherwise.
reportPageTitle Custome Title/ Name of your report.
saveAllAttempts = true, Saves screenshots of all attempts. Make it “false” to save screenshots of only the last attempt.
debug = true, create logs file.
c) Execution
The final step is to execute your tests using the npx cypress run. Refresh the project and observe that a folder is generated with the name “mochawesomeresults” in the project. Open this folder, an index.html file is present inside this folder.
Go to the path and open the generated report in the browser. We can see a beautiful HTML report with attached screenshots along with the details of passed and failed scenarios. Additionally, it displays the time taken to execute a particular scenario.
2) How to generate a Cucumber HTML Report in Cypress Cucumber Framework
Another type of report is the Cucumber HTML report. This report is suitable for the BDD Framework. This has a rich User interface and is easily customizable.
To generate a Cucumber HTML report we will be using a plugin named “multiple-cucumber-html-reporter” plugin. You can use the Mochawesome report as discussed in the above section as well or if you want a more beautiful, customized, and elegant report for your Cucumber Cypress framework you can follow the below-mentioned steps.
a) Installation of Plugin
First install the “Cypress-cucumber-preprocessor ” plugin, if not installed already.
npm install @badeball/cypress-cucumber-preprocessorNext download and install the “Cucumber-json-formatter” from here. This tool generates JSON from cucumber messages. keep it in your project path and verify if it is successfully installed or not by using below mentioned command.
cucumber-json-formatter --helpb) Configuration
Navigate to “cypress.config.js” and add this configuration under the cucumber preprocessor node to generate a JSON report.
"cypress-cucumber-preprocessor": {
"stepDefinitions": "cypress/e2e/bdd-cucumber/step-defination/*.js",
"filterSpecs": true,
"omitFiltered": true,
"json": {
"enabled": true,
"formatter": "cucumber-json-formatter",
"output": "cypress/reports/json/cucumber-report.json"
}
}Now execute the test and refresh the project. Verify that a JSON report is outputted to cucumber-report.json in the output folder of the project directory.
In the Next step, we need a plugin to convert JSON output to HTML report, For this task install multiple cucumber HTML reporter plugins.
npm install multiple-cucumber-html-reporter --save-devThis plugin transforms the cucumber JSON into HTML reports. Create a new js file in the project path, name it “html-report.js” and add the below code in this file.
const report = require("multiple-cucumber-html-reporter");
report.generate({
jsonDir: "./cypress/reports/json",
reportPath: "./cypress/reports/html",
metadata: {
browser: {
name: "chrome",
version: "60",
},
device: "Local test machine",
platform: {
name: "mac",
version: "16.04",
},
},
customData: {
title: "Run info",
data: [
{ label: "Project", value: "AQH project" },
{ label: "Release", value: "1.2.3" },
{ label: "Execution Start Time", value: "May 25th 2023, 02:31 PM IST" },
{ label: "Execution End Time", value: "May 25th 2023, 02:56 PM IST" },
],
},
});Under the report. generate node provides the path of the JSON file that is to be read and converted into HTML. Then add a Report path where the converted HTML file will be stored.
You can customize this js file as per your requirements. You can add more labels under the Custom Data section or add more metadata to display in the reports. Now Save this file and execute it using node.
node html-report.js
After successful execution, a beautiful HTML report is generated in the report path. Open this report in any browser and see the summary.
Screenshots are attached in this report by default in case of test failure. You can change the theme of this report by just toggling. Expand any Feature and we can see detailed information on every step.
3) How to Integrate Allure Report With Cypress
Allure is a flexible, easy-to-use, multi-language reporting framework. It can be integrated with Java, Python, JavaScript, Ruby, .Net, PHP, Scala and Kotlin-based frameworks.
It is a very popular reporter and many of us have used it extensively in Java-based test automation frameworks. In this section, we will see how to integrate allure with the Cypress framework.
a) Installation Of Allure in Cypress Framework
For allure report integration, first, install the allure server on your local machine. You can install it locally by downloading and installing using a ZIP file or you can install it using the terminal.
MAC installation
Brew Install Allure The next step is the installation of the Cypress-Allure plugin in our framework using the command line. Execute the below command on the Cypress terminal.
npm i -D @shelex/cypress-allure-pluginThis will add the cypress-allure dependency in the package.json file.
b) Configuration of Allure Plugin in Cypress
Next, open the “cypress.config.js” file and add the plugin.
const allureWriter = require('@shelex/cypress-allure-plugin/writer');Under module. export add below code:
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
allureWriter(on, config);
return config;
}
}
});Add support for the allure report plugin in the e2e.js file. Go to the project path and open the support folder. Open the e2e.js file and add support for the cypress-allure-plugin.
import '@shelex/cypress-allure-plugin';c) Execute Allure HTML Report in Cypress
To enable Allure results writing just pass the environment variable allure=true, example:
npx cypress run --env allure=true "scripts": {
"test": "npm run ui-test-allure",
"ui-test-allure":"cypress run --browser chrome --env allure=true",
},Add the above-mentioned script inside your package.json file and execute the “npm run test” command. After successful execution, a folder will be generated in the project path name as “allure-results”. This will contain all the resulting JSON.
Now add one more property in the package.json file under the scripts tag.
"allure:report" :"allure generate allure-results --clean -o allure-reports"so the final script tag will look like the below code.
"scripts": {
"test": "npm run ui-test-allure",
"ui-test-allure":"cypress run --browser chrome --env allure=true",
"allure:report" :"allure generate allure-results --clean -o allure-reports"
},Now execute the below command.
npm run allure:reportThis command will read the JSON files inside the “allure-results” folder. After the successful execution of this command, a new folder named “allure-reports” will be generated. This folder includes all the information and the index.html report.
To serve this allure report execute the command mentioned below.
allure openThis command will serve the generated “index.html report” from the “allure-report” folder to your local allure server, which you set up initially. You can see the different charts and graphs provided by Allure reports.