Random code is shown in cypress report and screenshots are not embedded

[KiranmaiLL]

Environment

- OS: MAC
- Node: latest
- cypress-mochawesome-reporter: latest (3.2.0)
- cypress: 10 , 11, 12 (tried with all)

What happened?

Screenshots stopped getting attached in the reports when I changed the cypress-cucumber-processor to @badeball/cypress-cucumber-preprocessor and random code is shown under every test case under report

Config file

const { defineConfig } = require('cypress')
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");

module.exports = defineConfig({
  chromeWebSecurity: false,
  video: false,
  defaultCommandTimeout: 12000,
  execTimeout: 60000,
  pageLoadTimeout: 60000,
  requestTimeout: 15000,
  responseTimeout: 15000,
  projectId: 'ov3y5h',
  retries: 1,
  screenshotOnRunFailure: true,
  reporter: 'cypress-mochawesome-reporter',

  reporterOptions: {

      charts: true,
      reportPageTitle: 'My Test Suite',
      embeddedScreenshots: true,
      inlineAssets: true,

  },
  e2e: {

    setupNodeEvents(on, config) {

      preprocessor.addCucumberPreprocessorPlugin(on, config);
      require('cypress-mochawesome-reporter/plugin')(on);

      on(
        "file:preprocessor",
        createBundler({
          plugins: [createEsbuildPlugin.default(config)],
        })    
      );

      return config;
    },
    baseUrl: 'https://application.com',
    excludeSpecPattern: [
      '**/cucumber-tests/**/*[!*.feature]',
      '**/common/**',
      '**/assets/**',
      '**/utils/**',
      '*.md',
    ],
    specPattern: 'cypress/e2e/**/*.feature',
    supportFile: false,
  }

})

Relevant log output

No response

Anything else?

[LironEr]

I'm not familiar with cypress-cucumber-preprocessor, but if you provide a repo with the issue I can try to have a look

[KiranmaiLL]

Hey! Thanks for getting back. Here's the repo https://github.com/KiranmaiLL/DemoProject

[gmarinov]

having the same issue, using the webpack-flavour version of the same preprocessor. I think it is something to do with source maps, but the few threads I could find all seem to be waiting on something else.

to be clear, where the report lists code, I expect to see the Cucumber source code, e.g.

Given I am on the page
Then I should see the title
And I should see a link

actual: as on the screenshot above.

looking at the transformed JS files, i can see inline source maps including the cucumber phrases, but am not sure if it is the expected format sourcemap. if I use something like http://sokra.github.io/source-map-visualization/ , at the top I can see the Given/When/Then steps of the original (Cucumber) file, together with the inlined step definitions, like so:

webpack://...project-path.../cypress/support/step_definitions/MyPage.js

import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
Given("I am on the page", function() {
  cy.setCookie("test", "test")
    .visit("/")
});
Then("I should see the title", function() {
  cy.get('#pagetitle').contains('Title')
});
...

... i.e. roughly what I expect. So I'd say the source map appears to work?

[samwatts98]

Hello, I'm getting the exact same issue @KiranmaiLL described, on Windows. The code displayed is exactly the same as mine:

I'm using:

• Cypress 11.2.0
• @badeball/cypress-cucumber-preprocessor 16.0.0
• cypress-mochawesome-reporter 3.3.0

The generated reports just shows the code for what I believe is the @badeball/cypress-cucumber-preprocessor, it isn't relevant to the passing/failing test cases. Ideally it would be good to see a breakdown of the Cucumber steps, and be able to attach screenshots to them.

[radoslavirha]

Hi, @samwatts98 maybe it can help you... I forgot to add import 'cypress-mochawesome-reporter/register'; to cypress/support/e2e.ts and suddenly it started working.

[samwatts98]

@Radik24 Hello mate, Appreciate the time to respond :) However I'm currently doing that, and still getting the same result:

cypress/support/e2e.ts:

As well as setting up the hooks as mentioned in step 2 of the set up here: https://www.npmjs.com/package/cypress-mochawesome-reporter

Yet still the reports that are produced include the Cucumber internals rather than details of the Cucumber scenario:

[samwatts98]

@Radik24 Are you able to get these reports with the @badeball/cypress-cucumber-preprocessor then?

[XaviF-C]

I'm currently having the same issue, any updates yet? It seems like an error from the @badeball/cypress-cucumber-preprocessor

[Sravs1308]

I'm currently having the same issue, any updates yet?

[Dale-777]

Just adding another comment to this, experiencing exactly the same issue

[LironEr]

Hey everyone, sorry for the very late response.

Thank you @KiranmaiLL for providing the demo repo, I tried to find a solution for this issue, but the problem is with the file:preprocessor hook, as it changes the code that cypress use then pass the code to the reporter.

If in some way we can link between the test that cypress is running and the code before the transformation we can probably override the code that you see in the final report.

Other then that, I cant think of a solution to this issue, feel free to explore more and if someone comes up with something I will be more then happy to help make it work.

[NareshNama]

Any update on this issue ?

[ajling]

Hi Everyone, I've just updated two of my Cypress test repositories with 'cypress-mocha-awesome' version 3.5.1 and I'm no longer seeing any of the extra js code appearing in the reports. My versions are: Cypress v12.14.0 and v12.17.1, Mochawesome v7.1.3

I also updated my reporter options to the below (not sure if it makes much of a difference though): reporterOptions: { charts: true, reportTitle: "UI Test Report", reportPageTitle: "UI Test Report", reportDir: "cypress/reports", reportFilename: "myReport", embeddedScreenshots: true, inlineAssets: true, saveAllAttempts: false, charts: true, code: false, showPassed: true, showFailed: true, showPending: false, showSkipped: false, },

Note: it doesn't show any of the step information, but you can always use addContext to write out anything to the report file.

Hopefully it works for you guys too

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[ClareChallis]

I am having this issue, is there any update?

[mistic100]

@LironEr can you please reopen this issue ? I have made some progress and I think a solution is possible.

Currently I am able to modify @badeball/cypress-cucumber-preprocessor/dist/browser-runtime.js and pass the Cucumber source to Mochawesome via addTestContext.

cy.addTestContext({
    title: 'Cucumber source',
    value: pickleSteps
        .map(step => step.text)
        .join('\n'),
});

here https://github.com/badeball/cypress-cucumber-preprocessor/blob/7cdb1feb03239f11ec14907b819be78c0f32d19d/lib/browser-runtime.ts#L447

This way the cucumber source is available inside the report.

There some work left to do :

• apply this modification without having to modify the node_modules (perhaps ask cypress-cucumber-preprocessor to add some kind of hook)
• conditionally hide the actual source code (I have a mix of .feature and .cy.ts files so I cannot just set code: false
• handle more complex Cucumber code like Data Table and Outlines

---

edit: without modifying cypress-cucumber-preprocessor

Before(() => {
    // @ts-ignore
    const pickle = window.testState?.pickle;
    if (pickle) {
        cy.addTestContext({
            title: '__cucumber_steps__',
            value: pickle.steps
                .map(step => step.text)
                .join('\n'),
        });
    }
});

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.