Cucumber.js

Cucumber-js provides several built-in formatters to control how test results are displayed or exported. You can choose a formatter based on whether you need real-time terminal feedback, a rich interactive report, or structured data for other tools.

Available built-in formatters:

• summary: Outputs a summary of results (including errors and pending step snippets) at the end of the run.
• progress: Provides real-time feedback for each step/hook and a summary at the end.
• progress-bar: Provides a real-time updating progress bar.
• pretty: Writes a rich, detailed report of scenario and example execution as it happens (Added in v12.1.0; can be referenced as @cucumber/pretty-formatter from v11.1.0).
• html: Produces a standalone, interactive HTML report.
• message: Outputs Cucumber Messages as newline-delimited JSON (recommended for structured data).
• json: Outputs results in the legacy JSON format (maintenance mode).
• junit: Produces XML-based reports in the JUnit format, ideal for CI platforms.
• snippets: Prints only the code snippets needed to implement undefined steps.
• usage: Lists step definitions, their usage locations, and durations.
• usage-json: Outputs step usage data in JSON format.

You can add attachments to the output of messages and JSON formatters using the this.attach method. The default world constructor assigns this function to this.attach. If you use a custom world constructor, you must manually assign the attach function passed to the constructor to this.attach to enable this feature.

Text Attachments

By default, text is saved as text/plain. You can specify a different MIME type using an options object.

File Names

You can provide a fileName in the options object to allow formatters to make the attachment available for download.

Binary Data (Images, Buffers, Streams)

• Streams: You can pass a stream.Readable. You must either await the returned promise or provide a callback to ensure the stream is fully read before continuing.
• Buffers: You can pass a Node.js Buffer directly.
• Base64 Strings: If you have a pre-encoded base64 string, prefix the mediaType with base64: (e.g., base64:image/png).

var {After, Status} = require('@cucumber/cucumber');

// Attach text with custom MIME type and filename
After(function () {
  this.attach('{"name": "some JSON"}', {
    mediaType: 'application/json',
    fileName: 'results.json'
  });
});

// Attach a stream (using await)
After(async function (testCase) {
  if (testCase.result.status === Status.FAILED) {
    var stream = getScreenshotOfError();
    await this.attach(stream, { mediaType: 'image/png' });
  }
});

// Attach a Buffer
After(function (testCase) {
  if (testCase.result.status === Status.FAILED) {
    var buffer = getScreenshotOfError();
    this.attach(buffer, { mediaType: 'image/png' });
  }
});

// Attach a base64-encoded string
After(async function (testCase) {
  if (testCase.result.status === Status.FAILED) {
    const screenshot = await driver.takeScreenshot();
    this.attach(screenshot, { mediaType: 'base64:image/png' });
  }
});

Hooks allow you to execute code before or after scenarios and steps.

• Before hooks execute in the order they were defined.
• After hooks execute in the reverse order they were defined.

Important: Do not use arrow functions for hooks if you need to access the World instance via this. Use standard function expressions instead.

Hooks can be synchronous, use an asynchronous callback, or return a Promise.

const {After, Before} = require('@cucumber/cucumber');

// Synchronous
Before(function () {
  this.count = 0;
});

// Asynchronous Callback
Before(function (testCase, callback) {
  var world = this;
  tmp.dir({unsafeCleanup: true}, function(error, dir) {
    if (error) {
      callback(error);
    } else {
      world.tmpDir = dir;
      callback();
    }
  });
});

// Asynchronous Promise
After(function () {
  // Assuming this.driver is a selenium webdriver
  return this.driver.quit();
});