The cypress-mochawesome-html-report-example from ebazhanov

cypress-mochawesome-html-report-example's Introduction

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