Screenshots are broken in the html report in the recent versions of cucumber

[singhm13-nih]

👓 What did you see?

i'm using cucumber-js with nightwatch. I recently upgraded cucumber version from 8.11.1 --> 11.1.1. After upgrading I noticed the attached screenshots in the html report appears as broken image. I didn't change any code other than upgrading the dependency version. I downgraded to the version 8.11.1 and screenshot attachments are working fine. I'm not sure from what version it is broken as I tried few recent version and it showing the broken image in the report. Adding the piece of code, that I'm using:

await browser.saveScreenshot(filePath);

if(attachToReport) {
    const screenshotData = fs.readFileSync(filePath, {encoding: 'base64'});
    this.attach(screenshotData, 'image/png'); // Attach screenshot to the JSON output
}

✅ What did you expect to see?

Screenshot attachment should not be corrupted when attaching to the report

📦 Which tool/library version are you using?

node v20.12.2
cucumber 11.1.1
nightwatch 3.7.0

🔬 How could we reproduce it?

1. setup basic project with nightwatch and cucumber
2. Attach the screenshot using the code snippet( added in the description)
3. Generate html report from cucumber json

📚 Any additional context?

No response

[davidjgoss]

Thanks for raising @singhm13-nih.

Reading between the lines here, I think you're using a third-party HTML reporter that reads the JSON formatter output?

We made a change in 10.0.0 to how the JSON formatter treats string attachment content:

Previously, string attachments were included as plain text in the JSON formatter output, where other attachments were Base64 encoded. This meant for consumers, it was ambiguous whether any attachment was Base64 encoded or not. Now, all attachments are Base64 encoded regardless of how they were initially attached.

So your attachment which is already base64-encoded gets encoded again. To avoid this you can specify that it's already bade64-encoded by prefixing the MIME type, like this:

await browser.saveScreenshot(filePath);

if(attachToReport) {
    const screenshotData = fs.readFileSync(filePath, {encoding: 'base64'});
    this.attach(screenshotData, 'base64:image/png'); // Attach screenshot to the JSON output
}

[shubhamkgupta14]

In my case this.attach() method is not working.
Could anyone help?

[vitalets]

In my case this.attach() method is not working.
Could anyone help?

You should use regular function, not arrow. Have a look on this.