Playwright reporting with CucumberJS

At first, create a CucumberJS configuration. You can keep your configuration in a file. Cucumber will look for one of these files in the root of your project, and use the first one it finds:

• cucumber.js
• cucumber.cjs
• cucumber.mjs
• cucumber.json
• cucumber.yaml
• cucumber.yml

Click here to view more details about CucumberJS configuration.

Let’s create a cucumber.js file and our configuration there. Here’s the sample of that:

// cucumber.js
const config = `
  --require cucumber.node.js
  --format json:playwright/reports/cucumber-html-reporter.json
  --format message:playwright/reports/cucumber-html-reporter.ndjson
  --format html:playwright/reports/report.html
  --publish-quiet
  --format @cucumber/pretty-formatter
  `;

export default config;

As seen above, we have defined the cucumber reporter json file path, and the html reporter path as well in the configuration file.

We will require package cucumber-html-reporter in order to generate html reports. This package will utilize the cucumber report json file which will be generated once the tests are executed and provide us a pretty html report.

Install the ‘cucumber-html-reporter’ package via npm or yarn.

Next, create a configuration file for ‘cucumber-html-reporter’ to generate desirable report. Example of the config file:

// cucumber.report.js

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

const options = {
  jsonFile: 'playwright/reports/cucumber-html-reporter.json',
  launchReport: true,
  noInlineScreenshots: false,
  output: 'playwright/reports/report.html',
  reportSuiteAsScenarios: true,
  scenarioTimestamp: true,
  screenshotsDirectory: 'playwright/reports/screenshots/',
  storeScreenshots: true,
  theme: 'bootstrap',
};

reporter.generate(options);

Notice that we have defined the cucumber report json file path in ‘jsonFile’, resultant html report path in ‘output’, and so on. We are using ‘bootstrap’ theme for our html report.

More info on html reporter options can be explored here.

Now, we also want screenshot attached to our Cucumber HTML report in case of the test failure. We will create a getScreenshot() function which uses screenshot() function of Playwright’s Page class to take page screenshot in case of test failure.

Let’s call this getScreenshot() in After hook of CucumberJS so that it gets called once each scenario is executed. We need to make sure that screenshot is getting attached only if the status of the scenario is not ‘PASSED’.

Here’s how the implementation would look like:

const takeScreenShotOnFailure = async (world: World, scenario: ITestCaseHookParameter) => {
  const screenshotPath: string = './playwright/reports/screenshots/';
  const screensshotExtn: string = '.png';
  const screenShot = await page?.screenshot({
      path: screenShotPath + scenario.pickle.name + screensShotExtn,
      fullPage: true,
  });
// attach the screenshot using World's attach()
  if (screenShot) await world.attach(screenShot, 'image/png');
};

After(async function(scenario: ITestCaseHookParameter) {
  if (scenario.result?.status !== Status.PASSED) {
      await takeScreenShotOnFailure(world, scenario);
  }
});

We are all set now. Now, we can run our Cucumber tests. Once the tests are executed, notice that a reporter json file is generated in reports/ folder.

In order to generate the html report, run this command:

node cucumber.report.js 

After this, a new html file will be added to the defined report output path.

Here’s the snapshot of the Bootstrap Cucumber reporter:

Souce: cucumber-html-reporter npm page