Cypress fanCy Reports

Generate beautiful reports with dashboard styles for cypress run

Statistics and charts for better understanding of the results

Installation

Install Cypress fanCy Reports with npm

  npm install cypress-fancy-reports

On the config.cypress.js import the path:

const path = require("path");

and implement the node event listener, and the screenshot options:

e2e: {
  setupNodeEvents(on, config) {
    require("cypress-fancy-reports")(on, config);
    return config;
  },

  screenshotOnRunFailure: true,
  screenshotsFolder: path.join(__dirname, "fancy-reports", "screenshots")

}

And set the variables for customization (optional):

Report folder location

• reportsFolder: This variable allows the user to select another folder for the generated reports.

Report color

• defaultHeaderColor: to change the main report color
• defaultHeaderFontColor: to change the main report font color

Chart color

(Total time by suite chart)

• chartTotalTimeBarColor: to change the barplot main color
• chartTotalTimeOpacity: to change the barplot background opacity

(Test time chart)

• chartTestTimeLineColor: to change the line color
• chartTestTimeBackgroundColor: to change the background color
• chartTestTimeOpacity: to change the chart background opacity

env: {
  // fancy reports save location folder
  reportsFolder: path.join(__dirname, "fancy-reports"),
  
  // default header color
  defaultHeaderColor: "#2980b9", 
  defaultHeaderFontColor: "#ffffff",

  // Total time by suite chart configuration
  chartTotalTimeOpacity: "0.5",
  chartTotalTimeBarColor: "#2980b9",
  chartTotalTimeBorderColor: "#2952b9ff",
  chartTotalTimeBorderWidth: "2",

  // Test time chart configuration
  chartTestTimeOpacity: "0.1",
  chartTestTimeBackgroundColor: "#b9294bff",
  chartTestTimeLineColor: "#b92929ff",
  chartTestTimeLineWidth: "2",

}

Demo

Before, in Cypress headless mode your reports were like this:

Now, with Cypress fanCy Reports, you can generate beautiful reports in dashboard styles with statistics and charts like this:

Features

• cards for summary tests (fail and pass) and total time
• card for time efficiency
• charts for Describers and performed tests
• barplot for Describers
• line charts for time tracking of tests
• summary of the fastest and slowest test
• log of all executed tests
• individual time tracking for tests and suites (Describers)
• color scheme customization
• visual badge on executed tests for slowest and fastest test
• screenshot for failed tests
• save report as PDF

and much more...

Support

Please contact the author for support.

Author

• @MarcusGuimaraes

Changelog

Check the CHANGELOG to see what's new in Cypress FanCy Reports.