DEV Community

Bushra Alam
Bushra Alam

Posted on • Edited on

Using Mochawesome Reporter with Cypress

#testing #cypress #javascript #tutorial

Cypress is built on top of Mocha and so it gets the mocha's bdd syntax, hooks and mocha reports. In this post we will be discussing about Mocha Reporters. Mocha provides a whole bunch of reporters to choose from. Some of the mocha built-in reporters are spec, dot matrix, nyan and json. These are good but not as awesome as the one we are going to discuss in this post: Mochawesome Reporter.

Mochawesome reporter is a custom reporter which generates a standalone HTML/CSS report to help visualize your test runs. It has simple, clean, and modern design. The report has filters to display only the tests you want and shows stack trace for failed tests.

Challenge in integrating Mochawesome Reporter with Cypress
Starting Cypress v.3.0.0 Cypress executes each spec in isolation and hence a separate test report is generated for each spec. This is a problem because we need one single report for the complete run (which include multiple specs).
Solution: mochawesome-merge can be used to merge these reports and then generate one HTML report for all your cypress tests.

We will be needing the following npm packages and so let's see what each of them does:

cypress-multi-reporters
Generate multiple mocha reports in a single mocha execution.

mochawesome
Mochawesome is a custom reporter for use with the Javascript testing framework, mocha. It runs on Node.js (>=8) and works in conjunction with mochawesome-report-generator to generate a standalone HTML/CSS report to help visualize your test runs.

mochawesome-merge
Merge several Mochawesome JSON reports.

mochawesome-report-generator (marge)
marge (moch*awesome-report-ge*nerator) is the counterpart to mochawesome, a custom reporter for use with the Javascript testing framework, mocha. Marge takes the JSON output from mochawesome and generates a full fledged HTML/CSS report that helps visualize your test suites.

Setup

Step 1: Installation

  1. Install Mocha

    

npm install mocha --save-dev

2. Install cypress-multi-reporters

    ```


    npm install cypress-multi-reporters --save-dev
Enter fullscreen mode Exit fullscreen mode

  1. Install mochawesome

    

npm install mochawesome --save-dev

4. Install mochawesome-merge

    ```


    npm install mochawesome-merge --save-dev
Enter fullscreen mode Exit fullscreen mode

  1. Install mochawesome-report-generator

    

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



###Step 2: Add reporter settings in cypress.json

