Base 64 generated for Screenshot is not decoded while doing the rendering

[aakash-jain]

When we are taking a screenshot from the driver and attaching it to the scenario, after generating the report the screenshot is not rendered inside the report.

environment details
browser: chrome Version 58.0.3029.110 (64-bit)
nodejs: 7.10.0
cucumber: 1.0.0
cucumber-html-reporter: 0.5.0
selenium-webdriver:3.4.0
chromedriver: 2.30.0

The reason for that is that when we are attaching the screenshot using below code

this.driver.takeScreenshot().then(function(data){
          scenario.attach(data, 'image/png', callback);
      });

It has been encoded twice in base 64. Once when driver is taking the screenshot and second when cucumber is attaching it.

While generating the report we need to decode it as we are doing it in the case of text.
Changing the reporter.js under lib at line 223 from

step.image = 'data:image/png;base64,' + embedding.data;

to

step.image = 'data:image/png;base64,' + Base64.decode(embedding.data);

fixes the problem.

[gkushang]

@aakash-jain

Can you try,

    scenario.attach(new Buffer(imageData, 'base64'), 'image/png');

Also, try to update [email protected]. Let us know what you get.

[aakash-jain]

@gkushang

If I try to use

scenario.attach(new Buffer(imageData, 'base64'), 'image/png');

I am getting below error from selenium

C:\dev\actual-testing-working\node_modules\selenium-webdriver\lib\promise.js:2634
        throw error;
        ^
InvalidCharacterError
    at C:\dev\actual-testing-working\node_modules\base-64\base64.js:23:36
    at Object.<anonymous> (C:\dev\actual-testing-working\node_modules\base-64\base64.js:165:2)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)

I will try to upgrade to 0.5.2 and let you know

[navalkgupta]

Recently below piece of code worked fine for me with latest cucumber-html-reporter

After(function(scenario, done) {
let self = this;
if (scenario.isFailed()) {
browser.takeScreenshot().then(function(png) {
let decodedImage = new Buffer(png.replace(/^data:image/(png|gif|jpeg);base64,/, ''), 'base64');
self.attach(decodedImage, 'image/png');
done();
}, function(err) {
done(err);
});
} else {
done();
}
});

[gkushang]

There was an issue with combination of Cucumber V2 & Selenium 3, which is fixed in the PR #95

[gkushang]

fix published with v2.0.2 👍