npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cucumber-html-reporter-flexible

v1.1.6

Published

Generates Cucumber HTML reports in three different themes with flexibility

Downloads

6

Readme

cucumber-html-reporter-flexible

It is an extended version of cucumber-html-reporter

Below are the list of enhancements added

Add custom scripts & styles

var reporter = require("cucumber-html-reporter");

var options = {
  theme: "bootstrap",
  jsonFile: "test/report/cucumber_report.json",
  output: "test/report/cucumber_report.html",
  reportSuiteAsScenarios: true,
  scenarioTimestamp: true,
  customScripts: ["test/report/cucumber-1.js", "test/report/cucumber-2.js"],
  customStyles: ["test/report/cucumber-1.css", "test/report/cucumber-2.css"],
};

reporter.generate(options);

These files will be added as <style> tags in <head> and <script> tags after <body>.

Pass in JSON object directly

var reporter = require("cucumber-html-reporter");

var sampleJSON = [{
  elements: [{
    steps: [
      {
        ...
      }
    ]
    ...
  }]
}, {
  ...
}]

var options = {
  theme: "bootstrap",
  json: sampleJSON,
  output: "test/report/cucumber_report.html",
  reportSuiteAsScenarios: true,
  scenarioTimestamp: true
};

reporter.generate(options);

Get the generated HTML as return value

var reporter = require("cucumber-html-reporter");

var options = {
  theme: "bootstrap",
  jsonFile: "test/report/cucumber_report.json",
  reportSuiteAsScenarios: true,
  scenarioTimestamp: true,
};

//don't pass the output property

const html = reporter.generate(options);
console.log(html);

//if you pass a callback to generate, callback
//will be called with html as the first argument.

reporter.generate(options, function (html) {
  console.log(html);
});

Rest of the things remain same as the original cucumber-html-reporter

Preview of HTML Reports

Provide Cucumber JSON report file created from your framework and this module will create pretty HTML reports. Choose your best suitable HTML theme and dashboard on your CI with available HTML reporter plugins.

  1. Bootstrap Theme Reports with Pie Chart
  2. Hierarchical Feature Structure Theme Reports With Pie Chart
  3. Foundation Theme Reports
  4. Simple Theme Reports

Snapshot of Bootstrap Report

Alt text

More snapshots are availble here

Install

npm install cucumber-html-reporter --save-dev

Notes:

Usage

Let's get you started:

  1. Install the package through npm
  2. Create an index.js and specify the options. Example of bootstrap theme:
var reporter = require("cucumber-html-reporter");

var options = {
  theme: "bootstrap",
  jsonFile: "test/report/cucumber_report.json",
  output: "test/report/cucumber_report.html",
  reportSuiteAsScenarios: true,
  scenarioTimestamp: true,
  launchReport: true,
  metadata: {
    "App Version": "0.3.2",
    "Test Environment": "STAGING",
    Browser: "Chrome  54.0.2840.98",
    Platform: "Windows 10",
    Parallel: "Scenarios",
    Executed: "Remote",
  },
};

reporter.generate(options);

//more info on `metadata` is available in `options` section below.

//to generate consodilated report from multi-cucumber JSON files, please use `jsonDir` option instead of `jsonFile`. More info is available in `options` section below.

Please look at the Options section below for more options

  1. Run the above code in a node.js script after Cucumber execution:
node index.js

For CucumberJS

This module converts Cucumber's JSON format to HTML reports.

The code has to be separated from CucumberJS execution (after it).

In order to generate JSON formats, run the Cucumber to create the JSON format and pass the file name to the formatter as shown below,

$ cucumberjs test/features/ -f json:test/report/cucumber_report.json

Multiple formatter are also supported,

$ cucumberjs test/features/ -f summary -f json:test/report/cucumber_report.json

Are you using cucumber with other frameworks or running cucumber-parallel? Pass relative path of JSON file to the options as shown here

Options

theme

Available: ['bootstrap', 'hierarchy', 'foundation', 'simple'] Type: String

Select the Theme for HTML report.

N.B: Hierarchy theme is best suitable if your features are organized under features-folder hierarchy. Each folder will be rendered as a HTML Tab. It supports up to 3-level of nested folder hierarchy structure.

