Generate HTML report for WebdriverIO/Cucumber framework

Question

I am using WebdriverIO/Cucumber (wdio-cucumber-framework) for my test automation. I want to get the test execution result in a HTML file. As of now I am using Spec Reporter (wdio-spec-reporter). Which helps to print the results in console window. But I want all the execution reports in a HTML file.

How can I get WebdriverIO test execution result in a HTML file?

Thanks.

Answer 1

OK, finally got some spare time to tackle your question @Thangakumar D. WebdriverIO reporting is a vast subject (there are multiple ways to generate such a report), so I'll go ahead and start with my favorite reporter: Allure!

Allure Reporter:

• [Preface: make sure you're in your project root]
• Install your package (if you haven't already): npm install wdio-allure-reporter --save-dev
• Install Allure CommandLine (you'll see why later): npm install -g allure-commandline --save-dev
• Setup your wdio.config.js file to support Allure as a reporter

wdio.config.js:

reporters: ['allure', 'dot', 'spec', 'json'],
reporterOptions: {
    outputDir: './wdio-logs/',
    allure: {
        outputDir: './allure-reports/allure/'
    }
}

• Run your tests! Notice that, once your regression ends, your /allure-results/ folder has been populated with multiple .json, .txt, .png (if you have screenshot errors), and .xml files. The cotent of this folder is going to be used by Allure CommandLine to render you HTML report.
• Go to your /allure-results/ folder and generate the report via: allure generate <reportsFolderPath> (do it like this allure generate .
• If you want your /allure-reports/ folder inside /allure-results/)
• Now go into your /allure-reports folder and ope index.html into your browser of choice (use Firefox for starters)

Note: The generated index.html file won't have all the content loaded on Chrome unless you do some tweaks. It's due to default WebKit not being able to load all the AJAX calls required. Read more about it here.

If you're successfully completed all the previous steps, it should look something like this:

Hope this helped. Cheers!

---

Note: I'll try to UPDATE this post when I get some more time with other awesome ways to generate reports from your WebdriverIO reporter logs, especially if this post gets some love/upvotes along the way.

e.g.: Another combo that I enjoy using being: wdio-json-reporter/wdio-junit-reporter coupled with a easy-to-use templating language, Jinja2.

Answer 2

I have been using Mochawesome reporter and it looks beautiful, check it out here.

Mochawesome reporter generates the mochoawesome.json which then can be used to create a beautiful report using Mochawesome report generator

Installation:

> npm install --save wdio-mochawesome-reporter
> npm install --save mochawesome-report-generator@2.3.2

It is easier to integrate by adding this line in the wdio.conf.js:

  // sample wdio.conf.js
  module.exports = {
  // ...
  reporters: ['dot', 'mochawesome'],
  reporterOptions: {
    outputDir: './', //mochawesome.json file will be written to this directory
  },
  // ...
};

Add the script to package.json:

"scripts": {
  "generateMochawesome": "marge path/to/mochawesome.json --reportTitle 'My project results'"
},