Protractor Beautiful Report

Protractor Beautiful Report

In this blog, we are going to learn how we can Generate Protractor Beautiful Report in our Protractor Test Automation Framework.

Before Moving Further, let’s first understand the feature of this report.
  • Browser's Logs (only for Chrome)
  • Stack Trace (with suspected line highlight)
  • Screenshot
  • Screenshot only on failed spec
  • Search
  • Filters (can display only Passed/Failed/Pending/Has Browser Logs)
  • Inline Screenshots
  • Details (Browser/Session ID/OS)
  • Duration time for test cases (only Jasmine2)

To Know More about the report please visit there official Page.

Below Steps we need to follow to achieve this task:

1)  In command Prompt, Type npm i protractor-beautiful-reporter 

 This will install beautiful reporter in package.json file

2)   After Installation inside our config.js or runner file we need to pass a directory path as a parameter when creating a new instance of the screenshot reporter:

var HtmlReporter = require('protractor-beautiful-reporter');

3)  Now inside Onprepare function add below code

4)  Final Code would look something like below:

5)  Now when we execute our runner file We Could be able to See Report  generated in Report/screenshots folder.



My Name is Ankur Jain and I am currently working as Automation Test Architect.I am ISTQB Certified Test Manager,Certified UI Path RPA Developer as well as Certified Scrum Master with total 12 years of working experience with lot of big banking clients around the globe.I love to Design Automation Testing Frameworks with Selenium,Appium,Protractor,Cucumber,Rest-Assured, Katalon Studio and currently exploring lot in Dev-OPS as well. I am currently staying in Mumbai, Maharashtra. Please Connect with me through Contact Us page of this website.

Previous Post
Next Post
January 8, 2019 at 9:19 PM

Hi Ankur,
Its really good to see the report, but I have one question how can we log our custom message like actual vs expected(how we use to log in extent report). I know actual vs expected message will be displayed to failed case in protractor but I want to log for pass case also and I want to include step description too. Can you please help on my query