WebdriverIO

Integrating with WebdriverIO allows you to automatically generate beautiful reports and attach screenshots on failure.

WebdriverIO Support

There are two approaches which you can use to generate beautiful reports using multiple Cucumber HTML reporter.

WebDriverIO Cucumber JSON reporter
WebDriverIO Cucumber JSON native formatter

Using WebDriverIO Cucumber JSON Reporter

Idea

When you are setting up WebDriverIO or you already have an existing project for WebDriverIO, you need to use their community reporter i.e., wdio-cucumberjs-json-reporter to generate the JSON report files, which will be used by the multiple-cucumber-html-reporter to generate the HTML report.

Checkout WebdriverIO Cucumber JSON reporter.

Add WebDriverIO Reporter Dependency

First, install wdio-cucumberjs-json-reporter as a dev dependency in your project:

npm install -D wdio-cucumberjs-json-reporter

yarn add -D wdio-cucumberjs-json-reporter

pnpm add -D wdio-cucumberjs-json-reporter

Configure WebDriverIO Reporters

Following is the key configuration changes required for generating Cucumber JSON reports and the beautiful HTML report:

// wdio.conf.ts
export const config: WebdriverIO.Config = {
  // . . .
  framework: 'cucumber',
  reporters: [
    'spec',
    [
      'cucumberjs-json',  
      {
        jsonFolder: 'reports/json', 
      },
    ],
  ],
  // . . .
};

Reporter Options

Check out all the supported options for the reporter here.

Delete Reports Folder

In the onPrepare hook, we delete the reports folder if it exists. This helps in generating a fresh report every time the tests are run.

This can be done as shown in the below example:

// wdio.conf.ts
import { existsSync } from 'node:fs';
import { rm } from 'node:fs/promises';

export const config: WebdriverIO.Config = {
  //. . .
  onPrepare: async () => {
    if (existsSync('reports')) {
      await rm('reports', { recursive: true });
    }
  },
  //. . .
};

Handle Failures

To automatically capture screenshots and attach them on failure globally:

// wdio.conf.ts
import cucumberJson from 'wdio-cucumberjs-json-reporter';

export const config: WebdriverIO.Config = {
  //. . .
  afterScenario: async (_world, result, _context) => {
    if (!result.passed) {
      cucumberJson.attach(await browser.takeScreenshot(), 'image/png');  
    }
  },
  //. . .
};

Generate Report after Test execution

Add the report logic to the onComplete hook as shown in the below example:

// wdio.conf.ts
import { generate } from 'multiple-cucumber-html-reporter';
import os from 'node:os';

export const config: WebdriverIO.Config = {
  // ... other configs ...
  onComplete: async (_exitCode, _config, _capabilities, _results) => {
    await generate({
      jsonDir: 'reports/json/', 
      reportPath: 'reports/report/', 
      useCDN: false,
      openReportInBrowser: true,
      saveCollectedJSON: true,
      displayReportTime: true,
      durationInMS: false,
      displayDuration: true,
      pageTitle: 'My WDIO Typescript Sample',
      reportName: 'Cucumber JS Report',
      customData: {
        title: 'Run Info',
        data: [
          { label: 'Project', value: 'Sample WDIO Typescript' },
          { label: 'Release', value: '1.0.0' },
          { label: 'WDIO Version', value: '9.0.0' },
          { label: 'Node Version', value: '24.0.0' },
          {
            label: 'Execution Start Time',
            value: dayjs(startTime).format('YYYY-MM-DD HH:mm:ss.SSS'),
          },
          {
            label: 'Execution End Time',
            value: dayjs(endTime).format('YYYY-MM-DD HH:mm:ss.SSS'),
          },
        ],
      },
    });
  },
};

Info

Note that the jsonDir points to a directory, inside which there will be JSON result files created by the Cucumber JSON reporter as configured earlier.

The HTML report will be generated inside a timestamped folder within the reportPath directory.

Check out all the supported options here.

If you want to add your test specific metadata, you can do that by passing the metadata from the cjson:metadata capability object as shown below:

// wdio.conf.ts
import type { Metadata } from 'multiple-cucumber-html-reporter';

export const config: WebdriverIO.Config = {
  // ... other configs ...
  capabilities: [
    {
      browserName: 'chrome',
      browserVersion: '148',
      'cjson:metadata': { 
        browser: {  
          name: 'chrome', 
          version: '148', 
        },  
        platform: { 
          name: os.platform().trim(), 
          version: os.release().trim(), 
        },  
      },  
    } as WebdriverIO.Capabilities & { 'cjson:metadata': Metadata },
  ],
};

Configure `package.json` for test script

// package.json
"scripts": {
  "test:reporter": "wdio run ./wdio-cc-reporter.conf.ts"
}

Run the Tests and generate HTML report

Execute the following command to run the tests and generate the HTML report:

pnpm test:reporter

Using WebDriverIO Cucumber in-built JSON formatter

Cucumber framework has an in-built JSON formatter which can be used to generate JSON reports. In WebDriverIO, it has @wdio/cucumber-framework integration for Cucumber.

Add dependency

Install the Cucumber framework for WebdriverIO:

npm install -D @wdio/cucumber-framework

yarn add -D @wdio/cucumber-framework

pnpm add -D @wdio/cucumber-framework

Configure `tsconfig.json`

The types section in tsconfig.json must include the types for the Cucumber framework.

// tsconfig.json (in your project root)
{
  "compilerOptions": {
    // ...
    "types": [
      "node",
      "@wdio/globals/types",
      "expect-webdriverio",
      "@wdio/cucumber-framework"
    ]
    // ...
  }
}

Configure Cucumber Options

Add Cucumber configuration in the cucumberOpts section as shown in the below example:

// wdio.conf.ts
export const config: WebdriverIO.Config = {
  // ... other options
  cucumberOpts: {
    // ... other Cucumber options
    format: [
      'json:reports/json/cucumber-report.json'
    ],
  },
};