DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Bushra Alam
Bushra Alam

Posted on • Updated on

Using Mochawesome Reporter with Cypress

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
    
  3. Install mochawesome

    npm install mochawesome --save-dev
    
  4. Install mochawesome-merge

    npm install mochawesome-merge --save-dev
    
  5. Install mochawesome-report-generator

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

Step 2: Add reporter settings in cypress.json

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

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"
  }

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"
  }

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

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 (39)

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 Author

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
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 Author

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 on

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
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 on

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

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 Author

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

Collapse
aonkar profile image
Anandteerth Onkar • Edited on

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
dragod profile image
Fabio • Edited on

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
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
itchyfangaz profile image
Jesse Cunningham • Edited on

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
iamdaniyalz profile image
Daniyal Zulfiqar

There's some issue with clean:reports for windows (not sure about mac). If the directory is empty or not present there, the script fails.
For windows, please instead of using this below,
"clean:reports": "rmdir /S /Q cypress\reports && mkdir cypress\reports
&& mkdir cypress\reports\mochareports",

use this instead:
"clean:reports": "IF EXIST cypress\reports (rmdir /S /Q cypress\reports && mkdir cypress\reports && mkdir cypress\reports\mocha && mkdir cypress\reports\mochareports\) ELSE (mkdir cypress\reports && mkdir cypress\reports\mocha && mkdir cypress\reports\mochareports\)",

So what does it do?
It checks for the dir Reports. IF its there it deletes it with all contents and then creates a new one with sub folders. If its not there (ELSE), then it creates a new one with sub folders.

Collapse
intheget profile image
Prad

clean: reports is throwing an error for me
npm run clean:reports

cypress-test@1.0.0 clean:reports C:\Users\mehtap\Documents\Github\cypress-test
rmdir /S /Q cypress\reports && mkdir cypress\reports && mkdir cypress\reports\mochareports

The system cannot find the file specified.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! cypress-test@1.0.0 clean:reports: rmdir /S /Q cypress\reports && mkdir cypress\reports && mkdir cypress\reports\mochareports
npm ERR! Exit status 2
npm ERR! Failed at the cypress-test@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\mehtap\AppData\Roaming\npm-cache_logs\2020-05-09T07_53_17_751Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! cypress-test@1.0.0 pretest: npm run clean:reports
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the cypress-test@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\mehtap\AppData\Roaming\npm-cache_logs\2020-05-09T07_53_17_825Z-debug.log

Collapse
rforjoe profile image
Richard Forjoe

Thanks for this @bushraalam super useful. I had an issue with using this in a mono-repo. Only change needed was this as Cypress couldn't find cypress-multi-reporters

