The last few months I was busy for my new assignment to setup testautomation with Protractor + CucumberJS.  We needed to test our new Angular web-app on different browser and used Sauce Labs to do so.

But after each run I was looking through the log to see what happend, where it went wrong, how the screen looked and so on. At some point this really annoyed me, especially when:

  • I forgot to change my settings in iTerm to show more than 1000 lines of log
  • I was to lazy to implement a reporting tool

From laziness to a wish list

Both points had to do with laziness, so out of laziness I created a wish list and I explored the great NPM repository to see what reporting tools were out there that met my wish list. Now I hear you think:

What was your wish list?

Well, the answer to that question was quit easy, the reporting tool needed to have the following:

  • an overview of all passed / failed features / scenario’s
  • an overview of all features that could be filtered
  • the possibility to see on which platform / browser a feature had been run
  • to possibility to see that 1 feature had run on multiple platforms / browsers

From wish list to …, my own reporting tool

Like going to the shopping mall, I (digitally) walked with my wish list in my hand through the NPM repository. I saw some nice reporting tools

  • cucumber-html-repository
    • Pro: Nice looks, and it met the wish to have an overview of all passed / failed features / scenario’s. It even had some eye candy for management  😉 with pie charts.
    • Con: When having multiple features the overview became a little messy.  No “clear” overview of what platform / browser was used. And I personally think the browser space isn’t used  like it should, but thats personal
  • cucumber-html-report
    • Pro: It’s a cucumber HTML report, but not as fancy as I hoped
    • Con: not the overview I was searching and hoping for. (And I’m not a cat lover ;-))
  • grunt-protractor-cucumber-html-report
    • Pro: A nice and fancy report. It has a good overview of the feature that has been run. Some eye candy for management 😉 with pie charts.
    • Con: No good overview of all features, platform / browsers and so on. A big dependency on Grunt

But as you can see, no tool met my wish list, so I started creating my own. (Just to proof I’m not lazy)

My own module

I took me some time to think about how I wanted to create the lay-out. What I normally did was build it all on my own, but yeah, there’s still a little bit of laziness inside of me. So I used the some existing libraries like Bootstrap, DataTables, Chart.js and Font Awesome to connect the dots. To keep the dependencies on HTML / JS libraries in the module as low as possible I used CDN’s for all the used libraries.

After having the lay-out finished I used lodash as a templating engine to generate the reports and let some Javascript to the JSON magic. After combining all I created my own reporting module called multiple-cucumber-html-reporter.  A demo can be found here.

I can explain a lot about how to use the module, what the advantages are and so on, but sometimes I’m just lazy (and I already did that here) :).


I hope you enjoy my reporting module and if you have questions feel free to ask them.


Wim Selles