I am using Protractor with Cucumber (js). I would like to generate report files just like with the Cucumber-JVM version. I have seen examples when using Protractor with Jasmine, but practically nothing with Cucumber.
How do you generate reports when using this configuration?
The final goal is to publish this report in Jenkins, or anywhere else if they are directly generated in HTML.
Thanks!
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.
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
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');
});
}
});
When using cucumber-html-report in the way the other answer indicates, you may run into issues on newer versions of Cucumber/Protractor/Cucumber-html-report.
The symptom is that the index.html is created but left empty at the end of a test run.
This is because cucumber-html-report is using an asynchronous file write and protractor is not waiting for it to complete. (We were using code which bears a striking resemblance to the code in the answer.)
This is a working setup:
in hooks.js keep the screen shot part the same from the other answer:
// Generate a screenshot at the end of each scenario (if failed; configurable to always)
cuke.After(function(scenario, done) {
browser.getProcessedConfig().then(config => {
if (!config.screenshots.onErrorOnly || scenario.isFailed()) {
return browser.driver.takeScreenshot().then(function(png) {
let decodedImage = new Buffer(png.replace(/^data:image\/(png|gif|jpeg);base64,/, ''), 'base64');
scenario.attach(decodedImage, 'image/png');
done();
});
} else {
done();
}
});
});
in protractor.conf.js:
var cucumberReportDirectory = 'protractor-report';
var jsonReportFile = cucumberReportDirectory + '/cucumber_report.json';
exports.config = {
cucumberOpts: {
format: 'json:./' + jsonReportFile,
},
onCleanUp: function () {
var CucumberHtmlReport = require('cucumber-html-report');
return CucumberHtmlReport.create({
source: jsonReportFile,
dest: cucumberReportDirectory,
title: 'OptiRoute - Protractor Test Run',
component: new Date().toString()
}).then(console.log).catch(console.log);
},
ignoreUncaughtExceptions: true,
untrackOutstandingTimeouts: true
};
This is only the configuration directly related to cucumber-html-report the rest is seasoned to taste.
Make sure the report directory exists before you run the tests.
By putting the report creation here instead of attaching it as a Cucumber listener, Cucumber will wait for the asynchronous operation to complete before exiting.
Thank you to the Ola for the original answer, I discovered the async issue (the hard way) and was thinking I could save someone time when they find the same issue.
