Configuration

Config Examples

Testplane

testplane.config.ts

export = {
    // ...
    plugins: {
        'html-reporter/testplane': {
            enabled: true,
            path: 'html-report',
        },
    },
};

Playwright

playwright.config.ts

// playwright.config.ts
export default defineConfig({
    // ...
    reporter: [
        ['html-reporter/playwright', {
            enabled: true,
            defaultView: 'failed',
            path: 'html-report',
        }],
    ],
});

Jest

jest.config.ts

const config = {
    // ...
    reporters: [
        'html-reporter/jest', // Connecting our reporter
        'default' // Built in Jest reporter or any additional reporters you need (optional)
    ],
};

If you want to pass configuration options, you may do the following:

jest.config.ts

const config = {
    // ...
    reporters: [
        ['html-reporter/jest', {
            path: 'html-report',
        }]
    ],
};

warning

If you are using jest@27 or below, you need to use the following path: html-reporter/build/jest.

Configuration Reference

Parameter	Type	Default value	Description
enabled	boolean	true	Enable / disable the plugin.
path	string	"testplane-report"	The path to the folder for saving html-report files.
saveErrorDetails	boolean	false	Save / do not save error details in json files.
uiMode	string	null	Default UI mode: "old" for classic interface, "new" for modern interface.
defaultView	string	"all"	The test filtering mode when displayed, which will be set by default.
diffMode	string	"3-up"	The mode of viewing diffs, which will be set by default.
baseHost	string	N/A	Replaces the original host address for viewing in the browser.
errorPatterns	ErrorPattern[] | string[]	[]	Error patterns with hints to improve the UX of the report.
metaInfoBaseUrls	Record<string, string>	{}	Base URLs for generating links in the Meta section based on meta information about the tests run.
saveFormat	string	"sqlite"	DEPRECATED. Allows you to set the format in which the results of the tests run will be saved.
customGui	CustomGUI	{ }	DEPRECATED. Use plugins instead. Description of custom controls for GUI mode.
pluginsEnabled	boolean	false	Enable plugins for the report.
plugins	Plugin[]	[]	A list of plugins with their settings.
customScripts	AnyFunction[]	[]	A list of functions that implement custom scripts. For example, Yandex.Metrika scripts or a Bug.
yandexMetrika	YandexMetrika	see below	Yandex.Metrika.

enabled

Enables or disables the plugin.

path

The path to the folder for saving html-report files. By default, the files will be saved to the testplane-report folder in the current working folder.

saveErrorDetails

Save or not save error details in json files (to the error-details folder).

By default, "do not save": false.

Any Testplane plugin can add any details to the error object when it occurs. These details can help the user in debugging problems that have occurred in the test. Html-reporter saves these details in the error-details folder in a file named: <hash from the full name of the test>-<browser>_<retry number>_<timestamp>.json.

Under the stack trace, the html-reporter adds an Error details section with a <title> link pointing to the json file. The user can open this file either in the browser or in any IDE.

Example of how to add details to an error object from a plugin:

const err = new Error("some error");

err.details = {
    title: "description, will be used as url title",
    data: {}, // or [], or String
};

throw err;

uiMode

Default UI mode: "old" for classic interface, "new" for modern interface. Affects redirects between old and new interfaces.

By default, no redirects are performed.

Available values: "old", "new".

For example, if set to "new", users will be redirected to the new interface when trying to access the old interface. However, if the user manually clicks "return to old interface", this preference will be saved, and they will always use the old interface until they switch back.

defaultView

The test filtering mode when displayed, which will be set by default. The following values are available:

View mode	Description
all	all tests
passed	only passed tests
failed	only failed tests
retried	only those tests in which there were retries (re-runs)
skipped	only disabled (skipped) tests

By default: all, that is, if the parameter is not set, all tests will be displayed.

diffMode

The mode of viewing diffs, which will be set by default. The following values are available:

Diff mode	Description
3-up	all images (expected, actual, diff) in one column, under each other
3‑up‑scaled	all images (expected, actual, diff) in one row so that they fit on the screen
only-diff	only diff image
switch	reference image with the ability to switch to the actual image by mouse click
swipe	the actual image on top of the reference image, with a separator opening the reference image
onion-skin	the actual image on top of the reference with the ability to change the transparency of the actual image

By default: 3-up.

baseHost

Replaces the original host address for viewing in the browser. By default, the original host address is not changed.

errorPatterns

Error patterns are used:

