Setup Mochawesome reporter in Cypress and verify report generation

Preconditions (3)

Step 1: Install mochawesome and mochawesome-merge npm packages

Step 2: Configure Cypress to use mochawesome reporter in cypress.config.js

Step 3: Run a sample Cypress test

Step 4: Verify that mochawesome report files are generated in the specified folder

Step 5: Open the generated mochawesome report HTML file in a browser

Step 6: Verify the report shows test results with pass/fail status and test details

✅ Expected Result: Mochawesome report files (JSON and HTML) are generated after test run, and the HTML report correctly displays the test results with pass/fail status and details.

Automation Requirements - Cypress

Assertions Needed:

Verify mochawesome report JSON file exists after test run

Verify mochawesome report HTML file exists after test run

Verify report HTML contains test suite and test case names

Verify test pass/fail status is correctly shown in report

Best Practices:

Use cypress.config.js for reporter configuration

Use npm scripts to run tests and generate reports

Use file system checks to verify report files

Avoid hardcoded paths; use relative paths

Clean up reports folder before test run

Automated Solution

Cypress

/// <reference types="cypress" />

import { existsSync, readFileSync } from 'fs';
import path from 'path';

describe('Mochawesome Reporter Setup Test', () => {
  const reportDir = 'cypress/reports/mochawesome';
  const jsonReport = path.join(reportDir, 'mochawesome.json');
  const htmlReport = path.join(reportDir, 'mochawesome.html');

  before(() => {
    // Clean reports folder before tests
    if (existsSync(jsonReport)) {
      // Delete files if needed - simplified here
    }
  });

  it('runs a sample test', () => {
    cy.visit('https://example.cypress.io');
    cy.contains('type').click();
    cy.url().should('include', '/commands/actions');
    cy.get('.action-email').type('test@example.com').should('have.value', 'test@example.com');
  });

  it('verifies mochawesome report files exist and contain test info', () => {
    cy.wait(1000); // wait for report generation
    cy.task('fileExists', jsonReport).should('be.true');
    cy.task('fileExists', htmlReport).should('be.true');

    cy.task('readFile', htmlReport).then((content) => {
      expect(content).to.include('Mochawesome Report');
      expect(content).to.include('Mochawesome Reporter Setup Test');
      expect(content).to.match(/<span class="pass">1</span>/);
    });
  });
});

// In cypress.config.js
// import { defineConfig } from 'cypress';
// export default defineConfig({
//   reporter: 'mochawesome',
//   reporterOptions: {
//     reportDir: 'cypress/reports/mochawesome',
//     overwrite: false,
//     html: true,
//     json: true
//   },
//   e2e: {
//     setupNodeEvents(on, config) {
//       const fs = require('fs');
//       on('task', {
//         fileExists(filePath) {
//           return fs.existsSync(filePath);
//         },
//         readFile(filePath) {
//           return fs.readFileSync(filePath, 'utf8');
//         }
//       });
//     }
//   }
// });

// npm scripts example in package.json
// "scripts": {
//   "test": "cypress run"
// }

This test suite does two things:

Runs a simple Cypress test visiting a page and typing text.
Checks that the mochawesome report files (JSON and HTML) are created after the test run.

The cypress.config.js is configured to use mochawesome as the reporter with JSON and HTML output enabled in a specific folder.

We use Cypress tasks to check if the report files exist and to read the HTML report content. This allows us to assert that the report contains the test suite name and shows the test pass count.

This setup ensures the mochawesome reporter is correctly generating reports and that the reports reflect the test results.

Common Mistakes - 4 Pitfalls

Not configuring the reporter in cypress.config.js

Checking for report files immediately after test without wait

Hardcoding absolute paths for report files

Not using Cypress tasks to access file system

Bonus Challenge

Now add data-driven testing with 3 different URLs and verify mochawesome reports for each run

Show Hint