Cypress How to Configure HTML Reports with Screenshot Step by Step Guide
Tags: cypress, mocha, beginners, angular
Published: 2021-06-17 13:09:05

You might have written thousands of test cases but what makes you proud of it is, when you visualize the test results to stakeholders in an understandable way. There is a lot of articles over the internet to Integrate HTML reports into Cypress but when it comes to screenshot integration it's very difficult and time-consuming. The complexity is more.
In this article, I am presenting you Step by Step guide to integrate HTML results into your Cypress Automation Framework with Screenshots in an easy way.
This article explains Integrating HTML Results or reports with embedded Screenshot using cypress mochawesome reporter

This plugin is built on top of the mocha awesome report just to make life easy, so some of the options available in the mocha awesome reports are available here too.

Let's start
**Assumptions**:
You already have set up a cypress framework with a few test cases running.

###Step by Step Guide to Integrate HTML Results with Screenshot into your Cypress Automation Framework using cypress mochawesome reporter

#### Step 1: Install cypress-mochawesome-reporter
In *Visual Studio Code*, Navigate to *Terminal* (Ensure present working directory is your Project root level directory) type below command.

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

#### Step 2: Add an entry to your cypress.json file.
Open, `cypress.json` file which is located in your project root directory, add the below entries.

```
"reporter": "cypress-mochawesome-reporter",
  "reporterOptions": {
    "reportDir": "cypress/reports",
    "charts": true,
    "reportPageTitle": "My Test Suite",
    "embeddedScreenshots": true,
    "inlineAssets": true
  },
  "video": false
  ```
Sample Image of Report configuration in `cypress.json`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onwyisaznejvx4ynhktd.png)
 


####Step 3: Add an entry in plugin/index.js
From your *Project Root Folder*, Navigate to `cypress` folder > `plugin` folder> `index.js` file
or 
Simply, Open the` index.js` file located inside the `plugin` folder. add the below code.


```
module.exports = (on, config) => {
  require('cypress-mochawesome-reporter/plugin')(on);
};
```
Example Screenshot
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te3pltgm7iyh7kp6rycr.png)
 
####Step 4: Add an entry in the support/index.js
From the *Project root folder* > Navigate to `cypress` folder > `support` folder> `index.js` file
Add below entry

```
import 'cypress-mochawesome-reporter/register';
```
Example Screenshot
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrcg4b33p79lt6bbkbbd.png)
 

**That's all you are done with Set up!!!**

####Step 5: Execute your test in the command line
You can use below command to execute your tests in command line
```
npx cypress run
```
*Alternatively, you can also run using your package.json config, if you have configured it already.*

####Step 6: View the result file
The result file is located in the `reportDir` option value which we mentioned in **Step 2**. In our example, we have mentioned `cypress/reports`. 
So, From your *Project Root Directory* > Navigate to `cypress` folder > `reports` folder > `index.html` file.

The `index.html` is your **result** file, just open in chrome or any browser

**Index.html file looks like below.**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8uzhafpz73ttshp5ey6.png)
 
###Step 7: Look for the attached embedded screenshot
The screenshot will be captured for all failed tests, so in order to view the screenshot Just **click on Failed Test**. The screenshot will appear.
Example Screenshot of Failed Test and embedded screenshot
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss2zi4hizz1znvws6kja.png)
 
####Frequently Asked Questions:
**1. Can I disable the Screenshot?**
*Yes, You can disable screenshots, In the cypress.json file change the below code.*
`"embeddedScreenshots": false,`
**2. How can change the default screenshot folder?**
*You can change the default screenshot folder using the below command*

 `"screenshotsFolder": "images"`

Here, `images` is the folder name you can change it to any valid path like `cypress/images`, etc.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3r6d9jmwy28pms056j1.png)
 
**3. Can I use this plugin with cypress-multi-reporters to configure both Junit and HTML results?**
*Yes, you can use this plugin to configure multiple reporters.*
If you want to configure multiple reports you should use the below code in cypress.json the folder
```
"reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "cypress-mochawesome-reporter, mocha-junit-reporter",
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/reports/junit/results-[hash].xml"
    },
    "cypressMochawesomeReporterReporterOptions": {
      "charts": true,
      "reportPageTitle": "custom-title"
    }
  },
  "video": false
  ```
**4. How to enable inline CSS and styles in mocha awesome HTML reports?**
*To enable inline styles and a single HTML file (without any assets files) you need to turn on the option*

	`"inlineAssets": true`

Hope you enjoyed this…

**Reference:**
 npm: https://www.npmjs.com/package/cypress-mochawesome-reporter
 git: https://github.com/LironEr/cypress-mochawesome-reporter#readme
 *This article is written with the intention of helping the community*

<a href='https://buymeacoffee.com/ganeshhegde'><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utos422baf6mo835oms4.png" alt="https://buymeacoffee.com/ganeshhegde"></a>
 
*If you need any help, support or guidance feel free to reach me on LinkedIn*
LinkedIn|https://www.linkedin.com/in/ganeshsirsi/