Playwright

Here you will learn how to configure the Playwright Cucumber project to generate Cucumber JSON report and convert it to beautiful HTML report using Multiple Cucumber HTML Reporer.

Tip

Check out the example project under examples/playwright folder in the reporter repository.
You can also refer to the GitHub Actions workflow for Playwright along with the generated reports attached.

Steps to generate Multiple Cucumber HTML reporter

Generate Cucumber JSON reports

The multiple cucumber HTML reporter requires the Cucumber JSON report files in order to generate the beautiful HTML reports.

We have used @cucumber/cucumber dependency to generate the Cucumber JSON report files.

Cucumber configuration

// cucumber.json
{
  "default": {
    "import": ["src/steps/*.steps.ts"],
    "paths": ["src/features/*.feature"],
    "format": ["progress", "json:reports/cucumber-report.json"]  
  }
}

Prepare report folders

This script will be executed before executing the Cucumber tests to clean up the previous test results and prepare the folders for the new test results.

// prepare-run.ts
import { mkdir, rm } from 'node:fs/promises';

await rm('reports', { recursive: true, force: true });
await rm('test-results', { recursive: true, force: true });

await mkdir('reports', { recursive: true });
await mkdir('test-results/screenshots', { recursive: true });
await mkdir('test-results/trace', { recursive: true });

Reporter configuration file

Create a Yaml reporter config file at the root of the project as shown below:

# .multiple-cucumber-html-reporter.yml
jsonDir: 'reports/'
reportPath: 'reports/report/'
useCDN: false
openReportInBrowser: true
saveCollectedJSON: false
displayReportTime: true
durationAggregation: 'wallClock'
displayChartPercentages: true
durationInMS: false
displayDuration: true
pageTitle: 'My Playwright Typescript Sample'
reportName: 'Cucumber JS Report'
metadata:
  'saucedemo.feature':
    browser:
      name: 'firefox'
      version: '148'
  'restful-booker.feature':
    browser:
      name: 'api'
      version: ''
customData:
  projectName: 'Playwright sample project'
  release: '1.2.0'
  testCycle: ${GITHUB_RUN_ID:'Cycle 1'}
  buildNumber: ${GITHUB_RUN_NUMBER:'Build 1'}
  environment: 'production'
  ciPipeline: 'GitHub Actions'

Configure the scripts in `package.json`

Following scripts are configured in package.json to execute prepare-run.ts script before running tests and generate-report.ts script after running tests.

// package.json
{
  "scripts": {
    "pretest": "tsx src/utils/prepare-run.ts",
    "test": "node --import tsx ./node_modules/@cucumber/cucumber/bin/cucumber-js",
    "report": "mchr --silent"
  },
}

pnpm pretest - Prepare the test environment and folders for the new test results.
pnpm test - Run the tests in the browser and open the report in default browser if configured.
pnpm report - Generate HTML reports by using the Cucumber generated JSON reports.

Install the dependencies

Install the dependencies by running the following command:

pnpm install

Run the Tests

Execute your test cases by running the following command in the terminal:

pnpm test

This command will execute all your test cases.

Generate the report

Execute the following command to generate the report:

pnpm report

On this page