[Cucumber-JS] having difficulties embedding png image using scenario.attach

[Brady Wood]

Hi All,

Wondering if anyone has been able to attach/embed png image into the cucumber.json file, as I am having issues with the base64 encoding.

To keep the example simple I have hardcoded the base64 image into a string using an online tool.  (http://www.askapache.com/online-tools/base64-image-converter/)

The problem I am facing is when calling scenario.attach(data, '[encoding]') the expected base64 string is not embedded in the cucumber.json file instead its something else (which I am not sure of)

So with that in mind here are the steps I took.

1.  Converted an image to base64  ( I have hard coded it, to remove any confusion in explaining this, typically this would be done by browser.takeScreenshot().then (function (png) {  scenario.attach(new Buffer(png, 'base64'), 'image/png') });

2.  created a var with the askapache.com converted img

var imgBase64 = "iVBORw0KGgoAAAANSUhEUgAABAoAAALvCAI....."

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

4.  when viewing the cucumber.json file I received.

"embeddings": [

              {

                "mime_type": "image/png;base64",

                "data": "//3//f/9//0AEEpGSUYAAQEAAAEAAQAA//3//QD//QAJBgc...."

In Item 4, I was actually expecting

"embeddings": [

              {

                "mime_type": "image/png;base64",

                "data": "iVBORw0KGgoAAAANSUhEUgAABAoAAALvCAI....."

Can someone please tell me what I am doing wrong here.  At step 3, I have also tried

  scenario.attach(imgBase64, 'base64') and other various combinations

  decoding the img before passing it to the scenario.attach method

  and many other different combinations,  (just not the one that works)

Please note if I insert the imgBase64 string directly into the cucumber.json file I am able to run the html report generator using cucumber-sandwich and the image is displayed fine.

So I suspect that issue lies with how the data is passed to scenario.attach

[Simon Dean]

> On 16 Dec 2014, at 01:25, Brady Wood <brady...@gmail.com> wrote:
>
> Hi All,
>
> Wondering if anyone has been able to attach/embed png image into the cucumber.json file, as I am having issues with the base64 encoding.

Hi Brady. I've submitted a pull request to fix be issue with binary attachments a few weeks but unfortunately the pull request hasn't been merged yet. Here's the pull request:

https://github.com/cucumber/cucumber-js/pull/255

It might be worth trying the changes in that pull request on your local copy of cucumber just to confirm whether it fixes things, before you wait for the pull request to be merged.

>
> 3. scenario.attach(new Buffer(imgBase64, 'base64'), 'image/png;base64')
>

I'm not sure cucumber supports specifying a character set in the mine type (also I think browsers use a slightly different style for specifying a character set with a MIME/media type)

Hope that helps
Simon

[Brady Wood]

Hi Simon,

I have tried adding in the suggested changes in pull request, however have still had issues with the attachment.

In the attachments.feature that contains the update, I tried to convert the data to an image using an online converter which has also failed.

eg.

the attachment feature has been updated with the embeddings 

"embeddings": [

{

"mime_type": "image/png",

"data": "AAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+/w=="

Using that data in http://www.askapache.com/online-tools/base64-image-converter/ shows "application/octet-stream".   Which looking at the test data makes sense. 

Not sure where I go now with embedding the screenshots into the cucumber.json.  Any suggestions welcomed.  Thank you for all of your help so far.

[Brady Wood]

Hi All,

Correction to my last post.  

The pull request regarding embedding images into cucumber.json works a treat

1.  replace the scenario.js as per (https://github.com/cucumber/cucumber-js/pull/255 )  

2.  in your afterFeature hook do something like

if (scenario.isFailed()) {

            browser.takeScreenshot().then(function (screenshot) {

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

            });

}

Now you have a screenshot embedded in the cucumber.json which you can use cucumber-sandwich to parse or the jenkins cucumber html report plugin.

------------------------