Understanding Cypress HTML Reporter

Cypress is a Node.js-based test automation tool that supports element, API, and with developer-friendly features. While testing is crucial, reporting is evenly essential without it, even extensive trial coverage miss value.

This guide covers Cypress Test Reports, their eccentric, importance, and step-by-step instructions for give Cypress HTML Reports in Version 10+ and 9 & amp; below.

What is Cypress Test Report?

Cypress Test Reports offer a comprehensive summary of test executions, providing insights into which exam have surpass, failed, their execution duration, and any encountered errors.

These reports play an important role in debugging and enhancing by giving a clear overview of the testing outcomes.

Cypress supports multiple reporting framework and library, such as Mochawesome,, and TeamCity, catering to diverse reporting want. These tools likewise allow for customization free-base on specific task essential. Typically, Cypress test reports are generated as HTML pages, title with CSS, making them visually appealing and easy to rede.

Importance of Cypress Test Report

Cypress Test Reports play a crucial role in trial mechanization by providing open insights into test execution, failure, and execution. Here are some intellect why Cypress Test Reports are essential:

• Faster Debugging: Cypress Test Reports highlight neglect trial, errors, and stack traces. This facilitate developers quickly name and resolve issues without manual investigating.
• Quality Assurance: Reports see the covering meets functional and execution standard by exhibit passed and miscarry tests. They help teams track defects and maintain software reliability.
• Performance Optimization: Reports capture test execution duration, allowing teams to identify and optimize slow-running exam. This aid improve testing efficiency and velocity up the CI/CD pipeline.
• Stakeholder Visibility: Structured and ocular study do test results understandable for non-technical team members. They help in better decision-making and project progression tracking.
• Seamless CI/CD Integration: Automated story coevals enables continuous monitoring of test quality. It ensures timely feedback and maintains testing consistency in workflow.

Types of Cypress Test Reports

Cypress provides diverse reporting options tailored to different testing and analysis demand. These reports help teams track test execution, debug number, and communicate testing outcomes effectively. Below are the key types of Cypress examination reports:

1. Console Reports

Below are some key features of Console reports:

• Displays real-time test performance details in the terminal.
• Utile for spry debugging and monitoring test advance during CI/CD runs.

2. Cypress Dashboard

Below are some key features of cypress splasher:

• A cloud-based service offering in-depth examination analytics and historical run information.
• Facilitates team coaction and supports parallel test execution.

3. HTML Reports

Below are some key features of HTML Reports:

• Created using plugins likemochawesomefor visually appealing, synergistic sum-up.
• Easy to part and integrate into CI/CD pipelines for streamlined reportage.

4. JUnit XML Reports

Below are some key feature of JUnit XML Reports:

• Follows the standard XML formatting for test upshot.
• Ideal for integration with CI/CD instrument and exam direction systems.

5. Custom Reports

Below are some key features of Custom Reports:

• Built using Cypress ’ s custom reporter API to converge specific labor or organizational needs.
• Allows flexibility in format and content customization.

6. Screenshot and Video Reports

Below are some key features of Screenshot and Video Reports:

• Automatically captured during test failures to aid optic debugging.
• Provides a clear replica of issues and complement early report types.

7. Allure Reports

Below are some key feature of Allure Reports:

• Generated using the Allure framework, offering detailed, interactive brainstorm.
• Supports trend analysis and comprehensive test case documentation.

How to use the Cypress HTML reporter for Version 10

Cypress edition 10 release has major alteration, and so to make the best use of maximum

Note: Below tutorial works for Cypress version 10 and above

Cypress always recommends having the latest version.

Pre-Requisite:

Basic Cypress Framework with Cypress Version 10

Step by Step Guide to Generate Cypress HTML reporter in Cypress adaptation 10

Step 1:Install Cypress newsman, utilise Terminal installcypress-mochawesome-reporter, with command

npm i -- save-dev cypress-mochawesome-reporter

Step 2:Configure Cypress Reporter

Navigate to your cypress constellation file, typically the gens willcypress.config.js

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Add the below line of code

//cypress.config.js const {defineConfig} = require (`` cypress ''); module.exports = defineConfig ({reporter: 'cypress-mochawesome-reporter ', e2e: {setupNodeEvents (on, config) {require ('cypress-mochawesome-reporter/plugin ') (on);},},});

The reporter is mentioned as the& # 8216; cypress-mochawesome-reporter & # 8217;, which you installed in step 1.

Cypress 10 and above version has a separate component for e2e tests, inside that you need to add the required statement as shown above.

Step 3:Configure Supporte2e.js

Navigate tocypress/support/e2e.js, and add the import statement employ the command below.

import 'cypress-mochawesome-reporter/register ';

The above Steps complete the basic HTML reporter setup

Step 4:Execute your tryout

Execute your tests with the below command

npx cypress run -- e2e

Alternatively, you can also execute using npm run trial, if you have configured scripts inpackage.json

Step 5:View HTML reports

Once the execution is consummate, Cypress Generates the HTML report. Navigate to the folder with the gens & # 8220; story & # 8221;, you will chance the HTML report as witness below

Cypress Reports Folder VS Code explorer view

If you navigate to the reports pamphlet, you can see the HTML file, along with that there are many other brochure created such as screenshots, and asserts which are expect for the HTML. If you need to share this report, so you necessitate to share all the plus and screenshot pamphlet as well, else the HTML reporter content will break. A simple solution for this is to create a report with in-line assets.

How to Create Simple Shareable HTML Reports in Cypress (Version 10 or above)

