Cypress Reporters

In this article we are going to see how to generate reports from Cypress test run. Cypress is built on top of mocha, so any reporter built with mocha can be used here.

Now we will see the steps involved to generate,

1. junit .xml report
2. mochawesome .html report

Let we first install required packages.

Generate Reports :

1. junit — .xml report :

We want to generate multiple reports like junit-xml and a json.

To generate multiple junit reports, let we install

npm install — save-dev cypress-multi-reporters mocha-junit-reporter

Include below code in cypress.json

{
  "screenshotsFolder":"TestResults/assets",
  "reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "configFile": "reporter-config.json"
  }
}

Now create reporter-config.json under project folder

{
 "reporterEnabled": "mocha-junit-reporter",
 "mochaJunitReporterReporterOptions": {
  "mochaFile": "cypress/results/junit/results-[hash].xml"
 }
}

And in package.json

"scripts": {
  "cy:open": "cypress open",
  "report": "cypress run --reporter cypress-multi-reporters --reporter-options configFile=reporter-config.json"
},

1. mochawesome report

Mochawesome is a custom reporter for use with the Javascript testing framework, mocha. Works in conjunction with mochawesome-report-generator to generate a standalone HTML/CSS report to help visualize your test runs.

Its features are :

• Simple, clean, and modern design
• Beautiful charts (via ChartJS)
• Support for test and suite nesting
• Displays before and after hooks
• Review test code inline
• Stack trace for failed tests
• Support for adding context information to tests
• Filters to display only the tests you want
• Responsive and mobile-friendly

Two main files it generates are:

mochawesome.json — The raw json output used to render the report.

mochawesome.html — The rendered report file

Cypress executes each spec in isolation. This leads to Mocha generating a separate test report for each spec. So we need mochawesome-merge (npm package) to merge all the reports to get final one.

Now to install mochawesome package,

npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator junit-merge

Here we have installed,

mocha,

mochawesome

mochawesome-merge : to merge isolated spec reports

mochawesome-report-generator : to generate html reports from mochawesome reports

junit-merge : to merge junit xml spec files into reports

Now, let we modify configuration in our reports-config.json file,

{
 "reporterEnabled": "mocha-junit-reporter, mochawesome",
 "mochaJunitReporterReporterOptions": {
  "mochaFile": "cypress/results/junit/results-[hash].xml"
 },
 "reporterOptions": {
  "reportDir": "cypress/results/mochawesome",
  "overwrite": false,
  "html": false,
  "json": true
 }
}

When we run from terminal

npm cypress run

Will generate a separate report file for each spec in two different formats as below.

Merge reports

To merge mochawesome reports :

To merge these spec reports into a single report file, include the below script in package.json

"mochawesome-merge":"npx mochawesome-merge \"cypress/results/mochawesome/*.json\" > mochawesome.json && npx marge mochawesome.json",

And run from terminal,

npm run mochawesome-merge

Which will generate mochawesome.html report.

To merge junit reports :

When we run ‘npm run junit-merge’, below report will be generated,

Attach Screenshots :

Now to attach screenshot in case of test failure we are going to use inbuilt helper method. Mochawesome ships with an addContext helper method that can be used to associate additional information with a test. This information will then be displayed inside the report.

In order to attach the screenshot after our test is run, we need to listen to a Cypress event called “test:after:run” and add additional code. This can be added in Cypress “support/index.js” file because this file is processed automatically before and/or after our test execution.

In our case, we want to pass in the path to where our screenshot is stored.(“screenshotsFolder”:”TestResults/assets”) Now to attach screenshots in case of test failure, add below code into support/index.js.

import addContext from 'mochawesome/addContext'
Cypress.on('test:after:run', (test, runnable) => {
 if (test.state === 'failed') {
        let item = runnable
        const strParts = [runnable.title]
          // Iterate through all parents and grab the titles
        while (item.parent) {
          strParts.unshift(item.parent.title)
          item = item.parent
        }
        const fullTestName = strParts
                .filter(Boolean)
                .join(' -- ')     -- Joins test title    
        const imageUrl = `${Cypress.config('screenshotsFolder')}/${
          Cypress.spec.name
        }/${fullTestName} (failed).png`
            addContext({ test }, imageUrl)
      }
    })

We want to generate a final report with the latest files only, so let we delete all old files under cypress/results/* (both junit and mochawesome).

To remove the files in Windows 10 from npm script, I am going to use del-cli package.

npm install --save-dev dev-cli

And we will include some more scripts in package.json,

"scripts": {
  "cy:open": "npx cypress open",
  "clean": "del-cli cypress/results/*",
  "prereport": "npm run clean",
  "mochawesome-merge": "npx mochawesome-merge \"cypress/results/mochawesome/*.json\" > mochawesome.json && npx marge mochawesome.json",
  "junit-merge": "npx junit-merge -d cypress/results/junit -o cypress/results/junit/junit-results.xml",
  "report": "cypress run --reporter cypress-multi-reporters --reporter-options configFile=reporter-config.json",
  "cypress:run": "npm run prereport && npx cypress run",
  "merge:reports" : "npm run mochawesome-merge && npm run junit-merge"
 }

At last to run all tests, generate reports and to merge the reports,

npm run cypress:run
npm run merge-reports

The final report with screenshot is,

References :

Reporters | Cypress Documentation

mochawesome — npm (npmjs.com)