Introduction.

Now t-Triage can import test results from Cypress!. To do it, you'd need to instruct your CI tool (like Jenkins) to create JSON reports with your test results.

This document describes how to install it in your automator dev environment. Soon there will be a document describing to do it in Jenkins.

Mochawesome is a customized Javascript testing reporter for Mocha which generates an HTML/CSS report to visualize test results. Also allows you to generate a JSON output file. As Cypress is built on top of Mocha, it is possible to use this reporter. It stacks track for failed tests and supports context information added for tests, e.g. screenshots to the failed tests.

Installation & usage.

Step 1 - Install Mochawesome.

npm install mochawesome --save-dev

Step 2 - Install Mochawesome-merge. (optional)

By default, for each test file, a separate JSON file will be created. Mochawesome-merge allows to merge several Mochawesome JSON reports into one.

npm install mochawesome-merge --save-dev

Step 3 - Configure Mochawesome as a Cypress Reporter.

It’s possible to add some options for the reporter to customize their behavior. These can be specified in the configuration file cypress.json or via command line options.

Configuration file.

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

overwrite: Set to False to make sure that the report of the previous tests is not overwritten by the current test.

html: Set on False to make sure that the HTML report is not generated after execution of a single test.

json: Set on True to make sure that at the end of every test, a JSON file is created which would contain the details of its test run.

reportDir: To specify the output directory for the generated output.

Command line.

You can pass comma-separated options to the reporter via  --reporter-options flag in the command line.

cypress run --reporter mochawesome --reporter-options reportDir="cypress/results",overwrite=false,html=false,json=true

Step 4 - Adding test context.

It’s possible to make the report detailed with failure screenshots or videos. Adding this to our project makes Cypress check for failures after every test case execution. If it is, it takes the screenshot from the given path and adds it to the report.

Add those lines to the describe block of each test case:

Cypress.on('test:after:run', (test, runnable) => {
    if (test.state === 'failed') {
      const screenshot = `screenshots/${Cypress.spec.name}/${runnable.parent.title} -- ${test.title} (failed).png`;
      addContext({ test }, "/cypress-tests/cypress/"+screenshot);
      addContext({ test }, `../videos/${Cypress.spec.name}.mp4`);
    }
});

Step 5 - Running tests.

Run tests in command line mode. After tests run, a separate JSON file will be created inside the folder selected in the configuration file.

Make sure to delete all reports generated from the previous execution. To add a new npm script to do it, go to package.json file and under scripts write:

"delete:reports": "rm -rf cypress/reports"

Then, add the following script to make sure that the delete report command runs before Cypress command line execution:

"cypress:run": "npm run delete:reports && cypress run"

So, for all tests runs, use the command npm run cypress:run already created in CLI mode.

Step 6 - Merge reports.

Mochawesome-merge allows you to create a single test JSON file by merging all the individual test JSON files. Before merging reports, make sure all reports generated by the previous test execution are removed.

Add an npm script which will be responsible for running the merge tool. For that, go to the package.json file and under scripts write:

"merge:reports": "mochawesome-merge -reportDir cypress/reports/mochawesome-report/*.json > cypress/reports/cypress-combined-report.json"

Once tests run have finished, writing npm run merge:reports command on CLI mode will merge all JSON files generated into one in the specified folder.