Customizing HTML Reports Using Newman Reporting Templates:
In this tutorial, we will cover reporting templates that can be used along with the Newman command line runner to generate templated reports from the test execution of Postman collection.
The templates provide an easy and extensible way to use Newman runner and generate reports in the desired format.
=> Check ALL Postman Tutorials Here.
Table of Contents:
Standard HTML Reporter
The Standard HTML Report format that gets created through the Newman Html reporter is good but not great. It does not have a very engaging UI and the information is not succinct and is kind of scattered.
For reporting needs, it is required that the information is available at first glance and at the same time its pleasing to the eyes of the viewers as well. Thus the standard HTML Reporter template can be configured or changed in the way as desired, to make the reports look better as well as more UI friendly.
Given below is the image of how the standard HTML Report will look.
Creating And Using Custom Reporters
Newman provides a highly customized template for formatting the Html reports that get generated by Newman-html-reporter by default.
Here is a Video Tutorial:
Based on the documentation from the Newman-html-reporter node module, you can specify the location of the custom template using the ‘–reporter-html-template’ switch.
The command will look as shown below.
newman run {{path to collection json}} -e {{path to environment json}} -r html --reporter-html-template {{path to custom template}}
The template files are the ones with .hbs extension. It is actually a handlebar template file. To learn more about the handlebars, please refer to the official handlebar documentation here.
There are a lot of custom templates created by an online community that provides different views of the html generated reports. Let’s see a couple of them and have a look at the reports that are generated by these templates.
Please follow the below steps for running a Postman collection using a custom reporter template.
- Download template from the gist file here.
- Save the file on the local file system.
- Now we can use any existing collection to run using Newman with the reporter template like the one that we downloaded.
- Let us see the below command.
newman run postman-newman-integration2.json -e testEnvNewman.json -r html --reporter-html- template colored-template.hbs
- As we have not the specified location for generating Html reports, the default location will be inside the Newman folder that gets created in the directory where tests get executed from.
- Navigate to the Newman directory.
- Now open the generated HTML report. The below screenshot will show how the newly generated Html report will look like.
- Contrast it with the generic or default report that gets generated with a newman-html-reporter. In the default view, there are no colored markers or styling that make it difficult to distinguish failures and successes and overall it does not look very pleasing.
- Let us change an assertion in our test to make it fail and generate the report using the same template again and see how it looks.
Other Custom Reporters
Let’s see the other custom reporters that are available (and are created by the online community), as they are free to use, we can choose as per our need and use it to customize the default reports that get generated by Newman.
There is another Newman package that is available. It is named as Newman-reporter-htmlextra
This also generates custom reports with more colored interfaces with distinguished success and failures. Let’s see how the reports look with this template.
Note: To use this template, install it using the node package manager with the below command.
npm install -g newman-reporter-htmlextra
Now earlier, with Newman collection runner, we were using reporter as just HTML using the -r switch. Now for this reporter, we will have to use the reporter name as htmlextra.
Hence, to use this reporter, you can use the below command to execute a Postman collection.
newman run postman_collection_2.json -e testEnvNewman.json -r htmlextra
Let’s see how the reports look with this reporter. Navigate to the Newman folder in the same directory to find the generated HTML report.
The salient features of the Reporter include:
- Separate views for summary and all requests. There’s also a separate tab to just view the failed requests.
- Lots of customizations are available with the reporter like Showing console logs, Not showing skipped tests, Showing only failures in the reports, etc. All the details are available at the GitHub page here for this module.
- Lots of color-coding to distinguish failures and success just by looking at the report.
- More interactive with tabbed views as well as expand/collapse options for request details.
- All the request responses are captured fully including the header information.
Let’s see how the reports look with this reporter option.
Summary view
Requests view
Failed Requests View
Conclusion
In this tutorial, we learned about customizing the HTML reports that get generated while using Newman-html-template. The customizations can be done, as per the requirements, but there are already a lot of readily available templates created by the online community and open source contributors that could be used out of the box.
We also looked at another html reporter named Newman-reporter-htmlextra that generates better-styled reports with different views for Summary requests as well as failed requests.
But having the ability to customize the reports using self-created templates is also supported by the Newman-html-template package.
=> Visit Here To See The Postman Training Series For All.
Hello Team,
When I run the collection by using html extra report, I am not getting response in the newman report that got generated. When I execute the same collection in the Postman tool which is working as expected. But the same APIs are getting failed and response not captured in the newman report.
Hello,
I am having the same pb at the beginning. Maybe try to check if :
1) Node is well installed for the :
user : node -v
root : sudo node -v
they should return the same version above 16 to work with Newman
2) Newman is well installed for the :
user : newman -v
root : sudo newman -v
3) Then put all your tests, files and env variables in the same folder and test with full path to the html report folder
newman run collection.json -e environment_variables_if_needed.json -r htmlextra –reporter-htmlextra-export ./results/report.html
The result will be in a folder with the name “results” in the same folder as the tests…
When you will create a cron, you will need to specify the full path to newman and results folder otherwise it won’t work (unless for me 🙂