Workaround:
"reporter": "../../node_modules/cypress-multi-reporters/lib/MultiReporters.js",
"reporterOptions": {
"reporterEnabled": "mochawesome",

Collapse
guptapranay profile image
Pranay Gupta

For those, who have experienced an error npm ERR! code ELIFECYCLE
npm ERR! errno 1
while generating a report for the failed scenario, there is a simple solution.

When cypress scenarios are getting failed, it triggers an error code that NPM treats as an unexpected error in the test script which stops the execution immediately. Instead of writing custom code to handle this, we can leverage the Linux command.

For Example (In your package.json file):
npx cyprees run --spec cypress/integration/specFile.js || true

This will stop NPM error and will allow cypress execution gracefully with your post-test script.

Collapse
tejkumar profile image
Tejkumar Kempaiah

@pranaygupta : I tried the suggestion, Still facing the same error.

npm ERR! code ELIFECYCLE
npm ERR! errno 1

-------------------Complete error------------------
The system cannot find the path specified.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Project1@1.0.0 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 Project1@1.0.0 combine-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\admin\AppData\Roaming\npm-cache_logs\2021-08-12T14_58_25_631Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Project1@1.0.0 posttest: npm run combine-reports && npm run generate-report && npm run archive-report
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Project1@1.0.0 posttest 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\admin\AppData\Roaming\npm-cache_logs\2021-08-12T14_58_25_700Z-debug.log

Collapse
tejkumar profile image
Tejkumar Kempaiah • Edited on

Hi All,

I'm getting merge error for mochawesome reports, Please suggest the solution

ERROR: Failed to merge reports

Error: Pattern cypress/reports/mocha/*.json matched no report files

Here is my package.json file:

{
"name": "Project1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean:reports": "mkdir cypress\reports\ && mkdir cypress\reports\mocha\ && mkdir cypress\reports\mochareports\ ",
"pretest": "npm run clean:reports",
"scripts": "cypress run --spec 'cypress/integration/CafeTownSend/' --headless",
"merge-report": "mochawesome-merge cypress/reports/mocha/.json > cypress/reports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports",
"posttest": "npm run merge-report && npm run generate-report",
"test": "npm run scripts || npm run posttest"
},
"keywords": [],
"author": "Tejkumar Kempaiah",
"license": "ISC",
"devDependencies": {
"cy-verify-downloads": "0.0.4",
"cypress": "^8.1.0",
"cypress-downloadfile": "^1.2.1",
"cypress-file-upload": "^5.0.8",
"cypress-iframe": "^1.0.1",
"cypress-plugin-tab": "^1.0.5",
"cypress-xpath": "^1.6.2",
"mocha": "^9.0.3",
"mochawesome": "^6.2.2",
"mochawesome-merge": "^4.2.0",
"mochawesome-report-generator": "^5.2.0"
}
}

Here is my cypress.json file:

{
"projectId": "18xfp2",
"$schema": "on.cypress.io/cypress.schema.json",
"env": {
"appurl": "trytestingthis.netlify.app/",
"username": "test",
"password": "test"
},
"watchForFileChanges": false,
"defaultCommandTimeout": 10000,
"pageLoadTimeout": 1000,
"baseUrl": "skpatro.github.io/demo/signup/",
"chromeWebSecurity": false,
"reporter": "mochawesome",
"reporterOptions": {
"files": "mochawesome-report",
"overwrite": false,
"html": false,
"json": true
}
}

Collapse
naga911 profile image
Naga911 • Edited on

Hi All,

I am new to cypress and mochawesome reports, once report is generating showing as per attached image, Kindly help me to resolve the issue , It should show provided feature file details
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
sachajw profile image
Sacha Wharton

Thank you Bushra for this amazing post! It really is excellently put together and saved me a ton of time. Much appreciated!

Collapse
oladeni1 profile image
Olatunde Oladeni • Edited on

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
rkkonda profile image
rkkonda

Thank you for this wonderful article. just a quick question, How does pretest getting executed? As posttest script is referenced in "test" script, but pretest not referenced anywhere, but still its cleaning the report folder and creating. if you could clarify how its getting executed, will be a great help.

Thanks in advance.

Collapse
bushraalam profile image
Bushra Alam Author

Hi
Well.. that's the advantage of using pre and post scripts.. they are called automatically before and after the main script. So when we run the script 'test'.. the script 'pretest' would automatically run before it and the script 'posttest' would automatically run after script 'test' has finished execution.
I have also explained that in the video that is embedded in the post.

Collapse
madvic90 profile image
Madvic90

ERROR: Failed to merge reports - Mochawesome

I've installed the Mochawesome reporter and all the needed plugins. Whenever I try to run a folder it keeps giving me an ERROR that Cypress failed to merge the reports. It looks like that the script does not create a file in the folder mocha.

It only creates a report.json in Mochareports.
image

this is a part of my package.json.

{
"scripts": {
"cypress:open": "npm install && cypress open",
"cypress:open:local": "npm install && cypress open --env configFile=local",
"cypress:open:dev": "npm install && cypress open --env configFile=dev",
"cypress:open:tst": "npm install && cypress open --env configFile=tst",
"cypress:open:acc": "npm install && cypress open --env configFile=acc",
"cypress:run": "npm install && cypress run",
"cypress:run:local": "npm install && cypress run --browser chrome --headless --env configFile=local",
"cypress:run:tst": "npm install && cypress run --browser chrome --headless --env configFile=tst",
"cypress:run:acc": "npm install && cypress run --browser chrome --headless --env configFile=acc",
"cypress:run:acc:teampark": "npm install && cypress run --browser chrome --headless --env configFile=acc --spec cypress/integration/team_park.js --config video=false",
"clean:reports": "(if exist cypress\reports (rmdir /S /Q cypress\reports)) && mkdir cypress\reports && mkdir cypress\reports\mocha && mkdir cypress\reports\mochareports",
"pretest": "npm run clean:reports",
"scripts": "cypress run --spec cypress/integration/website/schooltrip/**/",
"combine-reports": "mochawesome-merge cypress/reports/mocha/.json > cypress/reports/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"

Desired behavior:
What cypress needs to do according to all online explanation is to create a file in the Mocha and Mochareports and merge these files in order to get an HTML report.

Error given after a run:

@ posttest C:\Users\iessadeq\Desktop***l-cypress-tests-master
npm run combine-reports && npm run generate-report

@ combine-reports C:\Users\iessadeq\Desktop*******-cypress-tests-master
mochawesome-merge cypress/reports/mocha/.json > cypress/reports/report.json

ERROR: Failed to merge reports

Error: Pattern cypress/reports/mocha/*.json matched no report files

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ combine-reports: mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/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.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\iessadeq\AppData\Roaming\npm-cache_logs\2020-07-10T13_54_21_097Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ posttest: npm run combine-reports && npm run generate-report
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ posttest 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\iessadeq\AppData\Roaming\npm-cache_logs\2020-07-10T13_54_21_243Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ test: npm run scripts || npm run posttest
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ test 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\iessadeq\AppData\Roaming\npm-cache_logs\2020-07-10T13_54_21_386Z-debug.log

Test code to reproduce
"reporter": "cypress-multi-reporters",
"reporterOptions": {
"reporterEnabled": "mochawesome",
"mochawesomeReporterOptions": {
"reportDir": "cypress/reports/mocha",
"quite": true,
"overwrite": false,
"html": false,
"json": true
}

I've tried several things without any succes.. Could anyone help please?

Versions
"devDependencies": {
"chance": "^1.1.0",
"cypress": "^4.7.0",
"cypress-file-upload": "^3.5.3",
"cypress-multi-reporters": "^1.4.0",
"lodash": "^4.17.15",
"mocha": "^8.0.1",
"mocha-junit-reporter": "^1.23.3",
"mochawesome": "^6.1.1",
"mochawesome-merge": "^4.1.0",
"mochawesome-report-generator": "^5.1.0"

Collapse
mpulipati profile image
mpulipati

Nice Article. It saved lot of time. Thank You!

Collapse
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?

Collapse
imtiazhossain profile image
Imtiaz Hossain

Hi,

I'm getting this error when trying to generate reports. Any help appreciated. Thank you.

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

ERROR: Failed to merge reports

Error: Directory C:\repo\mochawesome-report does not exist
at fse.readdir.catch (C:\repos\drug-data-pipeline-testing\node_modules\mochawesome-merge\lib\index.js:33:11)

Collapse
cssoldiervoif profile image
Robert Dale Morris

Updated with cy-report-setup-helper : dev.to/cssoldiervoif/cypress-mocha... :)

Collapse
itchyfangaz profile image
Jesse Cunningham

This is an overkill. There is a simple and easy one step solution to solve this problem.

Collapse
chris__wba profile image
Chris

Thanks for the guide, really helpful. How do I specify which browser to run the tests in? When executing via npm run test.

Collapse
crisreekoh profile image
crisreekoh

Hello Bushra,

How do I add a charts and screenshots in the report?

Thanks

Collapse
benjaminpinto profile image
Benjamin Pinto

Hi Bushra, thanks for the post! I have a doubt that's making me crazy: How 'pretest' is running, considering that 'test' command call only run scripts and posttest?

Collapse
stefanvilimonovic profile image
Stefan Vilimonovic

Hello Bushra,

How to add screenshots of failed tests to the html report?

Thanks in advance!

Collapse
juancurihuilonly profile image
JuanCurihuil-only

How can I tell it to generate the report on a particular folder of a project?

πŸ€” Did you know?

Β 
🌚 Dark mode is available in Settings.