Mochawesome reporter setup in Cypress - Framework Patterns

Framework Mode - Mochawesome reporter setup

Folder Structure

cypress/
├── e2e/                  # Test specs
│   └── example.cy.js
├── fixtures/             # Test data files
│   └── example.json
├── support/              # Support commands and utilities
│   ├── commands.js
│   └── e2e.js
cypress.config.js         # Cypress configuration file
package.json             # Project dependencies and scripts
mochawesome-report/      # Generated Mochawesome reports (output folder)

Test Framework Layers

• Test Specs (cypress/e2e): Contains the actual test files written in Cypress syntax.
• Support Layer (cypress/support): Custom commands and reusable utilities to keep tests clean.
• Fixtures (cypress/fixtures): Static test data like JSON files used in tests.
• Configuration (cypress.config.js): Defines environment settings, reporter setup, and test options.
• Reporting Layer: Mochawesome reporter integrated via config and npm scripts to generate detailed HTML and JSON reports.

Configuration Patterns

To set up Mochawesome reporter in Cypress, configure cypress.config.js and package.json as follows:

// cypress.config.js
import { defineConfig } from 'cypress'

export default defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'mochawesome-report',
    overwrite: false,
    html: true,
    json: true
  },
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here if needed
    },
    baseUrl: 'http://localhost:3000',
  },
})

// package.json (scripts section)
{
  "scripts": {
    "test": "cypress run",
    "test:report": "cypress run --reporter mochawesome"
  },
  "devDependencies": {
    "cypress": "^12.0.0",
    "mochawesome": "^7.0.0"
  }
}

Environment Handling: Use cypress.env.json or CLI flags to manage credentials or URLs per environment.

Test Reporting and CI/CD Integration

• Mochawesome Reporter: Generates detailed HTML and JSON reports after test runs.
• Report Output: Stored in mochawesome-report/ folder for easy access and sharing.
• CI/CD Integration: Add npm run test:report in CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests and generate reports automatically.
• Artifacts: Configure CI to save the mochawesome-report/ folder as build artifacts for review.
• Notifications: Use CI tools to notify team members with report links on test failures or successes.

Best Practices

1. Keep Reports Clean: Configure Mochawesome to not overwrite reports but create new ones per run for history.
2. Use JSON + HTML Reports: JSON reports enable further processing or integration with other tools.
3. Separate Configurations: Use environment variables or separate config files for different test environments.
4. Integrate with CI: Automate report generation and artifact storage in your CI pipeline for team visibility.
5. Use Support Files: Keep test code clean by placing reusable commands and hooks in cypress/support.

Self Check

Where in this folder structure would you add a new custom command to log in a user for multiple tests?

Key Result

Organize Cypress tests with clear folder layers and configure Mochawesome reporter in cypress.config.js for detailed HTML/JSON reports.