Generate an HTML Report for Cypress Test Results

This document guides you to generate an HTML report for your Cypress test results.

To generate an HTML report first we should install the cypress-mochawesome-reporter plugin in your project.

To install this plugin in your project Open the New terminal -> type the below command.

npm i --save-dev cypress-mochawesome-reporter

1. Add below Java script code in cypress-config.json file.

   "reporter": "cypress-mochawesome-reporter",
     "reporterOptions": {
       "reportDir": "cypress/reports",
       "charts": true,
       "reportPageTitle": "My Test Suite",
       "embeddedScreenshots": true,
       "inlineAssets": true
     },
     "video": false
   

2. Open the index.js file which is in the cypress à plugin folder.

   module.exports = (on, config) => {
     require('cypress-mochawesome-reporter/plugin')(on);
   };
   

3. Navigate to the cypress -> support folder open the e2e.js file and add the below import command.

   import 'cypress-mochawesome-reporter/register';

4. After configuring all the above commands run the cypress test. After completion of the test execution, you can see the results in the cypress -> reports directory.
   
5. If you choose “video”: true in step 2, then all videos’ recordings will be stored in the cypress -> reports -> video folder.
6. In in cypress->reports folder, you can see index.html. Once your automation scripts are executed you can see the test results in this index.html file.