WEBDRIVER.IO.MD

webdriver.io

NOTE:
If you are using WebdriverIO V4 follow the instructions below, if you are using WebdriverIO V5, please check here.

Follow the installation instructions as mentioned in Install

Using wdio-cucumber-framework version 2.2.0 or higher?

If you are using the latest version of wdio-cucumber-framework version 2.2.0 or higher, you can now use a new reporter called wdio-multiple-cucumber-html-reporter. It works nicely with this reporter.

Using wdio-cucumber-framework version lower than 2.2.0?

NOTE: THIS INSTRUCTION ONLY WORKS WITH CucumberJS V2 AND THUS wdio-cucumber-framework V1.1.1. I'M WORKING ON A SOLUTION FOR THE LATEST VERSION OF CucumberJS V4 AND THUS wdio-cucumber-framework > V2.0.0

THIS REPORT WORKS BASED ON EXTRA PROVIDED BROWSER INFO IN THE REPORT. PLEASE FOLLOWING THE INSTRUCTIONS BELOW / IN THE README.MD TO ADD THAT INFO. IF YOU DON'T YOU MAY GET ERRORS GENERATING THE REPORT

Step 1: Add extra dependency

Add an extra dependency to your project so you can save the extra JSON-files.

npm install fs-extra --save-dev

This dependency will be used in the next step.

Steps 2: Create a report hook

Create a file called report.hook.js and save it in your project. I always have a specific folder in which I save my configs and hooks like ./e2e/config/hooks.

This hook will do the following:

• is will take the complete report (of all features that have been run) and cut it into small reports per feature.
• each report will get the instance data that is needed to show the name/version of the browser/platform in the report, see the comments in the hook, see also MetaData

Add the following code to it:

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

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

/**
 * This hook is needed to generate a json-file for the reporting
 */
defineSupportCode(({ registerListener }) => {
  registerListener(jsonFormatter);

  return generateAndSaveJsonFile();

  /**
   * Generate and save the report json files
   */
  function generateAndSaveJsonFile() {
    jsonFormatter.log = (report) => {
      adjustAndSaveJsonFile(device.desiredCapabilities, report);
    };
  }

  /**
   * Adjust and save the json files
   */
  function adjustAndSaveJsonFile(capabilities, report) {
    const jsonReport = JSON.parse(report);
    if (jsonReport.length > 0) {
      const featureName =
        jsonReport[0].name
          .replace(/\s+/g, "_")
          .replace(/\W/g, "")
          .toLowerCase() || "noName";
      const snapshotPath = join(projectRoot, ".tmp/json-output");
      const filePath = join(
        snapshotPath,
        `${featureName}.${
          capabilities.browserName
        }.${new Date().getTime()}.json`
      ); // eslint-disable-line

      // The report is enriched with data of the running instance, this is needed to show the name/version of the browser/platform in the report
      jsonReport[0].metadata = {
        browser: {
          name: capabilities.browserName,
          version: "60", // Add your version or dynamically add your version here
        },
        device: "local development machine",
        platform: {
          name: "osx", // Add your platform name here
          version: "10.12.6", // Add your platform version here
        },
      };

      ensureDirSync(snapshotPath);

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

Step 3: Create an after scenario hook

If you want to attach a screenshot after failure to the report hook create a file called after.scenario.js and save it to your project.

import { After, Status } from "cucumber";

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

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

Step 4: Change the wdio.config

Add the following lines of code to your wdio.conf.js file (or however you call it). See Options for more options

const report = require("multiple-cucumber-html-reporter"); // this will add the reporter to your config

// Add a `onComplete`-hook with the following data.
onComplete: () => {
  report.generate({
    jsonDir: ".tmp/json-output/",
    reportPath: ".tmp/report/",
  });
};

The jsonDir will tell the module where to find the the generated JSON-report files, the reportPath will be the path to where the reports are saved.