Cypress with Mochawesome, CucumberReprots and Grafana
Hello Readers,
We previously touched on reporting, but now we’re going to take a deeper dive into it and explore the various ways to generate reports in Cypress.
Cypress in 100 words
Cypress is a JavaScript-based open-source end-to-end testing framework for web applications. It offers web engineers a quick, dependable, and simple testing solution for writing automated tests that mimic user actions and interactions with the application. Cypress is built to operate in the browser and supports real-time debugging and code modification, making it simple to find and resolve bugs in your application. Cypress also includes a robust API that supports complicated test scenarios and connects with other tools like CI/CD pipelines and continuous testing platforms. It is frequently used in the web development community to assure web application quality and functionality.
Reporting in Cypress
Cypress Dashboard Service has to be set up to create a link between Cypress tests running in our system and the dashboard which is hosted on the cloud.
The features of Cypress Dashboard are explained below −
- It provides data on the total number of passed, failed and skipped test cases.
- The stack trace and screenshots of the failed tests are available.
- The video of test execution is available.
- Management of test data, framework and their access is possible.
- The usage trends in the organization is provided.
We have established a connection between our framework and the dashboard, so whenever you execute your test suite, you can access detailed reports on the cloud-based dashboard.
Now, let's discuss some other popular reporting features available in the community. These are well-liked because they are free and straightforward to use.
- Mochawesome reports
Mochawesome is a custom reporter for use with the Javascript testing framework, mocha. It runs on Node.js (>=8) and works in conjunction with mochawesome-report-generator to generate a standalone HTML/CSS report to help visualize your test runs.
Installation Process
npm install --save-dev mochawesome
Once you install the package, You can generate these reports by using reporter flag when running tests.
cypress run --reporter mochawesomeand, instead of passing the commands using cli, you can add configuration to cypress.config.js file. To define which reporter to use, we will need to add reporter property.
const { defineConfig } = require('cypress');
module.exports = defineConfig({
reporter: 'mochawesome',
// ...rest of the config
}
Above some script will helpful while the test execution so add these commands under scripts in package.json.
Finally, we can generate HTML reports after the execution is complete by running a command in the terminal.
2. Multiple-cucumber-html-reporter with cypress cucumber framework
As we all know reporting is the very important part of any Automation framework. Cypress with mocha(default framework) is having multiple reporting tools like mochawesome, allure report etc but configuration of these reports are almost impossible or inefficient while working with cypress-cucumber framework. So here we will see the integration of Multiple-cucumber-html-reporter with cypress cucumber framework.
Multiple-cucumber-html-reporter creates the html report from the cucumber.json files. So, lets start first with how to get cucumber.json file then we will look about the final report.
Installation Process
npm i multiple-cucumber-html-reporterOnce the package is installed, we need to configure the reports in the configuration file so that Cypress recognizes we are using the report, and ensures the reports are generated after the test execution.
Step 2) Add cucumber Json report enabling script in cypress.config.js file-
const { defineConfig } = require("cypress");
const cucumber = require("cypress-cucumber-preprocessor").default;
module.exports = defineConfig({
video: false, // This enables video recording
videosFolder: "cypress/videos", // Folder where videos will be saved
videoCompression: 32, // Compression level (0 for no compression)
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
on('file:preprocessor',cucumber())
},
specPattern:"cypress/e2e/features/*.feature",
cucumberJson: {
generate: true,
outputFolder: "cypress/reports/cucumber-json", // Output folder for the JSON files
filePrefix: "",
fileSuffix: ".cucumber"
},
viewportWidth: 1280, // Set the default viewport width
viewportHeight: 720, // Set the default viewport height
},
});Create cucumber-html-report.js file to the root of the project(not inside cypress folder) and add below code in that file-
const report = require('multiple-cucumber-html-reporter');
const moment = require('moment');
const executionStartTime = moment().format('MMMM Do YYYY, h:mm:ss A');
const executionEndTime = moment().add(30, 'minutes').format('MMMM Do YYYY, h:mm:ss A');
report.generate({
jsonDir: 'cypress/reports/cucumber-json/',// Path of cucumber json file
reportPath: 'cypress/reports/cucumber-html',//path of required report
reportTitle: 'Latest Execution',
overwrite: true,
metadata:{
browser: {
name: 'chrome',
version: '60'
},
device: 'Local test machine',
platform: {
name: 'ubuntu',
version: '16.04'
}
},
customData: {
title: 'Run info',
data: [
{label: 'Project', value: 'Custom project'},
{label: 'Release', value: '1.2.3'},
{label: 'Cycle', value: 'B11221.34321'},
{label: 'Execution Start Time', value: executionStartTime},
{label: 'Execution End Time', value: executionEndTime}
]
}
});Now just fire the below commands and verify the html reports.
npx cypress run
npx cypress run --headedNow, you can find the reports in the specified path within the cypress.config file. Simply navigate to that location and open the index.html file.
Cypress supports API testing, and we may need to monitor the health of each API. To achieve this, we can utilize different reports that provide insights based on the API’s performance. Specifically, we’re discussing the integration of Cypress with Grafana to visualize these reports.
So, here is my challenge! My team deals with loads of APIs and wanted a real time API Monitoring System to check the health of the environments. We know Cypress does support API testing to a great extent and I want to use its powerful features to build a API framework to monitor the APIs.
Being a fanatic on building monitoring frameworks, I choose Grafana to be my tool for displaying the live status and statistics. I use simple and neat, InfluxDB as my database to store my API test results which I will fetch later in my Grafana dashboard.
Install InfluxDB
sudo apt-get install influxdb
sudo systemctl start influxdb
influx ---->Connect to database
CREATE DATABASE cypress_resultsNow, after creating the database we have to send the data into the same.
/// <reference types="cypress" />
describe("Go Rest API Tests - https://gorest.co.in/",()=>{
it("Users Service",()=>{
cy.request("https://gorest.co.in/public-api/users").as("users")
cy.get('@users').its('status').should('equal', 200)
})
it("Posts Service",()=>{
cy.request("https://gorest.co.in/public-api/posts").as("posts")
cy.get('@posts').its('status').should('equal', 200)
})
it("Comments Service",()=>{
cy.request("https://gorest.co.in/public-api/comments").as("comments")
cy.get('@comments').its('status').should('equal', 200)
})
it("Albums Service",()=>{
cy.request("https://gorest.co.in/public-api/albums").as("albums")
cy.get('@albums').its('status').should('equal', 200)
})
})Now, create a script to send your result to database
const fs = require('fs');
const { InfluxDB, Point } = require('@influxdata/influxdb-client');
const influx = new InfluxDB({ url: 'http://localhost:8086', token: 'your-influxdb-token' });
const writeApi = influx.getWriteApi('my-org', 'cypress_results', 'ns');
const results = JSON.parse(fs.readFileSync('cypress/results/test-results.json', 'utf8'));
results.forEach(result => {
const point = new Point('test_result')
.tag('test_name', result.name)
.intField('status', result.status)
.floatField('duration', result.duration);
writeApi.writePoint(point);
});
writeApi.close().then(() => {
console.log('Results written to InfluxDB');
});After your tests execution complete you will get the below report where you can verify the status of your API
/// <reference types="cypress" />
describe("Go Rest API Tests - https://gorest.co.in/",()=>{
it("Users Service",()=>{
cy.request("https://gorest.co.in/public-api/users").as("users")
cy.get('@users').its('status').should('equal', 200)
})
it("Posts Service",()=>{
cy.request("https://gorest.co.in/public-api/posts").as("posts")
cy.get('@posts').its('status').should('equal', 200)
})
it("Comments Service",()=>{
cy.request("https://gorest.co.in/public-api/comments").as("comments")
cy.get('@comments').its('status').should('equal', 200)
})
it("Albums Service",()=>{
cy.request("https://gorest.co.in/public-api/albums").as("albums")
cy.get('@albums').its('status').should('equal', 200)
})
})
Thank you,
#MustRead
2025: Cypress 14 knocked, Be a market leader once again with Cypress 15? | Medium
