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.

Practice

1. What is the main purpose of using the mochawesome reporter in Cypress testing?

easy

A. To create test data for Cypress tests

B. To speed up test execution time

C. To automatically fix failing tests

D. To generate clear and detailed HTML and JSON test reports

Solution

1. Step 1: Understand the role of reporters in Cypress

   Reporters provide a way to view test results in a readable format after tests run.

2. Step 2: Identify what mochawesome specifically does

   Mochawesome generates detailed HTML and JSON reports that are easy to read and share.

3. Final Answer:

   To generate clear and detailed HTML and JSON test reports -> Option D

4. Quick Check:

   Reporter purpose = Generate reports [OK]

Hint: Mochawesome = report generator, not test runner or fixer [OK]

Common Mistakes:

• Thinking mochawesome speeds up tests
• Confusing mochawesome with test data tools
• Assuming mochawesome fixes test failures

2. Which of the following is the correct way to enable mochawesome reporter in cypress.config.js?

easy

A. reporter: 'mochawesome', reporterOptions: { reportDir: 'cypress/reports' }

B. reporter: 'mocha', reporterOptions: { output: 'cypress/reports' }

C. reporter: 'mochawesome', outputDir: 'cypress/reports'

D. reporter: 'mochawesome', reportPath: 'cypress/reports'

Solution

1. Step 1: Recall the correct reporter property name

   The reporter is set using the key reporter with value 'mochawesome'.

2. Step 2: Use the correct options key for mochawesome

   The options for mochawesome are passed under reporterOptions, including reportDir for output folder.

3. Final Answer:

   reporter: 'mochawesome', reporterOptions: { reportDir: 'cypress/reports' } -> Option A

4. Quick Check:

   Correct keys = reporter + reporterOptions [OK]

Hint: Use reporterOptions, not outputDir or reportPath [OK]

Common Mistakes:

• Using 'mocha' instead of 'mochawesome'
• Wrong option keys like outputDir or reportPath
• Missing reporterOptions wrapper

3. Given this snippet in cypress.config.js:

reporter: 'mochawesome',
reporterOptions: {
  reportDir: 'cypress/reports',
  overwrite: false,
  html: false,
  json: true
}

What will be the result after running tests?

medium

A. HTML and JSON reports will be generated and overwritten each run

B. Only HTML reports will be generated and overwrite previous reports

C. Only JSON reports will be generated without overwriting previous ones

D. No reports will be generated because html is false

Solution

1. Step 1: Analyze reporterOptions settings

   html is set to false, so no HTML report is generated. json is true, so JSON report is generated.

2. Step 2: Understand overwrite behavior

   overwrite is false, so new reports will not overwrite existing ones, allowing multiple JSON reports to accumulate.

3. Final Answer:

   Only JSON reports will be generated without overwriting previous ones -> Option C

4. Quick Check:

   html=false + json=true + overwrite=false = JSON only, no overwrite [OK]

Hint: html false means no HTML report; overwrite false keeps old reports [OK]

Common Mistakes:

• Assuming HTML report is generated when html=false
• Thinking overwrite=false deletes old reports
• Confusing json and html options

4. You configured mochawesome in cypress.config.js but after running tests, no report files appear. Which fix is most likely correct?

medium

A. Remove reporterOptions from config to fix issue

B. Install mochawesome and mochawesome-merge packages and update config

C. Change reporter to 'mocha' to generate reports

D. Run tests with --no-report flag to enable reports

Solution

1. Step 1: Check if mochawesome packages are installed

   Mochawesome requires installing both mochawesome and mochawesome-merge packages to generate and merge reports.

2. Step 2: Verify config and installation

   Without these packages installed, no reports will be created even if config is correct.

3. Final Answer:

   Install mochawesome and mochawesome-merge packages and update config -> Option B

4. Quick Check:

   Missing packages = no reports [OK]

Hint: Always install mochawesome and merge packages before running tests [OK]

Common Mistakes:

• Removing reporterOptions thinking it fixes issue
• Changing reporter to 'mocha' which doesn't generate mochawesome reports
• Using wrong CLI flags like --no-report

5. You want to generate a single combined HTML report after running multiple Cypress test runs with mochawesome. Which approach is correct?

hard

A. Use mochawesome-merge to combine JSON reports, then generate HTML from merged JSON

B. Run tests with overwrite: true and html: true to auto-merge reports

C. Set reporter to 'mochawesome-merge' in cypress.config.js to merge reports automatically

D. Run tests multiple times with html: false and manually copy JSON files into one

Solution

1. Step 1: Understand mochawesome report generation

   Mochawesome generates separate JSON reports per test run; it does not merge automatically.

2. Step 2: Use mochawesome-merge tool

   mochawesome-merge combines multiple JSON reports into one, which can then be converted to a single HTML report.

3. Step 3: Confirm other options are incorrect

   overwrite: true overwrites reports, no auto-merge; 'mochawesome-merge' is not a reporter; manual copying is error-prone.

4. Final Answer:

   Use mochawesome-merge to combine JSON reports, then generate HTML from merged JSON -> Option A

5. Quick Check:

   Merge JSON then generate HTML = combined report [OK]

Hint: Merge JSON reports first, then create one HTML report [OK]

Common Mistakes:

• Expecting mochawesome to auto-merge reports
• Setting reporter to 'mochawesome-merge' which is not valid
• Manually copying JSON files without merging