• to show more understandable error information if they correspond to patterns for which there is a detailed description;
• in the Group by display mode with the error key selected.

Error patterns can be set either as objects or as strings.

To set the error pattern as an object, use the following format:

{
    name: '<error name>',
    pattern: '<error pattern>',
    hint: '<hint to the user>'
}

where:

Parameter	Type	Description
name	string	Error name.
pattern	string | RegExp	A regular expression or a regular string that the error should match.
hint	string	Optional parameter. A hint of what can be done with this error: why it occurred, how to fix it, etc.

If the error pattern is specified as a string, for example: <error>, then this string is automatically treated as an object of the form:

{
    name: '<error>',
    pattern: '<error>'
}

This way of setting a pattern is convenient for those errors where name and pattern are completely the same.

When one of the error patterns matches the error message, then:

• the name of the error template will be displayed as the title of the error message, and the original error message will be hidden under the cut;
• the hint for the error will be displayed after the error field stack. The hint can be specified as an html string. For example, <div>some-useful-hint</div>.

In the Group by mode with the selected error key, the test will be associated with the group if the test error matches the group error pattern. If the test cannot be linked to existing groups, a new group will be created.

metaInfoBaseUrls

Base URLs for generating links in the Meta section based on meta information about the tests run.

The parameter is set as an object:

{
    '<option-1>': 'value of option 1',
    '<option-2>': 'value of option 2',
    // etc.
}

For example:

{
    'file': 'base/path'
}

When the value of any key is set to auto, the base URL will be set to the base host specified in the report UI, or remain unchanged if the base host is not specified.

For example, if you have the following metaInfoBaseUrls value:

{
    custom_url: "auto";
}

And you set the meta.custom_url field to https://example.com/some/path in your tests, you will see in the meta:

• A link to https://example.com/some/path if the base host is not set in the UI
• A link to https://another-host.com/some/path if the base host in the UI is set to https://another-host.com

saveFormat

DEPRECATED

Allows you to set the format in which the results of the tests run will be saved.

Only one value is available now, which is used by default:

• sqlite — save the results of the tests run in the database of SQLite format.

customGui

DEPRECATED

warning

Instead of customGui, it is recommended to use report plugins.

Description of custom controls for GUI mode.

See more in the section "Customizing GUI".

pluginsEnabled

Enable plugins for html-reporter.

plugins

A list of plugins with their settings.

See more details in the section "Plugins".

customScripts

A list of custom scripts in the form of an array of functions. Using this parameter, you can add any script to the html-report page. For example, to collect any metrics or implement additional functionality. The scripts will be executed immediately after rendering the page.

For example:

customScripts: [
    function () {
        console.info("some logs");
    },
    () => {
        const div = document.createElement("div");
        div.innerHTML = "hello";
        document.body.prepend(div);
    },
];

yandexMetrika

By default, anonymous data about report UI usage is collected for analysis and UX improvement purposes. Data collected includes report loading speed, frequency of some feature usage (e.g., test sorting), and clicks on UI elements. Data about your project or test content is NOT collected under any circumstances.

If you don't want to share analytics with us, you can disable it in any of the following ways:

• In the config

  module.exports = {
      plugins: {
          "html-reporter/testplane": {
              yandexMetrika: {
                  enabled: false,
              },
              // other html-reporter settings...
          },
          // other Testplane plugins...
      },
      // other Testplane settings...
  };
• Using environment variables: html_reporter_yandex_metrika_enabled=false or simply NO_ANALYTICS=true
• Using CLI arguments: --html-reporter-yandex_metrika_enabled=false

Passing parameters via the CLI

All plugin parameters that can be defined in the config can also be passed as command line options or through environment variables during Testplane startup. Use the prefix --html-reporter- for command line options and html_reporter_ for environment variables.

For example, the settings parameter path can be passed in the following ways:

testplane path/to/mytest.js --html-reporter-path custom/dir

html_reporter_path=custom/dir testplane path/to/mytest.js

Data storage

As mentioned above, html-reporter saves the tests run results to the SQLite database.

Why do we use SQLite? Because it is:

• serverless, easy to connect and requires no configuration
• cross-platform, runs on any operating system
• single-file, easy to reuse reports and share them
• faster than if you store the report on the file system
• compact and has full SQL.

Files that are created during the execution of tests:

• sqlite.db—Sqlite database with tests run results
• data.js—report configuration
• databaseUrls.json—absolute or relative URLs to SQLite databases (sqlite.db) and/or URLs of other databaseUrls.json files (see command merge-reports).