How to attach screenshots for failed steps in cucumber-html-reporter using Puppeteer?

[ilijai1]

"cucumber": "^6.0.5", "cucumber-html-reporter": "^5.2.0"

addCase.js:

const {Given, When, Then, Before, After} = require('cucumber');

After(async function(scenario) {
    if (scenario.result.status === 'failed') {
        const screenShot = await this.page.screenshot();
        this.attach(screenShot,'image/png');
    }
});

world.js:

const expect = require("chai");
const puppeteer = require("puppeteer");
const {setWorldConstructor} = require("cucumber");
const helpers = require("../../helpers");
const config = require("../../config");

class CustomWorld{

    async launchBrowser(){
        this.browser = await puppeteer.launch({
        headless: config.isHeadless,
        args: config.args,
        });
        this.page = await this.browser.newPage();
        await this.page.setViewport({ 
            width: config.viewportWidth,
            height: config.viewportHeight
        });
    }

}

setWorldConstructor(CustomWorld);

ERROR: TypeError: this.attach is not a function

I tried with scenario.attach() - error: scenario.attach() not a function Also tried with simple storeScreenshot: false in my reporter.js (no change) I am beginner please if someone can help me out :) ?

[pawel-id]

look at default World object constructor example here. The variable this.attach is initiated there - which is missing in your case.

I would suggest to go with default World constructor (as above), and move your launch browser to Before hook (see here)