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

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

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();
}
});

Answer 3

Your code seems absolutely fine.
Perhaps, it just needs longer timeouts?
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();
}
});