Reports in Cypress

Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for unit tests and integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.

It's built to work with any front-end framework or website, including React, Angular, and Vue. In this article, we will learn How to Generate Testing Reports in Cypress.

What is Cypress Reports?

Cypress reports provide a complete overview of test execution. The test report includes which tests are passed, and failed, the duration of the test, and errors. These reports are important for debugging and improving the quality of the code.

Cypress supports various report frameworks and library types such as Mochawesome, JUnit, and TeamCity. This framework and library provide us a supports for a different customization. These reports are generated in the form of an HTML page with CSS.

Before we start, Please make sure to read the Installation and File Creating Steps from this article:

Types of Cypress Reports

Cypress, a popular end-to-end testing framework, offers various reporting options to help developers and QA teams analyze test results effectively. Understanding these report types is crucial for optimizing your test automation workflow. Here are the main types of Cypress reports:

1. Console Reports

• Default output in the terminal
• Provides real-time test execution information
• Useful for quick debugging and CI/CD pipelines

2. Cypress Dashboard

• Cloud-based reporting service
• Offers detailed test run analytics and historical data
• Supports parallel test execution and team collaboration

3. HTML Reports

• Generated using plugins like mochawesome
• Provides a visual, interactive summary of test results
• Easily shareable and can be integrated into CI/CD processes

4. JUnit XML Reports

• Standard format for test results
• Compatible with many CI/CD tools and test management systems
• Useful for integration with other tools in the development pipeline

5. Custom Reports

• Created using Cypress's custom reporter API
• Allows for tailored reporting solutions
• Flexible for specific project needs or company standards

6. Screenshot and Video Reports

• Automatically captured during test failures
• Helps in visual debugging and issue reproduction
• Can be integrated with other report types for comprehensive analysis

7. Allure Reports

• Generated using the Allure framework
• Provides rich, interactive reports with detailed test information
• Supports trends analysis and test case management

Each of these report types serves different purposes in the software testing lifecycle, from quick debugging to comprehensive test analysis and stakeholder communication. Choosing the right combination of reports can significantly enhance your Cypress testing strategy and overall quality assurance process.

1. Mochawesome Report

Mochawesome is a JavaScript library of Mocha Framework. It is used to generate a report for a JavaScript testing framework. It generates the report in form of HTML with CSS in responsive page. It provides different customization options to generate a chart, json file, html file, choosing report save folder, naming report file, supports for adding extra context information etc...

To use a Mochawesome, you have to install it using following command:

npm install mochawesome mochawesome-report-generator --save-dev

Add this in your cypress.config.js file:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    "reporter": "mochawesome",
    "reporterOptions": {
      "reportDir": "cypress/reports",
      "overwrite": false,
      "html": true,
      "json": true,
      "charts": true
    }
  },
});

To Generate a Report, use the following command:

npx cypress run

Output

The report will be generated in /cypress/reports folder:

2. JUnit Report

JUnit is a testing framework for Java but we can use it with cypress using cypress-junit-reporter library. It generates report in form of XML format. It contains detailed information about test execution. It include the test suite, individual test cases, execution times, and error messages with error stack.

To use JUnit Report, you can install it by using following command:

npm install cypress-junit-reporter --save-dev

Add this in your cypress.config.js file:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    "reporter": "junit",
    "reporterOptions": {
      "mochaFile": "cypress/reports/junit-[hash].xml",
      "toConsole": true
    }
  }
});

To Generate a Report, use the following command:

npx cypress run

Output

The report will be generated in /cypress/reports folder:

3. TeamCity Report

TeamCity is a CI/CD (Continuous Integration and Deployment) server that provide detailed test reports and other reporting capabilities. It provides a support for various testing framework. It provides test results in real time.

To use TeamCity Report, you can install it by using following command:

npm install mocha-teamcity-reporter --save-dev

Add this in your cypress.config.js file:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    "reporter": "mocha-teamcity-reporter",
    "reporterOptions": {
      "flowId": true
    }
  }
});

To Generate a Report, use the following command:

npx cypress run

Output

Conclusion

In conclusion, Cypress is an end-to-end automated testing tool that enables efficient and reliable testing of web applications. By following this article you can generate a test report in cypress. Cypress commands are easy-to-write that make it an ideal choice for automating the testing of elements and other web components.