Ninety Percent Muffin

    vue-cucumber-html-reporter

    0.2.2 • Public • Published

    Multiple Cucumber HTML Reporter

    MIT license

    This is a fork of multiple-cucumber-html-reporter (kudos wswebcreation) Most use cases presented before 1.16.0 of original reporter is supported

    Important

    The default time notation in Cucumber is in nanoseconds. When you use a version of Cucumber that uses milliseconds (like CucumberJS 2 and 3) and you want to show the duration you should use displayDuration AND durationInMS = true

    Change Log

    • 0.1.0: Rewritten solution in vuejs engine
    • 0.2.0: Support of external link, global overview chart

    Install

    Install this module locally with the following command:

    npm install vue-cucumber-html-reporter

    Save to dependencies or dev-dependencies:

    npm install vue-cucumber-html-reporter --save
    npm install vue-cucumber-html-reporter --save-dev
    const report = require('vue-cucumber-html-reporter');
     
    report.generate({
        jsonDir: './path-to-your-json-output/',
        reportPath: './path-where-the-report-needs-to-be/',
        metadata:{
            browser: {
                name: 'chrome',
                version: '60'
            },
            device: 'Local test machine',
            platform: {
                name: 'ubuntu',
                version: '16.04'
            }
        },
        customData: {
            title: 'Run info',
            data: [
                {label: 'Project', value: 'Custom project'},
                {label: 'Release', value: '1.2.3'},
                {label: 'Cycle', value: 'B11221.34321'},
                {label: 'Execution Start Time', value: 'Nov 19th 2017, 02:31 PM EST'},
                {label: 'Execution End Time', value: 'Nov 19th 2017, 02:56 PM EST'}
            ]
        }
    });

    Options

    jsonDir

    • Type: String
    • Mandatory: Yes

    The directory that will hold all the generated JSON files, relative from where the script is started.

    N.B.: If you use a npm script from the command line, like for example npm run generate-report the jsonDir will be relative from the path where the script is executed. Executing it from the root of your project will also search for the jsonDir from the root of you project.

    reportPath

    • Type: String
    • Mandatory: Yes

    The directory in which the report needs to be saved, relative from where the script is started.

    N.B.: If you use a npm script from the command line, like for example npm run generate-report the reportPath will be relative from the path where the script is executed. Executing it from the root of your project will also save the report in the reportPath in the root of you project.

    openReportInBrowser

    • Type: boolean
    • Mandatory: No

    If true the report will automatically be opened in the default browser of the operating system.

    saveCollectedJSON

    • Type: boolean
    • Mandatory: No

    This module will first merge all the JSON-files to 1 file and then enrich it with data that is used for the report. If saveCollectedJSON :true the merged JSON AND the enriched JSON will be saved in the reportPath. They will be saved as:

    • merged-output.json
    • enriched-output.json

    disableLog

    • Type: boolean
    • Mandatory: No
    • Default: false

    This will disable the log so will NOT see this.

    =====================================================================================
        Multiple Cucumber HTML report generated in:
     
        /Users/wswebcreation/multiple-cucumber-html-reporter/.tmp/index.html
    ========================================================================

    pageTitle

    • Type: string
    • Mandatory: No
    • Default: Multiple Cucumber HTML Reporter

    You can change the report title in the HTML head Tag

    reportName

    • Type: string
    • Mandatory: No

    You can change the report name to a name you want

    displayGlobalChart

    • Type: boolean
    • Mandatory: No

    Display bar stack bar chart for features - scenario results

    displayDuration

    • Type: boolean
    • Mandatory: No

    If set to true the duration of steps, scenarios and features is displayed on the Features overview and single feature page in an easily readable format. This expects the durations in the report to be in nanoseconds, which might result in incorrect durations when using a version of Cucumber(JS 2 and 3) that does not report in nanoseconds but in milliseconds. This can be changed to milliseconds by adding the parameter durationInMS: true, see below

    NOTE: Only the duration of a feature can be shown in the features overview. A total duration over all features CAN NOT be given because the module doesn't know if all features have been run in parallel

    durationInMS

    • Type: boolean
    • Default: false
    • Mandatory: No

    If set to true the duration of steps will be expected to be in milliseconds, which might result in incorrect durations when using a version of Cucumber(JS 1 or 4) that does report in nanaseconds. This parameter relies on displayDuration: true

    externalLinks

    • Type: Array<{template: Regexp, url: string, [type]: string}>
    • Default: false
    • Mandatory: No

    Display tags that match template as an external links

    externalLinks: [
        {
            template: /bug\((.+)\)/,
            url: 'https://vue-reporter.atlassian.net/browse/',
            type: 'bug'
        }
    ]

    Transforms @bug(TEST-1) into external link https://vue-reporter.atlassian.net/browse/TEST-1

    metadata

    • Type: JSON
    • Mandatory: No

    Print more data to your report, such as browser name + version, platform name + version and your environment. The values need to meet some predefined data, see Metadata for more info. Data can be passed like below.

    If you provide the metadata when instantiating multi-cucumber-html-reporter the metadata will be added to each feature. If you already have metadata in your JSON then the metadata in the JSON will take precedence

    metadata:{
        browser: {
            name: 'chrome',
            version: '60'
        },
        device: 'Local test machine',
        platform: {
            name: 'ubuntu',
            version: '16.04'
        }
    }

    See metadata for more info

    IMPORTANT: This does not work correctly if features have different sets of metadata. Try to avoid this situation.

    customData

    • Type: object
    • Mandatory: No

    You can add a custom data block to the report like this

    Snapshot - Features overview custom data

    customData: {
        title: 'Run info',
        data: [
            {label: 'Project', value: 'Custom project'},
            {label: 'Release', value: '1.2.3'},
            {label: 'Cycle', value: 'B11221.34321'},
            {label: 'Execution Start Time', value: 'Nov 19th 2017, 02:31 PM EST'},
            {label: 'Execution End Time', value: 'Nov 19th 2017, 02:56 PM EST'}
        ]
    }

    customData.title

    • Type: string
    • Mandatory: No
    • Default: Custom data title

    Select a title for the custom data block. If not provided it will be defaulted.

    customData.data

    • Type: array
    • Mandatory: yes

    The data you want to add. This needs to be in the format

    data: [
        {label: 'your label', value: 'the represented value'}
    ]

    Metadata

    The report can also show on which browser / device a feature has been executed. It is shown on the featurs overview in the table as well as on the feature overview in a container.

    Adding metadata to the Cucumber JSON

    To be able to see this you will need to add the following to the Cucumber JSON before you save it.

    // This represents the Cucumber JSON file that has be retrieved
    const cucumberJSON;
     
    const metadata = {
        "browser": {
            "name": "chrome",
            "version": "58"
        },
        "device": "string",
        "platform": {
            "name": "osx",
            "version": "10.12"
        }
    }
     
    // Add it with for example
    cucumberJSON[0].metadata = metadata;
     
    // Now save the file to the disk

    metadata.app.name

    • Type: string

    e.g.: The name of the app.

    metadata.app.version

    • Type: string

    e.g.: The version of the app.

    metadata.browser.name

    • Type: string
    • Possible values: internet explorer | edge | chrome | firefox | safari

    If no correct value is provided the ?-icon with the text not known is shown

    metadata.browser.version

    • Type: string

    e.g.: The version of the browser, this can be added manual or retrieved during the execution of the tests to get the exact version number.

    If no correct value is provided the ?-icon with the text not known is shown

    metadata.device

    • Type: string

    e.g.: A name that represents the type of device. For example, if you run it on a virtual machine, you can place it here Virtual Machine, or the name of the mobile, like for example iPhone 7 Plus.

    If no correct value is provided the ?-icon with the text not known is shown

    metadata.platform.name

    • Type: string
    • Possible values: windows | osx | linux | ubuntu | android | ios

    If no correct value is provided the ?-icon with the text not known is shown

    metadata.platform.version

    • Type: string

    e.g.: The version of the platform

    If no correct value is provided the ?-icon with the text not known is shown

    FAQ

    Only 1 report is shown in the features overview table

    It could be that the name of the Cucumber JSON file that has been saved is not unique (enough).

    My advice is to use for example:

    • the name of the feature
    • the name of the browser / device it is running on
    • a unix timestamp with for example this (new Date).getTime();

    This will result in something like this name_of_feature.chrome.1495298685509.json.

    The advantage of this is that when you look at the folder where the Cucumber JSON-files are saved you can see:

    • the features that have been executed
    • on which browser
    • a timestamp to see which feature has been executed the last (if featurename and browser are the same)

    Metdata shows not known or not the correct icons

    There could be 2 causes:

    1. The metadata has not (correctly) been added to the Cucumber JSON.
    2. The metadata.browser.name or metadata.platform.name can't be mapped to the right icon

    To fix this see the part about Metadata and check the possible values.

    How to attach Screenshots to HTML report

    You can attach screenshots at any time to a Cucumber JSON file. Just create a Cucumber scenario-hook that will handle this. You can add them during running or when a scenario failed.

    Check the framework you are using to attach screenshots to the JSON file.

    How to attach Plain Text to HTML report

    You can attach plain-text / data at any time to a Cucumber JSON file to help debug / review the results. You can add them during running or when a scenario failed.

    Check the framework you are using to attach plain text to the JSON file.

    How to attach pretty JSON to HTML report

    You can attach JSON at any time to a Cucumber JSON file. You can add them during running or when a scenario failed.

    Check the framework you are using to attach JSON data to the JSON file.

    Install

    npm i vue-cucumber-html-reporter

    DownloadsWeekly Downloads

    24

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    1.94 MB

    Total Files

    12

    Last publish

    Collaborators

    • alexgalichenko