function to take screenshots for cucumber-html-reporter generates “function timed out after 5000..” error

Question

I am using protractor-cucumber-framework and I wanted to generate html report for the tests I wrote. I decided to use cucumber-html-reporter to achieve it. In my hooks.js I wrote a this.After object to take screenshot on test failure:

   this.After(function(scenario, callback) {
     if (scenario.isFailed()) {
        browser.takeScreenshot().then(function(buffer) {
            return scenario.attach(new Buffer(buffer, 'base64'), function(err) {
                callback(err);
            });
        });
     }
     else {
        callback();
     }
   });

Everything works just fine, the report is generated and the screenshots are taken and attached only on test failure. But I also got an error message when After step is proceeded (so when there is some failure):

function timed out after 5000 milliseconds

I would like to get rid of this message as it also appears on my html report. Can anyone provide me solution to do that?

Answer 1

Below code is working for me. I have added this in step definition js file. At the end of scenario in the report, it adds the screenshot.

defineSupportCode(({After}) => {
    After(function(scenario) {
        if (scenario.isFailed()) {
            var attach = this.attach; 
                return browser.takeScreenshot().then(function(png) {
            var decodedImage = new Buffer(png, "base64");
                return attach(decodedImage, "image/png");
            });
            }
        });
    });

Answer 2

Your code seems absolutely fine. Perhaps it just needs longer?

You can set a timeout on hooks like this:

this.After({ timeout: 20 * 1000 }, function (scenario, callback) {
  if (scenario.isFailed()) {
    browser.takeScreenshot().then(function(buffer) {
        return scenario.attach(new Buffer(buffer, 'base64'), function(err) {
            callback(err);
        });
    });
  }
  else {
    callback();
  }
});

Answer 3

I had similar problem and it failed even after waiting for 60 seconds. The issue was that i didn't had proper callback implemented.

The below code worked for me. ( I am new to JavaScript and so my callback usage might be the right way. Please feel free to educate me if there is better way to do it. :))

After(function(scenario,done)
{
    const world = this;
    if (scenario.result.status === 'failed') {
        browser.takeScreenshot().then(function (stream) {
            let decodedImage = new Buffer(stream.replace(/^data:image\/(png|gif|jpeg);base64,/, ''), 'base64');
            world.attach(decodedImage, 'image/png');
        }).then(function () {
            done();
        });
    }else {
        done();
    }
});