Attach Screenshot into Mochawesome HTML Report in Cypress

I will explain how to add an amazing report to our Cypress project. We know that Test reports are a critical part of any test automation framework.

By looking at the test reports we can easily identify the number of passed, failed, and skipped test cases.

With that report, we can gain a clear idea about the status of the application and the health of our application.

Cypress is based on Mocha JS and we know that Mocha JS is a mature product with many custom extensions.

Cypress will assist in obtaining screenshots for each failed test. So let’s see how we can attach screenshots of our test report for failed test cases.

Step 1: Installation

1. Install Mocha

npm install mocha 

2. Install cypress-multi-reporters

npm install cypress-multi-reporters 

3. Install mochawesome

npm install mochawesome 

4. Install mochawesome-merge

npm install mochawesome-merge 

5. Install mochawesome-report-generator

npm install mochawesome-report-generator

One Command to install all the above ones: -

npm install mocha cypress-multi-reporters mochawesome mochawesome-merge mochawesome-report-generator

When you do, you will see that all these dependencies are installed and your package.json file,

"dependencies": {
  "cypress-multi-reporters": "^1.4.0",
  "mocha": "^8.3.2",
  "mochawesome": "^6.2.2",
  "mochawesome-merge": "^4.2.0",
  "mochawesome-report-generator": "^5.2.0"
}

Step 2:

Add reporter settings in cypress.json

{
  "reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "mochawesome",
    "mochawesomeReporterOptions": {
      "reportDir": "cypress/reports/mocha",
      "quite": true,
      "overwrite": false,
      "html": false,
      "json": true
    }
  }
}

mochawesome-report-generator options.

While considering above chart and our json config, we set ‘ html : false’ but in in chart it is true, the reason is if you just have one spec file then you no need to merge all reports, but in practiaclly we will have multiple files there we are collect the data via json files then merge the json files, after that we are generating html report from merged json file. There for we set this as false.

You can get more infor in mochawesome documentation.

Step 3:

We need to attach the screenshot, enable it in your cypress.json file.

"screenshotOnRunFailure": true

Now the next thing is to keep all our terminal commands in a recommended file, it is package.json.

Step 3: Add scripts in package.json file

For Windows -

"scripts": {
    "clean:reports": "if exist cypress\\reports rmdir /s/q cypress\\reports && mkdir cypress\\reports mkdir cypress\\reports\\mochareports",
    
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports -- inline",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
 }

For macOS/ Linux

"scripts": {
    "clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports && mkdir cypress/reports/mochareports ",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports -- inline",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }

Let's understand each command,

• clean: reports — There we remove the existing report folder (cypress/reports) in the Cypress package in our previous test and create a new folder “record” for the current test round.
• pretest-- To clean the reports and with this, will execute the CLI command, which is automatically executed before executing the “test” command in the above script.
• test -- test script would do the run your test suite then create mocha folder under cypress/reports folder, create mocha.json files one for each spec executed in the mocha folder.
• generate-report-- Once we have our JSON report containing all results, we can convert it to HTML. This we can do by executing another CLI command.
• Marge is not a typo; it is actual command coming from mockawesome report generator. First parameter is results JSON file. Second one is location where to output it relative to results file. Last parameter I added is inline. It means to add all assets, CSS and JS, inline in HTML file. Reason for this is because controlling URL values for assets. Just adding them inline was much simpler.
• combine-reports -- Now that we have generated reports for all suites, we can merge them into a single one. We can do this by executing in CLI command.
• Command mochawesome-merge is from npm package, As first parameter of command we are giving location of all generated reports, in ‘cypress/reports/mocha/*.json’. Second is where to save it. In this case it is report.json file in ‘ cypress/reports/mochareports’ folder. Input files and output file should not be in same location, otherwise, generating step will fail.
• posttest-- posttest would combine all the json files present inside ‘cypress/reports/mocha’ folder and place the combined file report.json in the ‘cypress/reports/mochareports’ , This command also automatically execute after executing ‘test’ script.

In the end, an amazing HTML report will be created.😄

Now the next thing is to add the screenshot for the failed test cases and save our screenshots in a folder under the cypress/reports.

Step 4: In the cypress.json file, update the location for the screenshots.

"screenshotsFolder": "cypress/reports/mochareports/assets"

We are going to save all our screenshots in there.

Now in order to attach the screenshot after our test is run we need to listen to a cypress event called,

test:after:run

We can add this in a ‘cypress/support/index.js’ file. we know that which cypress event to listen to, we need to tell mochawesome that we want a screenshot to be included in our report. This can be done by using ‘addContext()’

The addContext() accepts two parameters the

• The first parameter is the test object itself
• The second parameter is the new information or context that we want to add in our case we want to pass in the path to where our screenshot is saved.

Step 5:

In the top , cypress/suport/index.js paste below command

import addContext from "mochawesome/addContext";

And in same file (cypress/suport/index.js) we need to add the Event which I mentioned above,

Cypress.on("test:after:run", (test, runnable) => {  
  if (test.state === "failed") {    
    const screenshot       =`assets/${Cypress.spec.name}/${runnable.parent.title} --       ${test.title} (failed).png`;    
addContext({ test }, screenshot);  
  }
});

Here what we are doing is, once the test is run (“test:after:run”), validate the state of the Test cases, So if it is failed, then we are use the method addContext(),

All configurations are done, 😄 So let’s see how it works,

Step 6:

Execute the command in a terminal, to execute Tests.

npm  test

After, you can see the spec files are being executed the report folder is being created and we will find mocha and mocha reports. Inside this mocha folder you have JSON files that are being created for every spec file.

With my example, I executed 2 specs and one is failed,

So my report folder structure will be,

Let’s see if our ultimate goal is achieved, To do this, open the report.html file in any browser

When I expand failed test spec details,

The screenshot is attached for the failed test case,

TADA 🎉 We got it!

BUT, Just be consider when you share the report with someone else or anywhere You MUST make sure that you should share report.html as well as assert folder,

Because we have stored those screenshots and the required CSS and js files.

And for screenshotsFolder (in cypress.json) DONT set absolute path just set the relative Path. Otherwise, you will not be able to access them from anywhere other than your machine.

That's it, 😊