Hi guys, today I will show what you can do with the module cucumber-html-report that I am currently using in my protractor automated tests.
So, it is a node library that reads the Json reports and convert them into a nice html report. It should show the coverage of your scenarios and if you want you can have pictures attached as well.
I am pasting here some snippets that you guys can use and customise as you want.
To install you need to add the cucumber-html-report in your dependencies like:
{
"name": "Rafazzevedo",
"version": "1.0.0",
"description": "Rafazzevedo",
"private": true,
"dependencies": {
"cucumber-html-reporter": "^0.4.0",
"protractor": "^5.1.1"
},
"devDependencies": {
"chai": "^3.5.0",
"chai-as-promised": "^6.0.0",
"chai-string": "^1.3.0",
"cucumber": "^1.3.2",
"protractor-cucumber-framework": "^1.0.2"
}
}
Then you create an After in your Hooks class and Add the creation of the report:
import { browser } from 'protractor';
import reporter from 'cucumber-html-reporter';
import _ from 'lodash';
import Navigation from './helpers/navigation';
const API = automation.API;
const Hooks = function () {
const api = new API(browser.params);
const navigation = new Navigation(browser);
const credentials = browser.params.credentials;
this.registerHandler('BeforeFeatures', () => {
api.authenticate(credentials);
browser.api = api;
browser.navigation = navigation;
browser.get(browser.baseUrl);
});
this.registerHandler('AfterFeatures', () => {
browser.getProcessedConfig().then((config) => {
const jsonFile = config.capabilities.cucumberReportPath;
browser.getCapabilities().then((capabilities) => {
const reportName = createReportName
(config.capabilities, capabilities);
const htmlFile = jsonFile.replace('.json', '.html');
const options = {
name: `Automation (${reportName})`,
theme: 'bootstrap',
jsonFile,
output: htmlFile,
reportSuiteAsScenarios: true,
};
reporter.generate(options);
});
});
});
function createReportName(configCapabilities, browserCapabilities) {
const browserName = configCapabilities.browserName;
let deviceName = 'desktop';
let browserVersion = '';
if (!_.isUndefined(configCapabilities.chromeOptions)) {
browserVersion = ` ${browserCapabilities.get('version')}`;
if (!_.isUndefined(
configCapabilities.chromeOptions.mobileEmulation)) {
deviceName = configCapabilities.chromeOptions.
mobileEmulation.deviceName;
}
}
return `${browserName} ${deviceName}${browserVersion}`;
}
};
module.exports = Hooks;
After adding these 2 functions about creating the report for multiple browsers and adding the version and the device name (desktop or mobile) in the report, you can add pictures in case of the scenario fails:
this.After((scenario) => {
if (scenario.isFailed()) return browser.takeScreenshot().
then(screenshot => scenario.attach(new
Buffer (screenshot, 'base64'), 'image/png'));
});
You can always customise and improve the functions, if you feel that you need a picture after all the scenarios even they passed, you can just remove the condition in the after. Also you have different available themes and other options on https://www.npmjs.com/package/cucumber-html-reporter
See you guys !
Rafaela Azevedo 