jsonFile

Type: String

Provide path of the Cucumber JSON format file

jsonDir

Type: String

If you have more than one cucumber JSON files, provide the path of JSON directory. This module will create consolidated report of all Cucumber JSON files.

e.g. jsonDir: 'test/reports' //where reports directory contains valid *.json files

N.B.: jsonFile takes precedence over jsonDir. We recommend to use either jsonFile or jsonDir option.

output

Type: String

Provide HTML output file path and name

reportSuiteAsScenarios

Type: Boolean Supported in the Bootstrap theme.

true: Reports total number of passed/failed scenarios as HEADER.

false: Reports total number of passed/failed features as HEADER.

launchReport

Type: Boolean

Automatically launch HTML report at the end of test suite

true: Launch HTML report in the default browser

false: Do not launch HTML report at the end of test suite

ignoreBadJsonFile

Type: Boolean

Report any bad json files found during merging json files from directory option.

true: ignore any bad json files found and continue with remaining files to merge.

false: Default option. Fail report generation if any bad files found during merge.

name

Type: String (optional)

Custom project name. If not passed, module reads the name from projects package.json which is preferable.

brandTitle

Type: String (optional)

Brand Title is the brand of your report, e.g. Smoke Tests Report, Acceptance Test Report etc as per your need. If not passed, it will be displayed as "Cucumberjs Report"

columnLayout

Available: [1, 2] Type: Number Default: 2

Select the Column Layout. One column or Two columns

1 = One Column layout (col-xx-12) 2 = Two Columns Layout (col-xx-6)

storeScreenshots

Type: Boolean Default: undefined

true: Stores the screenShots to the default directory. It creates a directory 'screenshot' if does not exists.

false or undefined : Does not store screenShots but attaches screenShots as a step-inline images to HTML report

screenshotsDirectory

Type: String (optional) Default: options.output/../screenshots

Applicable if storeScreenshots=true. Relative path for directory where screenshots should be saved. E.g. the below options should store the screenshots to the <parentDirectory>/screenshots/ where as the report would be at <parentDirectory>/report/cucumber_report.html

{
   ...
   ...
   output: '/report/cucumber_report.html',
   screenshotsDirectory: 'screenshots/',
   storeScreenshots: true
}

noInlineScreenshots

Type: Boolean Default: undefined

true: Applicable if storeScreenshots=true. Avoids inlining screenshots, uses relative path to screenshots instead (i.e. enables lazy loading of images).

false or undefined: Keeps screenshots inlined.

scenarioTimestamp

Type: Boolean Default: undefined

true: Applicable if theme: 'bootstrap'. Shows the starting timestamp of each scenario within the title.

false or undefined: Does not show starting timestamp.

metadata

Type: JSON (optional) Default: undefined

Print more data to your report, such as browser info, platform, app info, environments etc. Data can be passed as JSON key-value pair. Reporter will parse the JSON and will show the Key-Value under Metadata section on HTML report. Checkout the below preview HTML Report with Metadata.

Pass the Key-Value pair as per your need, as shown in below example,


 metadata: {
        "App Version":"0.3.2",
        "Test Environment": "STAGING",
        "Browser": "Chrome  54.0.2840.98",
        "Platform": "Windows 10",
        "Parallel": "Scenarios",
        "Executed": "Remote"
      }

Tips

Attach Screenshots to HTML report

Capture and Attach screenshots to the Cucumber Scenario and HTML report will render the screenshot image

for Cucumber V1


  driver.takeScreenshot().then(function (buffer) {
    return scenario.attach(new Buffer(buffer, 'base64'), 'image/png');
  };

for Cucumber V2 and V3


  var world = this;

  driver.takeScreenshot().then(function (buffer) {
    return world.attach(buffer, 'image/png');
  };

Attach Plain Text to HTML report

Attach plain-texts/data to HTML report to help debug/review the results

scenario.attach("test data goes here");

Attach pretty JSON to HTML report

Attach JSON to HTML report

scenario.attach(JSON.stringify(myJsonObject, undefined, 4));

Changelog

changelog