How to embed screenshot in Cucumberjs using Protractor?

Question

I tried with the below code to take screenshot and save it locally. But, I want to embed the screenshot to the cucumber HTML report (which is generated by Jenkins using json file).

What would be the code I should add here for embedding which should reflect in my json report file to fetch that link in HTML report? Please suggest.

My code:

module.exports  = function stepResultHooks() {
var fs = require('fs'), dir = 'features/screenShots/';

this.StepResult(function (event, callBack) {
    var stepResult = event.getPayloadItem('stepResult'), step = stepResult.getStep();

    if (stepResult.isFailed()) {
        browser.takeScreenshot().then(function (png) {
            browser.getCapabilities().then(function (capabilities) {
                var browserName = capabilities.caps_.browserName;
                var browserVersion = capabilities.caps_.version;
                var stream, fname;

                fname = 'Screenshot' + '_' + 'Failed Step' + '_' + step.getName() + '_' + browserName.toUpperCase()+'_'+browserVersion+'_' + new Date() + '.png';
                fname = fname.replace(/"|'|\//g, '').replace(/\s|:|>/g, '_');

                stream = fs.createWriteStream(dir + fname);
                stream.write(new Buffer(png, 'base64'));
                stream.end();
            });
        }).then(callBack);
    } else callBack();
});

score 1 · Answer 1 · answered May 24 '16 at 09:10

According to the docs at https://github.com/cucumber/cucumber-js#attachments

You can attach text, images and files to the Cucumber report using the scenario object:

There is no way to attach a screenshot during the stepResult hook, only in the After hook.

this.After(function(scenario, next) {
  browser.takeScreenshot().then(function(png) {
    var decodedImage = new Buffer(png, 'base64').toString('binary');
    scenario.attach(decodedImage, 'image/png', next);
  }, function(err) {
    next(err);
  });
});

Guest · Answer 2 · 2017-03-29T08:50:06.083

You can only attach in the scenario's after hook, but you can take screenshots on every step (in StepResult), if that's what you're after and store/push the results in an array. You can then, at each scenario end push the array content as attachments, and clear up the array for use on the next scenario of steps.

You can also get dynamic screenshot/browser height, based on the content of each step/page. See below.

In the file where you have your hooks do the following:

'use strict';

var eachStepScreensArr = [];

module.exports = function() {

    this.Before(() => {

        //Reset Array with Step screenshots
        eachStepScreensArr = [];

    });

    this.After((scenario) => {

        return browser.driver.manage().window().setSize(1280, 1000).then(function() { //reset size after each scenario
            return browser.driver.manage().window().setPosition(0, 0).then(function() { //reset position after each scenario
                //Attach any step screenshots to the scenario metadata
                for (var key in eachStepScreensArr) {
                    scenario.attach(eachStepScreensArr[key], 'image/png');
                }
            });
        });

        return Promise.resolve();
    });

    this.StepResult((stepResult) => {
        var step = stepResult.getStep();

        if (step.getName() && stepResult.getStatus() !== 'skipped') {

            return browser.executeScript('return {' +
                'height: document.body.scrollHeight,' +
                'width: document.body.scrollWidth' +
                '}'
            ).then(function(result) {
                return browser.driver.manage().window().setSize(/*result.width*/1280, result.height + 50).then(function() {
                    return browser.takeScreenshot().then(function(png) {
                        eachStepScreensArr.push(new Buffer(png.replace(/^data:image\/(png|gif|jpeg);base64,/, ''), 'base64'));
                    });
                });
            });

        }

        return Promise.resolve();
    });
};

If you're using a cucumber HTML reporter, make sure it supports multiple embeddings (like "cucumber-html-report"), most of the other ones just show the first one.

If you were to only take screenshots of the failed steps, change the line

stepResult.getStatus() !== 'skipped'

to

stepResult.getStatus() == 'failed'

How to embed screenshot in Cucumberjs using Protractor?

2 Answers2