How to attach screenshots to Cucumber HTML report in Playwright framework?

Question

I am trying to add screenshots to my Cucumber HTML report in my Playwright test framework.

Here is my reporter.js:

const reporter = require('cucumber-html-reporter')

const options = {
  theme: 'bootstrap',
  jsonFile: 'cucumber_report.json',
  output: 'reports/cucumber_report.html',
  reportSuiteAsScenario: true,
  scenarioTimestamp: true,
  launchReport: true,
}

reporter.generate(options)

As per the [cucumber-html-reporter#storescreenshots][1] docs, I added the following to my reporter.js options like so:

{
   ...
   output: '/report/cucumber_report.html',
   screenshotsDirectory: 'screenshots/',
   storeScreenshots: true
}

The docs say "storeScreenshots: true stores the screenShots to the default directory. It creates a directory 'screenshot' if does not exists".

However, such a directory was not created when I ran my tests.

I am running the framework using npm run testAndReport:

"scripts": {
    "test": "./node_modules/.bin/cucumber-js --require cucumber.js --require step-definitions/**/*.js -f json:cucumber_report.json --publish-quiet",
    "report": "node reporter.js",
    "testAndReport": "npm run test; npm run report"
}

I can add further code if required.

UPDATE:

I added the following hook in hooks.js:

After(async function (scenario) {
    const img = await global.page.screenshot({ path: `screenshots/${scenario.pickle.name}.png` })
    await this.attach(img, 'image/png')
    await global.page.close()
    await global.context.close()
})

With the above code, a screenshot was added to each test scenario.

I then updated the After hook to try only attach screenshots on failure:

if (scenario.result.status === 'failed') {      
    const img = await global.page.screenshot({ path: `screenshots/${scenario.pickle.name}.png` })
    await this.attach(img, 'image/png')
}

However, with this change, no screenshots are being added

Answer 1

Rather than using:

if (scenario.result.status === 'failed') {

I'm now using

if (scenario.result.status === 'FAILED') {

The status was 'FAILED' rather than 'failed'.

Screenshots now attaching only for FAILED scenarios.