Add a guide/example on setup with multiple-cucumber-html-reporter

Hey guys,

I just started using cypress-cucumber-preprocessor at work and it’s a great tool (thanks for that!), but the thing that I am missing is the possibility to also generate a nice html report at the end of a test run.

The README file says that it should work fine with multiple-cucumber-html-reporter, but I did not manage to make it work. Any chance you might add a guide or an example on this?

Thanks in advance!

[jcundill]

Firstly configure package.json to generate cucumber.json files when cypress is run - see https://github.com/TheBrainFamily/cypress-cucumber-preprocessor#output

install the multi-html-reporter into your project npm install multiple-cucumber-html-reporter --save-dev

write a helper script to invoke the reporter as described in https://github.com/wswebcreation/multiple-cucumber-html-reporter#cucumber-js-3x - so copy the code block shown above this as a separate js file in your project - report.js, for example

make sure the jsonDir in this helper points to the directory you told the plugin to write the cucumber json files to in package.json

run the features npx cypress run --spec "cypress/integration/*.feature"

check there are a bunch of json files in the folder you specified

run the reporter node report.js

open index.html in the output folder

[thierryiseli]

``> In addition to what @JoaoPedroVarella is looking for, I am looking for including Metadata in my html report but so far, I have not been able to do it in MacOS. Anyone who has tried including all metadata for Mac?

I started to handle it in this way, I save the cypress run as json, my cypress/plugins/index.js:

const cucumber = require('cypress-cucumber-preprocessor').default
const fs = require('fs');

module.exports = (on, config) => {
  on('file:preprocessor', cucumber()),
  on('after:run', (results) => {
    if (results) {
      fs.mkdirSync("cypress/.run", { recursive: true });
      fs.writeFile("cypress/.run/results.json", JSON.stringify(results));
    }
  })
}

Then I consume this json for generating the html report, for this case I added this to my report generator js:

const report = require('multiple-cucumber-html-reporter');
const fs = require('fs');

const mapOs = (os) => {
    if(os.startsWith('win')) {
        return 'windows';
    } else if (os.startsWith('osx')) {
        return 'osx';
    } else if (os.startsWith('linux')) {
        return 'linux';
    } else if (os.startsWith('ubuntu')) {
        return 'ubuntu';
    } else if (os.startsWith('android')) {
        return 'android';
    } else if (os.startsWith('ios')) {
        return 'ios';
    }
};

fs.readFile('cypress/.run/results.json', function read(err, data) {
    if (err) {
        throw err;
    }
    var runInfos = JSON.parse(data);
    report.generate({
        jsonDir: './cypress/result/',
        reportPath: './cypress/report/',
        metadata:{
            browser: {
                name: runInfos.browserName,
                version: runInfos.browserVersion
            },
            device: 'Cypress',
            platform: {
                name: mapOs(runInfos.osName)
            }
        },
        customData: {
            title: 'Run info',
            data: [
                {label: 'Project', value: 'project'},
                {label: 'Execution Start Time', value: new Date(runInfos.startedTestsAt).toLocaleString()},
                {label: 'Execution End Time', value: new Date(runInfos.endedTestsAt).toLocaleString()}
            ]
        }
    });
});

It’s only a way that I tried, it’s more like a poc. But maybe it’s helpful.
Report looks like this: The things that I didin’t get from cypress run is os version and more device details.