To make a shareable HTML report, you still need to postdate Steps 1 to 3 observe in the previous section after that you need to follow the below footstep.

Navigate to Cypress Config File, Typically namedcypress.config.jsadd the inline options

//cypress.config.js const {defineConfig} = require (`` cypress ''); module.exports = defineConfig ({reporter: 'cypress-mochawesome-reporter ', picture: false, reporterOptions: {charts: true, reportPageTitle: 'Cypress Inline Reporter ', embeddedScreenshots: true, inlineAssets: true, //Adds the asserts inline}, e2e: {setupNodeEvents (on, config) {require ('cypress-mochawesome-reporter/plugin ') (on);},},});

In the above codification

• charts: true & # 8211;Genarates Chart in HTML report
• reportPageTitle: & # 8216; Cypress Inline Reporter & # 8217; -Report title will be set to the mentioned twine
• embeddedScreenshots: true& # 8211; Screenshot will be implant within the report
• inlineAssets: true& # 8211; No separate assets folder will be created

Additionally, if you want to change the account directory use thereportDiralternative insidereporterOptionsas seen below

For Example,

'' reportDir '': `` cypress/report '',

Sample HTML Inline Report

VS Code Explorer View for Reports booklet

Note:The cypress-mochawesome-reporter, uses the Cypress before and after sweetener, if you override the before and after come-on in your Cypress configuration file so the HTML report might not work in an expected way, Ensure that whenever you override the before/after hook you need to callbeforeRunHook () or afterRunHook ()functions ofcypress-mochawesome-reporteras explained below.

//Example of overriding before and after hook with cypress HTML reporter //cypress.config.js const {defineConfig} = require ('cypress '); const {beforeRunHook, afterRunHook} = require ('cypress-mochawesome-reporter/lib '); module.exports = defineConfig ({reporter: 'cypress-mochawesome-reporter ', e2e: {setupNodeEvents (on, config) {on ('before: run ', async (details) = & gt; {console.log ('override before: run '); await beforeRunHook (point);}); on ('after: run ', async () = & gt; {console.log ('override after: run '); await afterRunHook ();});},},});

How to Generate Cypress HTML reporter for Below Cypress Version 9 and below

Note:Below tutorial works only for Cypress Version 9 or below

How to use the Cypress HTML reporter for Cypress Version 9 and below

Step 1:Install cypress newsman

Using Terminal installcypress-mochawesome-reporter, with command

npm i -- save-dev cypress-mochawesome-reporter

Step 2:Configure Cypress HTML Reporter

Navigate to the cypress.json file

{`` reporter '': `` cypress-mochawesome-reporter '',}

Step 3:Import cypress-mocha-awesome newsperson

Navigate to cypress/support/index.js file and add the below line of code

import 'cypress-mochawesome-reporter/register ';

Step 4:Add an entry to plugin/index.js

Step 5:Execute your tryout using the below command

npx cypress run

Alternatively, you can also execute using npm run test, if you have configured scripts inpackage.json

Step 6:View HTML study

Once the execution is complete, Cypress Generates the HTML report. Navigate to the folder with the gens & # 8220; story & # 8221;, you will find the HTML account

If you pilot to the study folder, you can see the HTML file, along with that there are many former folders created such as screenshots, and asserts which are take for the HTML.

If you need to portion this story, then you need to share all the assets and screenshot folder as good, else the HTML reporter content will break. A simple solution for this is to create a study with in-line assets.

How to Create Simple Shareable HTML Reports in Cypress (Version 9 or below)

To create a shareable HTML report, you still require to follow Steps 1 to 3 remark in the previous section after that you need to postdate the below step.

Navigate to Cypress Config File,cypress.json, and add the inline options

{`` reporter '': `` cypress-mochawesome-reporter '', `` reporterOptions '': {`` embeddedScreenshots '': true, `` chart '': true, `` reportPageTitle '': `` Cypress Inline Report '', `` inlineAssets '': true}}

In the above code

• charts: true& # 8211; Generates Chart in HTML report
• reportPageTitle: & # 8216; Cypress Inline Reporter & # 8217;& # 8211; Report title will be set to advert string
• embeddedScreenshots: true& # 8211; Screenshot will be embedded within report
• inlineAssets: true& # 8211; No separate plus folder will be created

Additionally if you desire to change the account directory use thereportDiroption insidereporterOptions

Example:

& # 8220; reportDir & # 8221;: & # 8220; cypress/report & # 8221;,

Example of Inline Report

VSCode Explorer view reports folder

Note: cypress-mochawesome-reporter, uses the Cypress before and after come-on, if you reverse the before and after come-on in your Cypress configuration file, so the HTML report might not work in an expected way. Ensure that whenever you reverse the before/after hook you need to callbeforeRunHook () and afterRunHook ()functions ofcypress-mochawesome-reporteras seen below.

//Overriding before and after hook //cypress/plugins/index.js const {beforeRunHook, afterRunHook} = require ('cypress-mochawesome-reporter/lib '); module.exports = (on) = & gt; {on ('before: run ', async (details) = & gt; {console.log ('override before: run '); expect beforeRunHook (details);}); on ('after: run ', async () = & gt; {console.log ('override after: run '); expect afterRunHook ();});};

Talk to an Expert

Conclusion

Cypress HTML reporter is helpful when you want to share with stakeholders, you can even integrate it with your CI/CD grapevine. Since it embeds the screenshots as well it is easy to debug and understand the failure scenarios.

BrowserStack is a cloud-based examination platform, that provides thousands of real device for testing. BrowserStack records the videos and screenshots during the execution. need only configuration changes, no need to vary your test cases.

Related Guides