Cucumber HTML report with Protractor
You can use cucumber-html-report to convert a json report to HTML. Add cucumber-html-report to your project with
$ npm install cucumber-html-report --save-dev
If you use protractor you can add the following code to hooks.js to
- Take a browser screenshot after each failed scenario to be attached to the json report in the After-hook.
- Write the test results to a json-file even if your cucumber opts format property says 'pretty'.
- Convert the json report to HTML, including screenshots for failed scenarios.
var outputDir = 'someDir';
this.After(function(scenario, callback) {
if (scenario.isFailed()) {
browser.takeScreenshot().then(function(base64png) {
var decodedImage = new Buffer(base64png, 'base64').toString('binary');
scenario.attach(decodedImage, 'image/png');
callback();
}, function(err) {
callback(err);
});
} else {
callback();
}
});
var createHtmlReport = function(sourceJson) {
var CucumberHtmlReport = require('cucumber-html-report');
var report = new CucumberHtmlReport({
source: sourceJson, // source json
dest: outputDir // target directory (will create if not exists)
});
report.createReport();
};
var JsonFormatter = Cucumber.Listener.JsonFormatter();
JsonFormatter.log = function(string) {
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir);
}
var targetJson = outputDir + 'cucumber_report.json';
fs.writeFile(targetJson, string, function(err) {
if (err) {
console.log('Failed to save cucumber test results to json file.');
console.log(err);
} else {
createHtmlReport(targetJson);
}
});
};
this.registerListener(JsonFormatter);
Try below code which is working for me:
You can use below plugin :
https://www.npmjs.com/package/cucumber-html-reporter
In package.json add below dependency as below:
"cucumber-html-reporter": "^5.0.0"
hit command as below:
npm install
Add below import in your cucumberconfig.ts
import * as reporter from "cucumber-html-reporter"
Now add below key in cucumberconfig.ts
onComplete: () => {
//var reporter = require('cucumber-html-reporter');
var options = {
theme: 'bootstrap',
jsonFile: './cucumberreport.json',
output: './cucumberreportsss.html',
reportSuiteAsScenarios: true,
launchReport: true,
metadata: {
"App Version":"0.3.2",
"Test Environment": "STAGING",
"Browser": "Chrome 54.0.2840.98",
"Platform": "Windows 10",
"Parallel": "Scenarios",
"Executed": "Remote"
}
};
reporter.generate(options);
},
Complete file is look like below:
import {Config} from 'protractor'
import * as reporter from "cucumber-html-reporter"
export let config: Config = {
directConnect:true,
// set to "custom" instead of cucumber.
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
seleniumAddress: 'http://localhost:4444/wd/hub',
// To run script without cucumber use below
//specs: ['typescriptscript.js'],
onComplete: () => {
//var reporter = require('cucumber-html-reporter');
var options = {
theme: 'bootstrap',
jsonFile: './cucumberreport.json',
output: './cucumberreportsss.html',
reportSuiteAsScenarios: true,
launchReport: true,
metadata: {
"App Version":"0.3.2",
"Test Environment": "STAGING",
"Browser": "Chrome 54.0.2840.98",
"Platform": "Windows 10",
"Parallel": "Scenarios",
"Executed": "Remote"
}
};
reporter.generate(options);
},
capabilities: {
'browserName': 'firefox',
'marionette': true,
//shardTestFiles: true,
},
SELENIUM_PROMISE_MANAGER: false,
specs: [
'../Features/*.feature' // accepts a glob
],
// Run feature file for cucumber use below
cucumberOpts: {
// require step definitions
require: [
'./stepDefination/*.js' // accepts a glob
],
format: 'json:cucumberreport.json',
},
jasmineNodeOpts: {
showColors: true,
},
};
To append failed screenshot use below code in hook
After(function(scenarioResult) {
let self = this;
if (scenarioResult.result.status === Status.FAILED) {
return browser.takeScreenshot()
.then(function (screenshot) {
const decodedImage = new Buffer(screenshot.replace(/^data:image\/png;base64,/, ''), 'base64');
self.attach(decodedImage, 'image/png');
});
}
});
With the latest version of protractor (from version 1.5.0), you can now generate a JSON report. When I asked this question about 7 months ago that feature was not there.
All you need to do is add this to your protractor-config.json file.
resultJsonOutputFile: 'report.json'
Where report.json is the location of the output file.
Once you have that, you can use protractor-cucumber-junit (https://www.npmjs.com/package/protractor-cucumber-junit), cucumberjs-junitxml (https://github.com/sonyschan/cucumberjs-junitxml) or something similar to transform the JSON file into a valid XML file that Jenkins can display.
$ cat report.json | ./node_modules/.bin/cucumber-junit > report.xml
Hope this helps.