WebdriverIO Integration

Step-by-step guide on how to integrate Multiple Cucumber HTML Reporter with WebdriverIO.

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

WebdriverIO Support

Caution

If you are using WebdriverIO V5 or higher, we recommend using the wdio-cucumberjs-json-reporter from the WebdriverIO community.

Add Dependency

You will need fs-extra to handle JSON result files:

npm install fs-extra --save-dev

Set Up Report Hook

Create a report.hook.js file (e.g., in e2e/config/hooks) and add the following logic:

import Cucumber, { defineSupportCode } from "cucumber";
import { ensureDirSync, writeJsonSync } from "fs-extra";
import { join } from "path";

const jsonFormatter = new Cucumber.JsonFormatter();
const projectRoot = process.cwd();

defineSupportCode(({ registerListener }) => {
  registerListener(jsonFormatter);

  return generateAndSaveJsonFile();

  function generateAndSaveJsonFile() {
    jsonFormatter.log = (report) => {
      adjustAndSaveJsonFile(device.desiredCapabilities, report);
    };
  }

  function adjustAndSaveJsonFile(capabilities, report) {
    const jsonReport = JSON.parse(report);
    if (jsonReport.length > 0) {
      const featureName = jsonReport[0].name.toLowerCase() || "noName";
      const snapshotPath = join(projectRoot, ".tmp/json-output");
      const filePath = join(snapshotPath, `${featureName}.${capabilities.browserName}.${new Date().getTime()}.json`);

      jsonReport[0].metadata = {
        browser: {
          name: capabilities.browserName,
          version: "60",
        },
        device: "Local development machine",
        platform: {
          name: "osx",
          version: "10.12.6",
        },
      };

      ensureDirSync(snapshotPath);
      writeJsonSync(filePath, jsonReport, { spaces: 2 });
    }
  }
});

Handle Failures

To automatically capture screenshots and attach them on failure globally:

import { After, Status } from "cucumber";

After(function (scenarioResult) {
  if (scenarioResult.status === Status.FAILED) {
    const screenshot = browser.saveScreenshot();
    world.attach(screenshot, "image/png");
  }

  return Promise.resolve(scenarioResult.status);
});

Configure `wdio.conf.js`

Add the report logic to the onComplete hook:

const report = require("multiple-cucumber-html-reporter");

exports.config = {
  // ... other configs ...
  onComplete: () => {
    report.generate({
      jsonDir: ".tmp/json-output/",
      reportPath: ".tmp/report/",
    });
  },
};