Cypress-cucumber-preprocessor: Support Cucumber Html Reporter

[novarichuffman]

I think it would be awesome to add support for cucumber html reporter. As it currently works, it's not able to take the report generated by mochaweseome and even then, tests ran in cucumber are are output as if (backgroundSection) { backgroundSection.steps.forEach(step => stepTest.call(this, step)); } scenario.steps.forEach(step => stepTest.call(this, step));

Maybe I'm missing something but the error I recieved when trying to generate a cucumber-html-report was

TypeError: suite.features.forEach is not a function

[smithabethi]

when I expand scenario outline in html report it displays like below instead of actual steps
if (backgroundSection) {
backgroundSection.steps.forEach(step => {
stepTest.call(this, step);
});
}
scenario.steps.forEach(step => {
const newStep = Object.assign({}, step);
newStep.text = replaceParameterTags(rowData, newStep.text);
stepTest.call(this, newStep);
});
Am I missing something here?

[moinuddin14]

I too see the same issue. I think we don't have the support of Cucumber completely yet with Cypress + mochawesome Reports.

[novarichuffman]

I think it would be a great addition

[gabrielfign]

up

[chenhaizhou]

expecting

[jcundill]

https://github.com/jcundill/cypress-cucumber-preprocessor/tree/rebaseupstream

https://github.com/jcundill/cypress-cucumber-preprocessor/tree/rebaseupstream#cucumberjson-file-generation

You can try this, it's been working well for our needs internally for a while now - if it's useful I'll raise a PR

[avais88786]

@jcundill, thanks for the wonderful effort.
I tried using it but I am always getting an empty json file generated.
The naming convention is not exact, its always coming as "cucumber-C" (suffix is ignored)
Config:

..
"cypress-cucumber-preprocessor": {
    "cucumberJson": {
      "generate": true,
      "outputFolder": "cucumber-json",
      "filePrefix": "cucumber-",
      "fileSuffix": "a.json"
    }
 }

[jcundill]

Thanks for the feedback - you are right seems that the json file suffix stuff is not working correctly - however we are getting properly generated cucumber.json files from this - do you maybe want to raise an bug against my fork and post some minimal config to reproduce the empty file issue so I can track your problem down.

[avais88786]

@jcundill thanks for your reply. I tried a lot of scenarios: deleting node modules and reinstalling, change feature file name, move feature file location, etc. Everything seem to generate the empty file.
I have raised a bug against your fork, please look into this, looking forward to using it, in fact we are going to be using commercially with a large team so cheers for all help.
Bug link: https://github.com/jcundill/cypress-cucumber-preprocessor/issues/8

[ldsenow]

Strongly expecting this

[Satya-Gorla]

@jcundill, thanks for the cucumber JSON generation with cypress. it's working perfectly. And also I am able to generate the HTML report with "multi cucumber reporter"

Here I wanted to check with you how I can attach some text/screenshot to the report.

For Example:
https://github.com/cucumber/cucumber-js/blob/HEAD/docs/support_files/attachments.md

[jcundill]

@sagorla Text describing the failure should already be in the report for failing and missing steps
If this is not the case for you, please raise an issue against my fork and I'll fix it up.

[jcundill]

Screenshots can be generated a couple of ways
1) using cy.screenshot - I haven't added support for this to my fork, should be doable fairly easily by getting the onAfterScreenshot to feed the image data to the cucumber JSON data collector object.

2) automated screen shots (and videos) of failed tests directly from cypress.

This second option is what we wanted to try and include in our reports, and we especially wanted to embed the videos. Unfortunately the video generation is kicked off after the test has finished, and after the mocha reporter hook has also finished.

So we ended up writing a simple script that can be added to our jenkins build pipeline that augments the cucumber.json files with these images and videos after all the features have been run.

https://github.com/jcundill/cypress-cucumber-preprocessor/blob/master/fixJson.js

This may be helpful for you.

I'll try and take a look at supporting cy.screenshot() it would be a good addition

[jcundill]

@avais88786 Everything should be working fine on Windows boxes now, I fixed and closed https://github.com/jcundill/cypress-cucumber-preprocessor/issues/8

Please let me know if you are still having issues here

[Satya-Gorla]

Thanks, @jcundill for your quick replay.

you are right "Text describing the failure" and "Failing steps missing" are coming through the report.

it would very helpful if you support cy.screenshot & cy.log().

[avais88786]

Thanks @jcundill for the quick fix and apologies for late reply. I can confirm this now works as expected on windows and my scenarios. Can we have your branch merged on master please?

[lgandecki]

This is done and released thanks to @jcundill !

[tvutx]

Is it possible to have the report executed right after the test so we don't have to manually run the script to produce the HTML report?

[gretherMG]

Anyone know how to generate cucumber-json reports with screenshot and also cucumber html reports with screenshot please, I would be very grateful?
of the suggestions that I have read, none have generated the cucumber-json report, nor the html with screenshots.

[gretherMG]

any solution please, someone managed to add screenshot to cucumber json, any ideas?

[FDIM]

I've managed to find a working solution. Here is what I have in support/index.ts:

// magic goes here to add html markup inside cucumber.json so that screenshots would be displayed
afterEach(() => {
    if ((window as any).cucumberJson && (window as any).cucumberJson.generate) {
        const testState = (window as any).testState as any;
        const stepResult = testState.runTests[testState.currentScenario.name][testState.currentStep];
        if (stepResult && stepResult.status === 'failed') {
            const screenshotFileName = encodeURIComponent(`${testState.feature.name} -- ${testState.currentScenario.name} (failed).png`);

            console.info('after each', testState.currentScenario.steps[testState.currentStep]);
            stepResult.attachment = {
                data: `<img class="screenshot" style="display:block;width:100%" src="assets/${Cypress.spec.name}/${screenshotFileName}" />`,
                media: { type: 'text/html' },
                index: testState.currentStep,
                testCase: testState.formatTestCase(testState.currentScenario),
            };
        }
    }
});

Be sure that screenshots are created by cypress in the same directory as this report is saved to. It is also important to set storeScreenshots option to false :)

I use webpack with ts-loader.

[dane-harnett]

I created this if it is of any help: https://github.com/dane-harnett/cypress-cucumber-attach-screenshots-to-failed-steps