```json


"reporter": "cypress-multi-reporters",
    "reporterOptions": {
        "reporterEnabled": "mochawesome",
        "mochawesomeReporterOptions": {
            "reportDir": "cypress/reports/mocha",
            "quite": true,
            "overwrite": false,
            "html": false,
            "json": true
        }
    }
Enter fullscreen mode Exit fullscreen mode

Step 3: Add scripts in package.json file

For Windows:



"scripts": {
    "clean:reports": "rmdir /S /Q cypress\\reports && mkdir cypress\\reports 
         && mkdir cypress\\reports\\mochareports",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge
         cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/
         report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }
Enter fullscreen mode Exit fullscreen mode

For Mac:



"scripts": {
    "clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports 
         && mkdir cypress/reports/mochareports",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge
         cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/
         report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }
Enter fullscreen mode Exit fullscreen mode

pretest script would create the report folders and clear them if they already exist

test script would do the following:
a. run your test suite
b. create 'mocha' folder under 'cypress/reports'
c. create .json files (one for each spec executed) in the 'mocha' folder

posttest script would combine all the .json files present in 'cypress/reports/mocha' folder and place the combined file 'report.json' in 'cypress/reports/mochareports' and create a beautiful html report.

Execution

It's time to run test suites and view report.



npm run test
Enter fullscreen mode Exit fullscreen mode

Pre and post scripts are automatically executed before and after the main script execution.

HTML Report

You can find a sample project here: https://github.com/bushralam/Cypress

Top comments (46)

Collapse
 
turner749 profile image
Alexander K Turner •

Hello people, for those having issues with the posttest step and the combine-reports npm script I have a fix.
It looks like the newer versions of mochawesome-merge removed the --reportDIr.
I had to replace the combine-reports script slightly.
Inside package.json:
"combine-reports": "mochawesome-merge ./cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",

Notice the reportDir is gone and instead its a file directory starting with "." and ending with "*.json"

Loved the tutorial it was super helpful, but I did get caught up on this issue for awhile. Hopefully you'll be able to update this because this guide is incredibly helpful! Thanks!

Collapse
 
bushraalam profile image
Bushra Alam •

Thank you Alexander.. I have updated the post.
I am sorry.. I should have done that long ago.
Thanks again.

Collapse
 
krisluminar profile image
Kris Luminar •

@bushraalam You missed the ./ in your update. I should be mochawesome-merge ./cypress, not mochawesome-merge cypress

Collapse
 
miteshkamat27 profile image
Mitesh Kamat •

Thanks for writing this article. In my case, after executing cypress run, it prompts an npm err! and exits which doesn't allow the scripts after cypress run. So, I am unable to proceed with combining and merging reports. Did you come across such an error or do you have any workaround for such a scenario??

Collapse
 
bushraalam profile image
Bushra Alam •

Hi Mitesh,
What error do you get? Is it same as mentioned here: dev.to/turner749/comment/oj8a
If so.. please follow the solution mentioned.

Collapse
 
miteshkamat27 profile image
Mitesh Kamat • • Edited

Hi Bushra,
Thanks for responding. I was able to create and merge reports as per the suggestion you mentioned above. But after execution of command cypress run, it generates the test results but exits with npm err.

npm ERR! code ELIFECYCLE
npm ERR! errno 1

As I want the scripts for combine and merge reports to execute directly after test execution which is not happening in my case.
So, I am following this post github.com/cypress-io/cypress/issu... which talks about configuring cypress run. While doing that I need to target "after:test:run" event as mentioned in official docs but the event doesnot trigger after all tests are executed. Now I am blocked at this point. Did you come accross such an issue? I would appreciate if you could suggest me on this.

Thread Thread
 
miteshkamat27 profile image
Mitesh Kamat •

Hi Bushra,

I was able to resolve the npm err issue by writing a custom cypress runner and successfully combine and generate html report. I followed this links:
github.com/nottyo/cypress-e2e-code...
github.com/Antontelesh/mochawesome...

Anyone who is stuck with the npm error post ** cypress run ** can follow the above links.

Thread Thread
 
williammega profile image
William Gomes Soares •

Thanks for the excellent article. But I have a problem, when my test fails (an error occurs) the report is not generated, how could I adjust this problem? And already taking advantage, how would you do to attach the screenshots in the report?

Thread Thread
 
miteshkamat27 profile image
Mitesh Kamat •

Could you please share the error screenshot ?

Collapse
 
shahmednisumcom profile image
shakeel •

Hello Bushra Alam,
Thank you sharing this wonderful know i have added all required things which you mention in this blog but i get following error message after running :npm run test Please kindly suggest regarding this issue;

cypress24@1.0.0 pretest E:\cypress24
npm run clean:reports

cypress24@1.0.0 clean:reports E:\cypress24
rmdir /S /Q cypress\reports && mkdir cypress\reports && mkdir cypress\reports\mochareports
The directory is not empty.
npm ERR! code ELIFECYCLE
npm ERR! errno 145
npm ERR! cypress24@1.0.0 clean:reports: rmdir /S /Q cypress\reports && mkdir cypress\reports && mkdir cypress\reports\mochareports
npm ERR! Exit status 145
npm ERR!
npm ERR! Failed at the cypress24@1.0.0 clean:reports script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\shahmed\AppData\Roaming\npm-cache_logs\2020-05-08T11_46_56_279Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 145
npm ERR! cypress24@1.0.0 pretest: npm run clean:reports
npm ERR! Exit status 145
npm ERR!
npm ERR! Failed at the cypress24@1.0.0 pretest script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\shahmed\AppData\Roaming\npm-cache_logs\2020-05-08T11_46_56_370Z-debug.log

Collapse
 
bushraalam profile image
Bushra Alam •

Hi Shakeel,

Could you try one of the solutions mentioned here: stackoverflow.com/q/22948189
Let me know what worked for you and I will update the post accordingly.
Thanks.

Collapse
 
itchyfangaz profile image
Jesse Cunningham •

I added my solution to this issue. It works for me 100% Hopefully it works for everyone else. Thanks for the helpful article.

Collapse
 
ktxxt profile image
Darko RiÄ‘ić •

Great article and on point!

Everyone interested can take a look at this boilerplate for cypress -> github.com/optimumqa/cypress-boile...

It comes with top useful plugins already configured and with a mochawesome reporter.

Installation -> npx @optimumqa/cypress-boilerplate my-cypress-app

Collapse
 
mrobbo76 profile image
mrobbo76 •

I've followed this discussion with interest. I too had issues whereby I was getting errors when generating mochawesome reports. I also wanted to archive generated reports, labelling these into folders with current date and time.

I have ended up with this package.json config. Feel free to take and use as required :

"delete:reports" : "del /f /s /q cypress\\reports 1>nul",
"remove:reports": "rd /s /q cypress\\reports",
"make:directories": "mkdir cypress\\reports && mkdir cypress\\reports\\mochareports && mkdir cypress\\archive",
"pretest": "npm run delete:reports || npm run clean:reports || npm run make:directories",
"scripts": "cypress run",
"combine-reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports",
"archive-report" : "xcopy /s /i /y cypress\\reports\\mochareports cypress\\archive\\%date:/=%-%time:~0,2%.%time:~3,2%.%time:~6,2%",
"posttest": "npm run combine-reports && npm run generate-report && npm run archive-report",
"test" : "npm run scripts || npm run posttest"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hari49951 profile image
Srihari Dama •

Thanks for the scripts. I am using above scripts to run and I was able to run my tests successfully but after the test execution I am getting below error at combine-reports. I see there is only reports/mocha/mochawesome.json created.

npm run combine-reports && npm run generate-report && npm run archive-report

mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json

The system cannot find the path specified.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! combine-reports: mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the combine-reports script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Collapse
 
dilugit profile image
dilugit • • Edited

@Srihari Dama I got the same error.. could you able to fix it?

Collapse
 
dragod profile image
Fabio • • Edited

I had same problem on windows with "rm" command and "mkdir", there was no way to make it work, so instead I made a small script to handle this.

Add this js script to your "cypress" folder (create a new js file, call it whatever you want):

// Small script to make sure we always clean the report directory before running "npm run test"

const fs = require("fs");

const reports = './cypress/reports';
const mocha = 'mocha'
const mochareports = "mochareports"

let createReportDir = (dir1,dir2)  => {

    fs.mkdirSync(`${dir1}/${dir2}`, { recursive: true })

    console.log(`Created directory: ${dir1}/${dir2}.`);
}

// check if directory exists

if (fs.existsSync(reports))
{
    fs.rm(reports, { recursive: true }, (err) => {

        if (err)
        {
            throw err;
        }

        console.log(`Cleaning ${reports} directory.`);

        createReportDir(reports,mocha)
        createReportDir(reports,mochareports)

    });
}
else
{
    createReportDir(reports,mocha)
    createReportDir(reports,mochareports)
}
Enter fullscreen mode Exit fullscreen mode


`

