4

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.

iamdanchiv
  • 4,052
  • 4
  • 37
  • 42
Thangakumar D
  • 714
  • 5
  • 12
  • 27
  • You can use json reporter of wdio. Then using master thoughts plugins, we can generate the HTML report. – Murthi Jun 14 '17 at 04:27
  • @Murthi - Can you please tell me the master thoughts plugin name ? can you please share some reference urls for that plugin – Thangakumar D Jun 14 '17 at 21:19
  • https://github.com/damianszczepanik/cucumber-reporting but you have to make use cucumber option to generate cucumber json reports. – Murthi Jun 15 '17 at 01:59
  • Do you still need help with this @ThangakumarD? What is the current status of this question? – iamdanchiv Jun 16 '17 at 14:09
  • @ iamdanchiv- Still I didn't find solution for this. I tried to use https://www.npmjs.com/package/cucumber-html-reporter. It generats HTML report. But it generate HTML report for each feature file. If I execute 2 feature files it generates 2 reports but I want a single report with the both feature file information. This is because of another issue i posted here : https://stackoverflow.com/questions/44555501/wdio-cucumber-framework-keep-same-webdriver-session-during-single-test-executi – Thangakumar D Jun 16 '17 at 18:21
  • @ iamdanchiv- it is not resolved yet. Any help will be appreciated – Thangakumar D Jun 17 '17 at 04:52
  • @ThangakumarD sorry, didn't see your messages. I think it's due to your annotation (`@ iamdanchiv`, instead of `@iamdanchiv`). OK, I'll try to give you a break-down of the WDIO reporters and which would be best suited for your scenario. – iamdanchiv Jun 20 '17 at 11:45
  • 1
    @iamdanchiv - Thank you :) – Thangakumar D Jun 20 '17 at 16:03

2 Answers2

12

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:

enter image description here

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.

iamdanchiv
  • 4,052
  • 4
  • 37
  • 42
  • @iamdanchiv- Thanks for your help. I have installed 'wdio-allure-reporter' **globally** Once I executed my test suite I get result in ./allure-reports/allure/ folder with multiple JSON and XML files. To generate HTML report in command window I navigated to 'allure-reports' folder and typed the below command `c:\projects\functionalTest\allure-reports> allure generate .` I get **allure is not recognized as an internal or external command** do we need any other package other than 'wdio-allure-reporter', which i already have globally? – Thangakumar D Jun 22 '17 at 16:14
  • @ThangakumarD did you install `allure-commandline` globally? Like I said above you need it to generate your report. So basically, do `npm install -g allure-commandline` (`--save-dev` saves it in your project as a dependency, you can skip it if you don't want `allure-commandline` in your project for purposes other than generating your HTML report). – iamdanchiv Jun 22 '17 at 16:17
  • @ThangakumarD if you store your results in `./allure-reports/allure/`, then you should run your `allure generate .` command in the same folder. By the way, you can explicitly reference allure using it's path from `node_modules`: `.//node_modules/.bin/allure generate .` – iamdanchiv Jun 22 '17 at 16:22
  • 1
    I got HTML report ! Thank you so much ! – Thangakumar D Jun 22 '17 at 16:48
1

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'"
},
Aditya
  • 11
  • 2