Cannot attach screenshot to cucumber report

[vsuryawanshi]

No description provided.

[jlin412]

Here is my code:

  this.After(function (scenario, done) {
    if (scenario.isFailed()) {
      browser.takeScreenshot().then(function (png) {
        scenario.attach(png, 'image/png');
      });
    }
  });

I know the screenshot data is good because I get write to an image file and it is displayed correctly like this:

  browser.takeScreenshot().then(function (png) {
        var fs = require('fs');
        var stream = fs.createWriteStream("test/e2e/output/screenshot.png");
        stream.write(new Buffer(png, 'base64'));
        stream.end();
      });

@simondean You work on screenshot feature.
Did I do something wrong? Or it is related to #249 and #255?

[jlin412]

I am finally able to make it to work. This is my workaround:

      browser.takeScreenshot().then(function (png) {
        var fs = require('fs');

        //var base64Image = new Buffer(png, 'binary').toString('base64');
        var decodedImage = new Buffer(png, 'base64').toString('binary');

        scenario.attach(decodedImage, 'image/png');
      });

[nikulkarni]

@jlin412 that worked for me. thanks!

[jlin412]

I think that we can close this issue because #249 and #255 are tracking this already.
Basically, scenario.attach will encode base64 so we can't pass it data/stream already encoded with base64. Scenario.attach should be able to handle this case. Most of modern screenshot method already return encoded data/stream.

[nikulkarni]

@jlin412 If understand current code, I see that scenario.attach doesn't encode to base64 anymore. I notice below attach() in scenario.js,
astTreeWalker.attach(data.toString(), mimeType);
and for streams it does,
astTreeWalker.attach(Buffer.concat(buffers).toString(), mimeType);

Previously ([email protected]) attach() method used to encode to base64 like below which is NOT the case anymore

astTreeWalker.attach(data.toString('base64'), mimeType);
and for streams it used to do,
astTreeWalker.attach(Buffer.concat(buffers).toString('base64'), mimeType);

[simondean]

@nikulkarni the base64 encoding happens inside the JSON formatter. Cucumber's JSON formatter wrapps Gerkin's JSON formatter and it is Gerkin's JSON formatter that contains the base64 code. The code is in the encode64s function of https://github.com/cucumber/gherkin/blob/master/js/lib/gherkin/formatter/json_formatter.js

[nikulkarni]

oh I see, thanks for clearing that @simondean

[eoinyoneill]

@jlin412 I get the encoded data in testReport.json but they do not show up in the cucumber Report in Jenkins.

[cades]

@jlin412 ++
maybe we should place it in README or wiki?

[karthiktv006]

This works currently and examples are provided in README.md, i guess this bug can be closed.

[ambition-consulting]

The example on using WebDriver is not even syntactically correct, leave alone working. As stated above, the following works (using typescript and protractors browser instead of the general webdriver):

let hooks: cucumber.Hooks = this;
    hooks.After(function(scenario, callback) {
        if (scenario.isFailed()) {
            browser.manage().window().setSize(1024, 2048).then(result =>
              browser.takeScreenshot().then(function(stream) {
                  scenario.attach(new Buffer(stream, 'base64').toString('binary'), 'image/png', callback);
              }, function(err) {
                callback(err);
            }));
        }
        else {
          callback();
        }
    });

[charlierudolph]

With 5fb6706 there is no intermediate conversion to string and we just encode it as base64 when adding it to the json output.

[nalbion]

@charlierudolph what if attachement.getData() is already base64 encoded? The output of browser.takeScreenshot() is...

This work-around is ugly, but it works: mrooding/gulp-protractor-cucumber-html-report#19

[charlierudolph]

Hmm. okay. What do you think about the following rule: If a string is attached, doesn't base 64 encode it. If a stream / buffer is attached, the data will be base 64 encoded

[nalbion]

I notice that all of my base 64 encoded strings end with "=" and when encoded twice they end with "==". I'm not sure if that's a reliable indicator - it might be a valid final character of some images.

I suppose you're right though, images aren't strings, they are binary streams (or buffers)

[yogitasn]

Hi All,