Then call it in your package.json

`

"scripts": {
    "clean:reports": "node ./cypress/cypress-report-clean.js"
}
Enter fullscreen mode Exit fullscreen mode


``

Collapse
 
itchyfangaz profile image
Jesse Cunningham • • Edited

So for anyone having trouble with the Windows install. Once you complete the installation as detailed in Bushra's post, you will notice you don't have the report folder in your directory which is causing all those issues. Please follow these steps.

  1. Copy and past the Brusha's Cypress.json and Package.json content
  2. Run this one time in the command line npx cypress run --browser=chrome

  3. After your test run in browser it will generate the reports folder and any mocha dependencies you are missing.

  4. You can now run the "npm test run" and it will work as expected.

In closing, there are some dependencies missing initially in the windows set up that need to be executed at least once via in the browser. Once this happens the expected directories/dependencies will be available. -Cheers

Collapse
 
aonkar profile image
Anandteerth Onkar • • Edited

Its not working for windows with your updated code for windows

Getting error for code: rmdir /S /Q cypress\reports
(This is no more valid in windows 10)

Second error:
ERROR: Failed to merge reports

Error: Pattern --reportDir matched no report files
at C:\Users\anandteerth.onkar\Cypress-Training\node_modules\mochawesome-merge\lib\index.js:14:11
at Array.map ()
at C:\Users\anandteerth.onkar\Cypress-Training\node_modules\mochawesome-merge\lib\utils.js:3:46
at merge (C:\Users\anandteerth.onkar\Cypress-Training\node_modules\mochawesome-merge\lib\index.js:59:17)
at Object. (C:\Users\anandteerth.onkar\Cypress-Training\node_modules\mochawesome-merge\bin\mochawesome-merge.js:5:1)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)

It would be great if you could make an updated vid tut on the mochawesome reporter.

After resolving problem 1, I faced some other issues, mentioned in link:
github.com/cypress-io/cypress/issu...

Collapse
 
oladeni1 profile image
Olatunde Oladeni • • Edited

Hi Bushra
My mocha report was generated But it generated report for only 1 spec despite have about 10 specs within my integration folder.
I executed this command
"test" : "npm run scripts || npm run posttest"
My test execution shows 10 specs passed but only 1 spec report generated.
How can this be resolved.

Collapse
 
krisluminar profile image
Kris Luminar •

Given that npm run will automatically invoke posttest after you run npm run test, won't this code invoke posttest twice?

"posttest": "npm run combine-reports && npm run generate-report",
"test": "npm run scripts || npm run posttest"
Enter fullscreen mode Exit fullscreen mode
View full discussion (46 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

thevediwho profile image

Spinners in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi -

philip_zhang_854092d88473 profile image

Mastering Server-Sent Events (SSE) with Python and Go for Real-Time Data Streaming 🚀

Philip -

andrewelans profile image

Inject HTML snippet from file

Andrew Elans -

mike_andreuzza profile image

How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Michael Andreuzza -