Automated tests allow you to execute the hundreds of regression tests required to verify that changes to the solution have not broken existing functionality. Cypress, by default, generates reports that are output to the screen while tests are executing. Analysis of multiple test reports can take a considerable amount of time and it may not be possible for you to go through all of the test results in one session. Logging off, or stopping Cypress will mean that your on-screen test results will be gone forever. But do not despair – for persistent reporting, I’ll advise on two solutions

1. Cypress Dashboard
2. Mochawsome

Cypress Dashboard

Cypress Dashboard is a web-based service that stores the details of your test runs, allowing to analyse failures and record metrics. It also stores videos and screenshots created during tests for future reference.

You get Cypress Dashboard for free with limitations on the number of test results it will store and how long your reports will be available to view. If you need more, you can pay for one of the enhanced plans which are detailed here. https://www.cypress.io/pricing

Setting up Cypress Dashboard

There are 2 steps required for configuring Cypress to record results to the Dashboard

1. Configure your project to record
2. Add your Record Key to the NPM script
3. Run in CI with the –record flag

Configure Project

1. Run Cypress in interactive mode (with the cypress open command) e.g.1 yarn --cwd core/test-api cypress:open:dev2
2. Click on the Runs tab of your project within the Test Runner.
3. Click Set up Project to Record.
4. You will need to log in to record your tests, so you will need to log in to the Cypress Dashboard here.
5. Fill in the name of your project (this is only for display purposes and can be changed later).
6. Choose who owns the project.
7. Choose whether this project is Public or Private.
8. Click Setup Project.
9. Now you should see a view explaining how to record your first run.
10. After setting up your project, Cypress inserted a unique projectId into your cypress.json. If you’re using source control, we recommend that you check your cypress.json including the projectId into source control.

Add the Record Key to the NPM Script

1. Go to https://dashboard.cypress.io/#/projects/<<projectId>>/settings (replacing the chevroned with the projectId you identified in he previous steps)
2. Scroll down to the Record Keys section and Click Create New Key if one doesn’t yet exist
3. Copy the Record Key value
4. In your package.json, add the –key parameter to the relevant script entries1 2 3 "scripts": { "cypress:run:dev2": "yarn sshpg:dev2 && cypress run --key xxx-xxx-xxx-xxx-xxx --env ENVIRONMENT=dev2" }

Run Cypress with the –record flag

1. Run Cypress in CI mode (with the cypress run command) 1 yarn --cwd core/test-api cypress:open:dev2 --record

You’ll now be able to view your test run results in both the dashboard –

and in the test runner –

Mochawesome

If hosted services are not your thing or you simply refuse to pay for something you can get for free, then Mochawesome is for you. Setting it up is a bit more fiddly as you’ll need to install various dependencies but the result is worthwhile.

Cypress is built upon the Mocha testing framework which comes with a set of basic built-in reporting tools. For fancy reports, however, Mochawesome provides additional bells and whistles.

To get it set up you’ll need to

1. Install Dependencies
2. Configure your Cypress project
3. Run Cypress in CI mode
4. Merge the Results data
5. Fix the merged file
6. Generate the final report

Install Dependencies

1. In your Cypress project folder, install the following libraries…
   yarn add -D mocha yarn add -D mochawesome
yarn add -D mochawesome-merge
yarn add -D mocha-junit-reporter
yarn add -D mochawesome-report-generator
yarn add -D cypress-multi-reporters

Configure Cypress

1. Add the following lines to cypress.json"reporter": "cypress-multi-reporters", "reporterOptions": { "configFile": "reporterOpts.json" }
2. Within the Cypress project folder, create the file reporterOpts.json and enter
   {
"reporterEnabled": "mocha-junit-reporter, mochawesome",
"mochaJunitReporterReporterOptions": {
"mochaFile":"cypress/reports/junit/test_results[hash].xml", "toConsole": false },
"mochawesomeReporterOptions": {
"reportDir": "cypress/reports/mocha",
"quiet": true,
"overwrite": false,
"html": false,
"json": true
}
}  

Run Cypress in CI mode

1. Run Cypress in CI mode with the cypress run command1 yarn cypress:run:devAfter the tests complete, reports will be generated and stored in the location specified in reporterOptions.json . Taking a look in the reports folder you’ll notice there are two sub-folders – junit/ and mocha/. The files inside the junit/ folder contain summaries of the test runs i.e. timestamps and failures etc. The mocha/ folder contains very detailed information about each test including start and end times and exception outputs. These sets of data need to be merged into a single file

Merge the results data

To merge the various data files produced by the previous step…

1. Run the following command in a Linux type shell such as Git Bash as opposed to PowerShell or Windows CMD to avoid producing a file containing Windows characters which will cause subsequent steps to fail.
   yarn --silent mochawesome-merge --reportDir cypress/reports > cypress/test-reports/ma-merged.json

Generate the final report

So you’ve finally arrived at the point where you can generate the final report. The tool for this is the mochawesome-report-generator, also known as “marge”

1. Run marge to create the final report with the command
   yarn marge .\cypress\test-reports\ma-merged.json -f report -o .\cypress\test-reports\margereports
   And voila! you’ll be presented with an html file which when opened in your browser will display an incredibly attractive test log report similar to this…