Reporter - spryker-projects/cypress-boilerplate GitHub Wiki

Overview

cypress-mochawesome-reporter is a reporter plugin for Cypress that generates detailed and visually appealing HTML reports. It provides comprehensive insights into the test results, including screenshots and stack traces, making it easier to identify and troubleshoot test failures.

What is it Used For?

The cypress-mochawesome-reporter is used to:

• Generate detailed HTML reports of Cypress test runs.
• Provide visual representation of test results.
• Include screenshots and stack traces for failed tests.
• Facilitate easier debugging and test result analysis.

How to Configure

The cypress-mochawesome-reporter is already integrated into the Cypress-Boilerplate project. Here are the steps to configure and use it:

Step 1: Install the Reporter

If it's not already installed, you can install the reporter using npm:

npm install cypress-mochawesome-reporter --save-dev

Step 2: Update Cypress Configuration

To enable the reporter, update the Cypress configuration in cypress.config.ts:

const { defineConfig } = require('cypress')

export default defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    reportDir: 'cypress/data/reports',
    overwrite: false,
    html: true,
    json: true,
    charts: true,
    reportPageTitle: 'Cypress Test Results',
    embeddedScreenshots: true,
    inlineAssets: true
  },
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on)
      return config;
    }
  }
})

Configuration Options

The following options can be configured for cypress-mochawesome-reporter:

• reportDir: Directory where the report files will be saved.
• overwrite: Whether to overwrite existing reports (default is false).
• html: Generate HTML report (default is true).
• json: Generate JSON report (default is true).
• charts: Include charts in the report (default is true).
• reportPageTitle: Title of the HTML report page.
• embeddedScreenshots: Embed screenshots in the report (default is true).
• inlineAssets: Inline CSS and JS assets in the report (default is true).
• saveAllAttempts: Save screenshots of all test attempts, set to false to save only the last attempt (default is true).

For more information on reporter options, please refer to the official documentation.

Step 3: Add Reporter to Support file

Ensure that the reporter plugin is added to the cypress/support/e2e.ts file:

// e2e.ts file
import 'cypress-mochawesome-reporter/register'

Step 4: Run Tests with Reporter

To generate the report, simply run your Cypress tests as usual:

npx cypress run

After the tests have completed, the reports will be generated in the specified directory (e.g., cypress/data/reports).

Viewing the Reports

You can view the generated HTML reports by opening the corresponding .html files in your web browser. The reports will include detailed information about each test, including:

• Test name and status (pass/fail).
• Duration of each test.
• Screenshots for failed tests.
• Stack traces for errors.

Example Report Configuration in Cypress-Boilerplate

Here is an example of how the cypress-mochawesome-reporter is configured in the Cypress-Boilerplate project:

cypress.config.ts:

import { defineConfig } from 'cypress'

export default defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    reportTitle: 'mochawesome-report',
    embeddedScreenshots: true,
    inlineAssets: true,
    saveAllAttempts: false,
    reportDir: 'cypress/data/reports',
    showSkipped: true,
  },
  e2e: {
    supportFile: 'cypress/support/e2e.ts',

    setupNodeEvents: async (on, config) => {
      const plugin = await import('cypress-mochawesome-reporter/plugin')
      plugin.default(on)
      on('task', {})

      return config
    },
  },
})

cypress/support/e2e.ts:

import 'cypress-mochawesome-reporter/register'

---

By following this guide, you will be able to set up and configure cypress-mochawesome-reporter in your Cypress-Boilerplate project, enabling you to generate detailed and visually appealing test reports.