Generating empty HTML Mochawesome report from populated JSON file in Cypress

Question

I am trying to generate one mochawesome report that contains all results of the spec files in my Cypress test suite.

Here is my package.json:

{
    "test": "npx cypress run",
    "combine-reports": "mochawesome-merge cypress/reports/mochawesome-report/*.json > mochareports/report.json",
    "generate-report": "marge mochareports/*.json --reportDir mochawesome --assetsDir mochawesome/assets --reportPageTitle index.html"
  },
  "devDependencies": {
    "cypress": "^9.5.4",
    "mocha": "^9.2.2",
    "mochawesome": "^7.1.3",
    "mochawesome-merge": "^4.2.1",
    "mochawesome-report-generator": "^6.2.0"
  }
}

npm run test works as expected.

Running npm run combine-reports, creates mochareports/report.json as expected. I've opened the file in a text editor & it's populated with test stats, results, etc.

Running npm run generate-report displays Reports saved on the console. If I open the HTML page (cypress/reports/mochareports/report.html) in VS Code, HTML is appearing. However, if I open it in a web browser, I get a blank HTML page & the below console error:

The HTML report is being generated, but for some reason is showing up as a blank page in a web browser.

Can someone please show me how to resolve this?

Answer 1

It would be better if you also add the cypress.json file, but I will explain with a simple example,

Here is my cypress.json report configuration

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

And in your package.json I do not see the script to combine all json files for ex:

"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 -- inline",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }

You can get some idea here also - https://medium.com/tech-learn-share/attach-screenshot-into-mochawesome-html-report-in-cypress-ca3792081474