Mochawesome reporter setup in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Mochawesome reporter in Cypress configuration.

Cypress

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

module.exports = defineConfig({
  reporter: [1],
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    }
  }
});

Drag options to blanks, or click blank then click option'

A'mochaawesome'

B'mochawesome'

C'mochawesomer'

D'mochawesome-reporter'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect reporter names like 'mochawesome-reporter' or misspelled versions.

The correct reporter name to use is 'mochawesome'. This tells Cypress to use the Mochawesome reporter for test results.

2fill in blank

medium

Complete the code to add Mochawesome reporter options in Cypress configuration.

Cypress

module.exports = defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: [1],
    overwrite: false,
    html: true,
    json: true
  },
  e2e: {
    setupNodeEvents(on, config) {}
  }
});

Drag options to blanks, or click blank then click option'

A'cypress/reports/mochawesome-report'

B'cypress/reports/html'

C'mochawesome-report'

D'reports/mocha'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a path that does not exist or is not consistent with Cypress folder structure.

The reportDir option specifies the folder where Mochawesome saves reports. A common path is 'cypress/reports/mochawesome-report'.

3fill in blank

hard

Fix the error in the reporter options to correctly disable HTML report generation.

Cypress

reporterOptions: {
  html: [1],
  json: true
}

Drag options to blanks, or click blank then click option'

A'false'

Bnull

C0

DFalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'false' as a string instead of the boolean false.

The html option expects a boolean false to disable HTML report generation. Using a string or other types will not work correctly.

4fill in blank

hard

Fill both blanks to correctly require and register Mochawesome in the Cypress plugins file.

Cypress

module.exports = (on, config) => {
  require([1])(on);
  return config;
};

// In cypress.config.js
setupNodeEvents(on, config) {
  return require([2])(on, config);
}

Drag options to blanks, or click blank then click option'

A'mochawesome/register'

B'cypress-mochawesome-reporter/plugin'

C'mochawesome/plugin'

D'mochawesome-reporter/register'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up plugin and register module names.

Using incorrect or non-existent module paths.

To use Mochawesome reporter with Cypress including screenshots and video integration, you require 'cypress-mochawesome-reporter/plugin' in the plugins file (older Cypress) and in the setupNodeEvents function (newer Cypress).

5fill in blank

hard

Fill all three blanks to configure Cypress to generate Mochawesome reports with screenshots and videos.

Cypress

module.exports = defineConfig({
  reporter: [1],
  reporterOptions: {
    reportDir: [2],
    overwrite: false,
    html: true,
    json: true
  },
  video: [3],
  e2e: {
    setupNodeEvents(on, config) {
      return require('cypress-mochawesome-reporter/plugin')(on);
    }
  }
});

Drag options to blanks, or click blank then click option'

A'mochawesome'

B'cypress/reports/mochawesome-report'

CTrue

DFalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting video to false disables recording screenshots and videos.

Using wrong paths for reportDir.

Set reporter to 'mochawesome', reportDir to 'cypress/reports/mochawesome-report', and enable video recording by setting it to true.