Generate an html report using k6 JSON output

Question

Are there any plugins readily available which can generate html reports from K6 generated JSON output? I am trying to build a simple HTML report, but the generated output JSON is Invalid and cannot be parsed. Below is the JSON output from K6.

{"type":"Metric","data":{"name":"data_received","type":"counter","contains":"data","tainted":null,"thresholds":[],"submetrics":null,"sub":{"name":"","parent":"","suffix":"","tags":null}},"metric":"data_received"}
{"type":"Point","data":{"time":"2020-07-30T21:06:05.6026767Z","value":0,"tags":{"group":"::setup"}},"metric":"data_received"}
{"type":"Metric","data":{"name":"iteration_duration","type":"trend","contains":"time","tainted":null,"thresholds":[],"submetrics":null,"sub":{"name":"","parent":"","suffix":"","tags":null}},"metric":"iteration_duration"}
{"type":"Point","data":{"time":"2020-07-30T21:06:05.6026767Z","value":0.09,"tags":{"group":"::setup"}},"metric":"iteration_duration"}

That's four lines of valid JSON; to use them together you need to create an array instead. You can probably use something like `const data = output.split("\n").map(JSON.parse);` However ideally, the individual data objects should be pushed into an array, and the array then encoded as JSON. — , Aug 04 '20 at 16:47

score 8 · Accepted Answer · answered Apr 14 '21 at 09:36

https://github.com/benc-uk/k6-reporter

This extension to K6 is intended to be used by adding into your K6 test code (JavaScript) and utilizes the handleSummary callback hook, added to K6 v0.30.0. When your test completes a HTML file will be written to the filesystem, containing a formatted and easy to consume version of the test summary data

To use, add this module to your test code.

Import the htmlReport function from the bundled module hosted remotely on GitHub

import { htmlReport } from "https://raw.githubusercontent.com/benc-uk/k6-reporter/main/dist/bundle.js";

Note. Replace main with a version tag (e.g. 2.2.0) to use a specific version

Then outside the test's default function, wrap it with the handleSummary(data) function which K6 calls at the end of any test, as follows:

export function handleSummary(data) {
  return {
    "summary.html": htmlReport(data),
  };
}

The key used in the returned object is the filename that will be written to, and can be any valid filename or path Note. This is a change in the v2.1.1 release

The htmlReport function accepts an optional options map as a second parameter, with the following properties

title string // Title of the report, defaults to current date Multiple outputs If you want more control over the output produced or to output the summary into multiple places (including stdout), just combine the result of htmlReport with other summary generators, as follows:

// This will export to HTML as filename "result.html" AND also stdout using the text summary

import { htmlReport } from "https://raw.githubusercontent.com/benc-uk/k6-reporter/main/dist/bundle.js";
import { textSummary } from "https://jslib.k6.io/k6-summary/0.0.1/index.js";

export function handleSummary(data) {
  return {
    "result.html": htmlReport(data),
    stdout: textSummary(data, { indent: " ", enableColors: true }),
  };
}

Generate an html report using k6 JSON output

1 Answers1