HTML and JSON report with Mochawesome library

This is the simple example for integrating Cypress with Mochawesome library to generate HTML and JSON report.

---

How to setting up in your project

Install

• $ yarn add mochawesome --dev
• $ yarn add [email protected] --dev
• $ yarn add mochawesome-report-generator --dev

Add the following code inside your cypress.json

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

How to generate report Locally

• $ yarn start & cypress run --headless --browser chrome
• $ npx mochawesome-merge --reportDir cypress/results > cypress/merged-report.json
• $ npx marge cypress/merged-report.json -o cypress/mochawesome-html-report

Find your HTML report in the .../cypress/mochawesome-html-report/merged-report.html

How to generate report in Circleci

Add this configuration into your config.yml file

version: 2.1

orbs:
  cypress: cypress-io/[email protected]

workflows:
  build:
    jobs:
      - cypress/run:
          install-command: yarn install --frozen-lockfile
          start: yarn start
          wait-on: 'http://localhost:3000'
          post-steps:
            - run:
                name: Create merged-report Directory
                command: mkdir cypress/merged-report/
            - run:
                name: Merge mochawesome jsons in one file
                when: always
                command: npx mochawesome-merge --reportDir cypress/results > cypress/merged-report/merged-report.json
            - run:
                name: Generate mochawesome html report
                when: always
                command: npx marge cypress/merged-report/merged-report.json -o cypress/mochawesome-html-report
            - store_artifacts:
                name: Uploading mochawesome-merged-report.json
                path: cypress/merged-report
            - store_artifacts:
                name: Uploading mochawesome-html-report
                path: cypress/mochawesome-html-report

Demo:

ToDos:

• find the way to attach screenshots & video on failure

P.S. if you want to try something else look at Allure 2 report here