Cypress HTML reports with screenshots made easy
Tags: cypress, mochawesome, mocha, testing
Published: 2020-04-24 10:03:36

**TL;DR** install [cypress-mochawesome-reporter](https://www.npmjs.com/package/cypress-mochawesome-reporter) to easily generate Cypress HTML report with screenshots attached to failed tests.

------

**4 June 2022: Post updated to be compatible with cypress v10**

**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](https://dev-to-uploads.s3.amazonaws.com/i/ogrmi4rm6wl253vhssxt.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/oey357d3ahs16tio4vv7.png)

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](https://lironer.github.io/cypress-mochawesome-reporter/example-report/mochawesome.html).

![Mochawesome report with screenshot](https://dev-to-uploads.s3.amazonaws.com/i/4cpy01r71lbu44um4zrn.png)

**If you are using cypress < `10.0.0` you can use older version of this reporter, read [here](https://github.com/LironEr/cypress-mochawesome-reporter/blob/v1/README.md) for more info**

**Step 1:** install `cypress-mochawesome-reporter`
```
npm i --save-dev cypress-mochawesome-reporter
yarn add -D cypress-mochawesome-reporter
```
**Step 2:** Change cypress reporter & setup hooks

Edit config file (`cypress.config.js` by default)

```js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
    },
  },
});
```

**Step 3:** Add to `cypress/support/e2e.js`

```javascript
import 'cypress-mochawesome-reporter/register';
```

Run Cypress

That's it! 🎉🎉

For more info & different setup options go to [GitHub repo](https://github.com/LironEr/cypress-mochawesome-reporter)

-----

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 report with screenshot](https://dev-to-uploads.s3.amazonaws.com/i/skmvw4ko8scfqx33bpks.png)

## 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](https://medium.com/egnyte-engineering/3-steps-to-awesome-test-reports-with-cypress-f4fe915bc246)_

Hope you find it helpful (: