Cypress - Reports

Cypress - Generating Test Reports

Cypress, being built on Mocha, supports various Mocha-compatible reporters. This allows for flexible report generation in different formats suitable for local analysis or CI/CD integration. Additionally, Cypress offers its own powerful Dashboard service for rich reporting and analytics.

Mochawesome Reporter

Mochawesome is a popular reporter that generates standalone HTML/CSS reports, providing a user-friendly overview of your test runs.

Installation

To use Mochawesome, you need to install a few packages:

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

These packages provide Mocha (the test framework Cypress uses), Mochawesome (the core reporter), mochawesome-merge (to combine reports from multiple spec files), and mochawesome-report-generator (to generate the final HTML report from merged JSON).

Configuration in cypress.config.js

Configure Cypress to use Mochawesome in your cypress.config.js:

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports/mochawesome',
    overwrite: false,
    html: false, // Generate HTML report via mochawesome-report-generator later
    json: true   // Essential for merging and generating the final report
  },
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Key reporterOptions:

• reportDir: Specifies the directory to save the JSON output files.
• overwrite: If false, new reports won’t overwrite previous ones (useful if files have unique names, otherwise set to true).
• html: Set to false because we’ll generate the final HTML report after merging.
• json: Set to true to generate individual JSON files for each spec.

Generating the Report

1. Run your Cypress tests (this will generate individual JSON files):

npx cypress run

To run a specific spec file:

npx cypress run --spec "cypress/e2e/my_spec.cy.js"

2. After the run, merge the generated JSON files (if multiple specs ran) and create the HTML report. Add these scripts to your package.json:

"scripts": {
  "cy:run": "cypress run",
  "combine:reports": "mochawesome-merge cypress/reports/mochawesome/*.json > cypress/reports/mochawesome.json",
  "generate:report": "marge cypress/reports/mochawesome.json -f report -o cypress/reports"
}

Then run them:

npm run combine:reports
npm run generate:report

This will create a report.html (or similarly named) file in cypress/reports. Opening this file in a browser shows a detailed report with test statuses, durations, and steps (if configured).

The report typically includes sections for passed, failed, pending, and skipped tests, along with execution times and potentially screenshots for failed tests.

JUnit Reporter

JUnit XML reports are widely used by CI/CD systems (like Jenkins, GitLab CI) for displaying test results.

Installation

npm install --save-dev cypress-multi-reporters mocha-junit-reporter

Configuration in cypress.config.js

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'cypress-multi-reporters',
  reporterOptions: {
    reporterEnabled: 'mocha-junit-reporter',
    mochaJunitReporterReporterOptions: {
      mochaFile: 'cypress/reports/junit/results-[hash].xml',
      toConsole: true
    }
  },
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Using [hash] in mochaFile ensures unique XML files are generated for each spec, preventing overwrites.

Generating the Report

Run your tests as usual:

npx cypress run

This will generate XML files in the cypress/reports/junit/ directory.

Cypress Dashboard

The Cypress Dashboard is a SaaS product by Cypress that provides advanced reporting, analytics, parallelization, and integration with source control. It’s the recommended way to get the most out of your Cypress test reporting in a team or CI environment.

To use it:

• Set up a project in the Cypress Dashboard (dashboard.cypress.io).
• Get your project ID and record key.
• Run Cypress with the --record flag and your key:

npx cypress run --record --key YOUR_RECORD_KEY

The Dashboard provides rich visualizations of test runs, failure analysis, video recordings, screenshots, and historical data, significantly enhancing the debugging and monitoring experience.

Many other reporters exist, like cypress-teamcity-reporter for TeamCity integration. The choice depends on your project’s needs and CI/CD setup.