Mochawesome reporter setup in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary purpose of the Mochawesome reporter in Cypress?

Choose the best description of what Mochawesome reporter does when used with Cypress tests.

A It automatically fixes failing tests by retrying them multiple times.

B It speeds up the execution of Cypress tests by parallelizing them.

C It generates detailed HTML and JSON test reports after Cypress test runs.

D It replaces Cypress's default browser for running tests.

💡 Hint

Think about what a reporter typically does in testing frameworks.

Mochawesome is a reporter that creates detailed, easy-to-read HTML and JSON reports from Cypress test results. It does not affect test execution speed or retry logic.

❓ Predict Output

intermediate

What is the output after running Cypress with Mochawesome configured?

Given the following cypress.config.js snippet, what files will Mochawesome generate after tests complete?

Cypress

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports',
    overwrite: false,
    html: true,
    json: true
  }
});

A HTML and JSON report files inside the 'cypress/reports' folder.

B Only JSON report files inside the 'cypress/reports' folder.

C Only HTML report files inside the 'cypress/reports' folder.

D No report files are generated because 'overwrite' is false.

💡 Hint

Check the reporterOptions for file types enabled.

The configuration enables both html and json reports, so both file types will be generated in the specified folder. The overwrite option controls if reports overwrite existing files, but does not prevent generation.

❓ assertion

advanced

Which assertion correctly verifies Mochawesome report file creation in a Node.js script?

You want to check if the Mochawesome HTML report file cypress/reports/mochawesome.html exists after tests run. Which assertion is correct?

Cypress

const fs = require('fs');
const assert = require('assert');

// Assertion to check file existence:

A assert.strictEqual(fs.existsSync('cypress/reports/mochawesome.html'), true);

B assert.ok(fs.readFileSync('cypress/reports/mochawesome.html'));

C assert.equal(fs.exists('cypress/reports/mochawesome.html'), true);

D assert.isTrue(fs.exists('cypress/reports/mochawesome.html'));

💡 Hint

Check Node.js fs method names and assertion syntax.

fs.existsSync is the correct synchronous method to check file existence. assert.strictEqual compares the boolean result to true. Other options use invalid methods or incorrect assertion syntax.

🔧 Debug

advanced

Why does the Mochawesome report not generate after Cypress tests run?

Given this cypress.config.js snippet, tests run successfully but no Mochawesome report is created. What is the likely cause?

Cypress

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // no reporter setup here
    }
  },
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports',
    overwrite: true,
    html: true,
    json: true
  }
});

A Mochawesome requires an additional plugin installation to generate reports.

B The reportDir path is incorrect and should be absolute, not relative.

C The 'overwrite' option set to true prevents report generation.

D The reporter must be configured inside the setupNodeEvents function to work properly.

💡 Hint

Check how Cypress expects reporters to be configured in version 10+.

In Cypress 10 and later, reporters must be configured inside the setupNodeEvents function for them to work. Setting reporter and reporterOptions outside does not activate the reporter.

❓ framework

expert

How to integrate Mochawesome with Cypress and merge multiple JSON reports?

You run Cypress tests in parallel and get multiple Mochawesome JSON reports. Which approach correctly merges these reports into a single HTML report?

A Use the <code>cypress-mochawesome-reporter</code> plugin which merges reports internally without extra steps.

B Use the <code>mochawesome-merge</code> package to combine JSON files, then generate HTML with <code>mochawesome-report-generator</code>.

C Run Cypress tests sequentially to avoid multiple JSON reports and generate one HTML report automatically.

D Configure Cypress to output a single JSON report by setting <code>overwrite: true</code> in reporterOptions.

💡 Hint

Think about how to handle multiple JSON files from parallel runs.

When running tests in parallel, multiple JSON reports are created. The mochawesome-merge tool merges these JSON files into one. Then mochawesome-report-generator creates a combined HTML report. Other options either do not merge or are incorrect.