top of page

Cypress Reports

When Cypress tests run in headless mode (npx cypress run), the default reporting is quite limited.


You typically get:

  • terminal output

  • screenshots for failures

  • videos (if enabled)


While useful, this makes debugging difficult in larger test suites or CI pipelines because there is no clear HTML dashboard summarizing test results.


To solve this, Cypress supports custom reporters.



Why Use Custom Reporters


Custom reporters improve test visibility by providing:

  • HTML dashboards

  • screenshots embedded inside reports

  • structured XML output for CI/CD systems

  • clearer debugging information


Instead of digging through terminal logs, you get a visual report of the entire test run.


Reporter Setup Used in This Project


This setup combines two reporters:

Reporter

Purpose

mocha-junit-reporter

CI/CD compatible XML reports

cypress-mochawesome-reporter

Interactive HTML reports


The cypress-multi-reporters package allows running multiple reporters at the same time.


Installing Required Packages


Install the necessary reporters as dev dependencies:

Register Reporter Plugin


Inside cypress/support/e2e.js the reporter must be registered.

This enables automatic screenshot attachment inside reports.


Cypress Configuration


Reporter configuration is added to cypress.config.js.


What This Configuration Does

Property

Purpose

reporter

enables multi-reporter support

reporterOptions

points to custom reporter configuration

setupNodeEvents

registers Mochawesome reporter plugin


Reporter Configuration File


A separate configuration file keeps reporter settings organized.


reporter-config.json


What These Settings Do

Option

Purpose

reporterEnabled

runs multiple reporters

mochaFile

generates individual XML files

charts

visual statistics in HTML report

embeddedScreenshots

attach screenshots to report

inlineAssets

produce a single portable HTML file


Report Folder Structure


After running tests, Cypress generates reports like this:




Report Types

Folder

Purpose

html

interactive report / easy to read

junit

XML report for CI/CD


NPM Scripts for Report Automation


The following scripts automate report generation.


Current package.json


What Each Script Does


delete:reports

Deletes previous reports so old results don’t mix with new ones.

"|| true" prevents the script from failing if the folder does not exist.


prereport

Runs before the test execution to clean the report folder.


junit:merge

Combines multiple XML files into a single report file.

This is important for CI tools that expect one consolidated report.


cy:run:all

This script executes the entire workflow:

  1. delete previous reports

  2. run Cypress tests

  3. continue execution even if tests fail (|| true)

  4. merge JUnit reports


Final HTML Report Features


The Mochawesome report provides:

  • interactive HTML dashboard

  • pass/fail filtering

  • detailed test logs

  • embedded screenshots for failures

  • stack traces and error messages


This makes debugging failures much easier than reading raw terminal logs.


Final Result


After running:

You can open the report in a browser:

And view a complete visual report of the test run.


Best Practice


Add the reports folder to .gitignore:

Reports should not be committed to version control since they are generated artifacts.

 
 
bottom of page