Skip to content

A simple example of the integration Cypress with Mochawesome library to generate HTML and JSON report after tests run.

Notifications You must be signed in to change notification settings

Ebazhanov/cypress-mochawesome-html-report-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML and JSON report with Mochawesome library

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

mocha npm version


How to setting up in your project

Install

  • $ yarn add mochawesome --dev
  • $ yarn add mochawesome-merge@2.1.0 --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/cypress@1.26.0

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: CircleCI

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

About

A simple example of the integration Cypress with Mochawesome library to generate HTML and JSON report after tests run.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published