We use BDD Framework (Cucumber) automated with help of Protractor/Selenium and scripting language is Typescript. I am new to Cucumber/Typescript/Protractor. I am very keen on implementing the capture of screenshots for the failed steps in our framework. I have been researching on this topic from a long time now. Although i found solution to capture screenshots with the help of this thread however i am not able to make it work with Cucumber i.e. I have placed the capture screenshot code in the After hook but the After hook does not seem to be called.I have placed the After hook code in the file named Hooks.ts under support folder. Could anyone be able to let me know what am i missing here? Appreciate your help.

const Cucumber = require('cucumber');
var {defineSupportCode} = require('cucumber');
var fs = require('fs');
var Promise = require('bluebird');

defineSupportCode(function ({registerHandler, After}) {

After((scenario, done) => {
if (scenario.isFailed()) {
  return browser.takeScreenshot().then(function (result) {
    //scenario.attach(new Buffer(stream, 'base64').toString('binary'), 'image/png', callback);
    var stream = fs.createWriteStream(
      'C:\\Users\\Redirection\\XYZ\\Documents\\Screenshots\\exception.png');(Saving screenshots locally)
    stream.write(new Buffer(stream, 'base64'));
    stream.end();
    Promise.resolve(result);
  }, function (err) {
    //callback(err);
    Promise.reject(err);
  })
}

})
})

[nalbion]

@yogitasn you should not need bluebird if you're running on Node.

My features/steps/support/hooks.ts file looks like this:

import {browser} from 'protractor';
export = function () {
    this.Before(function (scenario, callback) {
        browser.manage().window().setSize(1270, 1200);
        browser.driver.get('about:blank').then(callback);
    });

    this.After(function (scenario, callback) {
        if (scenario.isFailed()) {
            browser.manage().window().setSize(1270, 1200).then(result =>
                browser.takeScreenshot().then(function (stream) {
                    let decodedImage = new Buffer(stream.replace(/^data:image\/(png|gif|jpeg);base64,/, ''), 'base64');
                    scenario.attach(decodedImage, 'image/png');
                    callback();
                }, function (err) {
                    callback(err);
                }));
        }
        else {
            callback();
        }
    });
};

[yogitasn]

@nalbion Thank you so much. I will use your solution and check if its working for me.

[yogitasn]

@nalbion,

I used the above solution with some minor changes as below however it did not seem to work :(. I added a import statement import { } from '../../support/hooks' in typescript files where the failed step function is called and also put console.log statement inside the After block and executed a failed test case. There was no output for the console statement on execution. Appreciate any suggestions.

"use strict";

//import {browser} from 'protractor';(This gave me error: Module ''protractor'' has no exported member 'browser'. Used below import statement)
import Element = protractor.Element;
var fs = require('fs');
export = function () {
/this.Before(function (scenario, callback) {
browser.manage().window().setSize(1270, 1200);
browser.driver.get('about:blank').then(callback);
});/
this.After(function (scenario, callback) {
if (scenario.isFailed()) {
browser.manage().window().setSize(1270, 1200).then(result =>
browser.takeScreenshot().then(function (stream) {
console.log("Capturing screenshot")
let decodedImage = new Buffer(stream.replace(/^data:image/(png|gif|jpeg);base64,/, ''), 'base64');
scenario.attach(decodedImage, 'image/png');
callback();
}, function (err) {
callback(err);
}));
}
else {
callback();
}
});
};

I would also like to add that if i used the save screenshot code inside the After block i get different set of errors.
Error on using the local screenshot save code inside the After block

features2/support/Hooks.ts(83,22): error TS2403: Subsequent variable declarations must have the same type. Variable 'stream' must be of type 'string', but here has type 'any'.
features2/support/Hooks.ts(86,25): error TS2339: Property 'write' does not exist on type 'string'.
features2/support/Hooks.ts(87,25): error TS2339: Property 'end' does not exist on type 'string'.

this.After(function (scenario, callback) {
if (scenario.isFailed()) {
browser.manage().window().setSize(1270, 1200).then(result =>
browser.takeScreenshot().then(function (stream) {
console.log(scenario.isFailed())
//let decodedImage = new Buffer(stream.replace(/^data:image/(png|gif|jpeg);base64,/, ''), 'base64');
//scenario.attach(decodedImage, 'image/png');
var stream = fs.createWriteStream(
'C:\Users\Redirection\XYZ\Documents\Screenshots\exception.png');
console.log("Capturing Screenshot")
stream.write(new Buffer(stream, 'base64'));
stream.end();
callback();
}, function (err) {
callback(err);
}));
}
else {
callback();
}
});
};

Thanks

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.