Cypress HTML reports with screenshots made easy

TL;DR install cypress-mochawesome-reporter to generate Cypress HTML report with screenshots attached to failed tests.

28 March 2021: Post updated to the latest (v2) cypress-mochawesome-reporter version

The problem

If you ran Cypress with cypress run command and one / many of your tests failed you will get an error message like this:

test summary

then you’re going to need to scroll up until you find all your errors and try to understand what went wrong 😟

test fail error message

wouldn’t it be great to see the report on a website? 🤔

Introducing cypress-mochawesome-reporter

A zero-config Mochawesome reporter for Cypress with screenshots attached to failed tests.

with a few simple steps, you will get a report that you can read easily on a website.

Mochawesome report with screenshot

Make sure you have cypress >= 6.7.0 or cypress >= 6.2.0 with experimentalRunEvents: true in cypress.json file

If you are using cypress < 6.2.0 you can use v1 of this reporter, read here how to setup

Step 1: install cypress-mochawesome-reporter

npm i --save-dev cypress-mochawesome-reporter
yarn add -D cypress-mochawesome-reporter

Step 2: change default Cypress reporter (cypress.json)

"reporter": "cypress-mochawesome-reporter"

Step 3: add to cypress/support/index.js

import 'cypress-mochawesome-reporter/register';

Step 4: add to cypress/plugins/index.js

module.exports = (on, config) => {
  require('cypress-mochawesome-reporter/plugin')(on);
}

Run Cypress

That’s it! 🎉🎉

Github repo

Only keep reading if you want to find out what this library encapsulates 🤓

Generating an HTML report

Adding Mochawesome reporter to Cypress will generate a website with the test report.

Installation steps in general:

1. install mochawesome, mochawesome-merge and mochawesome-report-generator.
2. config Mochawesome reporter.
3. merge Mochawesome reports into one JSON file.
4. generate an HTML report based on that file.

Mochawesome generates an HTML report

Add screenshots to the report

When a test fails Cypress saves a screenshot in cypress/screenshots folder, so we are going to need to add the screenshot for each failed test.

1. listen for test:after:run .
2. calculate the path of the screenshot.
3. call the addContext method from Mochawesome.

A more detailed tutorial of how to do these steps manually can be found here

Hope you find it helpful (: