Reporter for Protractor that will capture a screenshot after each executed test case and store the results in a HTML report. (supports jasmine2)
The protractor-jasmine2-screenshot-reporter is available via npm:
$ npm install protractor-jasmine2-screenshot-reporter --save-dev
In your Protractor configuration file, register protractor-jasmine2-screenshot-reporter in jasmine:
var HtmlScreenshotReporter = require('protractor-jasmine2-screenshot-reporter');
var reporter = new HtmlScreenshotReporter({
dest: 'target/screenshots',
filename: 'my-report.html'
});
exports.config = {
// ...
// Setup the report before any tests start
beforeLaunch: function() {
return new Promise(function(resolve){
reporter.beforeLaunch(resolve);
});
},
// Assign the test reporter to each running instance
onPrepare: function() {
jasmine.getEnv().addReporter(reporter);
},
// Close the report after all tests finish
afterLaunch: function(exitCode) {
return new Promise(function(resolve){
reporter.afterLaunch(resolve.bind(this, exitCode));
});
}
}Output directory for created files. All screenshots and reports will be stored here.
If the directory doesn't exist, it will be created automatically or otherwise cleaned before running the test suite.
var reporter = new HtmlScreenshotReporter({
dest: '/project/test/screenshots'
});This option is enabled by default. Toggle whether or not to remove and rebuild destination when jasmine starts.
This is useful when you are running protractor tests in parallel, and wish all of the processes to report to the same directory.
When cleanDestination is set to true, it is recommended that you disabled showSummary and showConfiguration, and set reportTitle to null. If you do not, the report will be pretty cluttered.
var reporter = new HtmlScreenshotReporter({
cleanDestination: false,
showSummary: false,
showConfiguration: false,
reportTitle: null
});Filename for html report.
var reporter = new HtmlScreenshotReporter({
filename: 'my-report.html'
});Default is report.html
Array of filenames that specifies extra css files to include in the html report. You can find the classnames and element IDs used either from browsers dev tools or in example stylesheet.
var reporter = new HtmlScreenshotReporter({
userCss: 'my-report-styles.css'
});When this option is enabled, reporter will not create screenshots for pending / disabled specs. Only executed specs will be captured.
var reporter = new HtmlScreenshotReporter({
ignoreSkippedSpecs: true
});Default is false
When this option is enabled, reporter will create screenshots only for specs that have failed their expectations.
var reporter = new HtmlScreenshotReporter({
captureOnlyFailedSpecs: true
});Default is false
This option is enabled by default - in combination with captureOnlyFailedSpecs, it will capture and report screenshots only for failed specs. Turning this option off will cause the report to contain all specs, but screenshots will be captured only for failed specs.
var reporter = new HtmlScreenshotReporter({
reportOnlyFailedSpecs: false,
captureOnlyFailedSpecs: true
});This option is enabled by default - it will display the total number of specs and the number of failed specs in a short summary at the beginnning of the report.
var reporter = new HtmlScreenshotReporter({
showSummary: true
});Default is true
If this option is enabled with the report summary, it will display a link to each failed spec as a part of the short summary at the beginnning of the report.
var reporter = new HtmlScreenshotReporter({
showSummary: true,
showQuickLinks: true
});Default is false
This option is enabled by default - it will display a summary of the test configuration details at the end of the report.
var reporter = new HtmlScreenshotReporter({
showConfiguration: true
});Default is true
This option will add a title to the report.
var reporter = new HtmlScreenshotReporter({
reportTitle: "Report Title"
});Default is 'Report'
The user may specify a set of key/value pairs that are appended to the configuration report.
var reporter = new HtmlScreenshotReporter({
configurationStrings: {
"My 1st Param": firstParam,
"My 2nd Param": secondParam
}
});Function used to build custom paths for screenshots. For example:
var reporter = new HtmlScreenshotReporter({
pathBuilder: function(currentSpec, suites, browserCapabilities) {
// will return chrome/your-spec-name.png
return browserCapabilities.get('browserName') + '/' + currentSpec.fullName;
}
});By default, the path builder will generate a random ID for each spec.
Function used to build custom metadata objects for each spec. Files (json) will use the same filename and path as created by Path Builder. For example:
var reporter = new ScreenShotReporter({
metadataBuilder: function(currentSpec, suites, browserCapabilities) {
return { id: currentSpec.id, os: browserCapabilities.get('browserName') };
}
});By default, the runner builder will not save any metadata except the actual html report.
This option is disabled by default. When this option is enabled, than for each report will be created separate directory with unique name. Directory unique name will be generated randomly.
var reporter = new HtmlScreenshotReporter({
preserveDirectory: true
});The reporter can take screenshots also from instances forked off the main browser. All you need to do is just register the instance in the begining of your suite / spec, e.g. like so:
beforeAll(function () {
browser.forkedInstances['secondBrowser'] = browser.forkNewDriverInstance();
});Remember to unregister the instance once you're done with it:
afterAll(function () {
browser.forkedInstances['secondBrowser'] = null;
});Automated unit tests for Protractor screenshot reporter for Jasmine2 are run by Mocha (Yes, we know that it is funny).
In order to run it, you can use either npm test or by gulp by using gulp test.
Coverage is being generated by Istanbul. You can generate the HTML report by using either npm run coverage or by gulp test.
Coding style tests are being done by jshint. You can find the code guide in .jshintrc file. Run jshint by gulp lint or npm lint.