/html-reporter

Html reporter for gemini and hermione

Primary LanguageJavaScriptMIT LicenseMIT

html-reporter

Plugin for gemini and hermione which is intended to aggregate the results of tests running into html report.

You can read more about gemini plugins here and about hermione plugins here.

Installation

npm install html-reporter

⚠️ Requires Hermione >=2.7.0

Usage

Plugin has following configuration:

  • enabled (optional) Boolean – enable/disable the plugin; by default plugin is enabled

  • path (optional) String - path to directory for saving html report file; by default html report will be saved into gemini-report/index.html inside current work directory.

  • saveErrorDetails (optional) Boolean – save/don't save error details to json-files (to error-details folder); false by default.

    Any plugin of hermione can add error details when throwing an error. Details can help a user to debug a problem in a test. Html-reporter saves these details to a file with name <hash of suite path>-<browser>_<retry number>_<timestamp>.json in the error-details folder. Below a stacktrace html-reporter adds the section Error details with the link title pointing to the json-file. A user can open it in a browser or any IDE.

    How to add error details when throwing an error from a plugin:

   const err = new Error('some error');
   err.details = {title: 'description, will be used as url title', data: {} | [] | 'some additional info'};
   throw err;
  • defaultView (optional) String - default view mode. Available values are:
    • all - show all tests. Default value.
    • failed - show only failed tests.
  • baseHost (optional) - String - it changes original host for view in the browser; by default original host does not change
  • scaleImages (optional) – Boolean – fit images into page width; false by default
  • lazyLoadOffset (optional) - Number - allows you to specify how far above and below the viewport you want to begin loading images. Lazy loading would be disabled if you specify 0. 800 by default.
  • errorPatterns (optional) - Array - error message patterns for 'Group by error' mode. Array element must be Object ({'name': String, 'pattern': String}) or String (interpret as name and pattern). Test will be associated with group if test error matches on group error pattern. New group will be created if test cannot be associated with existing groups.
  • metaInfoBaseUrls (optional) Object - base paths for making link from Meta-info values. Object option must be Meta-info's key and value must be String. For example, {'file': 'base/path'}.

Also there is ability to override plugin parameters by CLI options or environment variables (see configparser). Use html_reporter_ prefix for the environment variables and --html-reporter- for the cli options.

For example you can override path option like so:

$ html_reporter_path=custom/dir gemini test
$ gemini test --html-reporter-path custom/dir

Gemini Usage

Add plugin to your gemini config file:

module.exports = {
    // ...
    system: {
        plugins: {
            'html-reporter/gemini': {
                enabled: true,
                path: 'my/gemini-reports',
                defaultView: 'all',
                baseHost: 'test.com',
                errorPatterns: [
                    'Parameter .* must be a string',
                    {
                        name: 'Cannot read property of undefined',
                        pattern: 'Cannot read property .* of undefined'
                    }
                ]
            }
        }
    },
    //...
}

Hermione Usage

Add plugin to your hermione config file:

module.exports = {
    // ...
    plugins: {
        'html-reporter/hermione': {
            enabled: true,
            path: 'my/hermione-reports',
            defaultView: 'all',
            baseHost: 'test.com',
            errorPatterns: [
                'Parameter .* must be a string',
                {
                    name: 'Cannot read property of undefined',
                    pattern: 'Cannot read property .* of undefined'
                }
            ]
        }
    },
    //...
}

Additional commands

Additional commands that are added to the tool for which this plugin is connected.

gui

Command that adds ability to effective work with screenshots.

Example of usage:

npx hermione gui

merge-reports

Command that adds ability to merge reports which are created after running the tests.

Example of usage:

npx hermione merge-reports src-report-1 src-report-2 -d dest-report

Testing

Run mocha tests:

npm run test-unit

Run eslint codestyle verification

npm run lint

Run hermione (integration) tests:

npm run test-func

Before run integration tests on local machine you should run sauce-connect

Api

Html-reporter adds to your tool object with api:

addExtraItem

Adds item to html report as link:

@param {String} text of link
@param {String} url of link

tool.htmlReporter.addExtraItem('some-text', 'some-url')

In this case url with link 'some-url' and text 'some-text' will be added to the menu bar.

addMetaInfoExtender

Extend meta-info of each test using passed data:

tool.htmlReporter.addMetaInfoExtender(name, value);
  • name (required) String - name of meta info
  • value (required) Function - handler to which suite and extraItems are passed

Example:

tool.htmlReporter.addMetaInfoExtender('foo', (suite, extraItems) => {
    return suite.suitePath.join(' ') + extraItems.platform;
});

In this case a line suite full name: some-platform will be added to the meta info of each test.

externalStorage

You can redefine native api for images saving and use your own storage (only for hermione).

Example:

const MyStorage = require('my-storage');
const myStorage = new MyStorage();

module.exports = (hermione, opts) => {
    hermione.on(hermione.events.INIT, async () => {
        hermione.htmlReporter.imagesSaver = {
            /**
            * Save image to your storage. Function can be asynchronous or synchronous. It have to return path of saved image or destPath will be used by default.
            * @property {String} localFilePath – image path on your filesystem
            * @param {Object} options
            * @param {String} options.destPath – path to image in html-report
            * @param {String} options.reportDir - path to your html-report dir
            */
            saveImg: async (localFilePath, options) => {
                const {destPath, reportDir} = options;
                const res = await myStorage.save(localFilePath, destPath, reportDir)
                // ...

                return res;
            }
        }
    });
};