Integration with cypress-multi-reporters

[hugo-gc]

Is it possible to use this plugin along with any other reporter using cypress-multi-reporters? If so, could you provide an example for the set up? In my case, I need to generate a mochawesome html report.

[csvtuda]

Hey @hugo-gc,

yes, this is possible. You will need to install the following packages

• cypress-multi-reporters
• cypress-mochawesome-reporter
• mocha-junit-reporter (for demonstration purposes)
• cypress-on-fix:

npm i --save-dev cypress-multi-reporters cypress-mochawesome-reporter mocha-junit-reporter cypress-on-fix

Important

Why cypress-on-fix? Because if you're using multiple plugins/registering multiple event handlers to Cypress's on() function, the last one to register always overwrites the previously registered ones (see cypress-io/cypress#22428). In this case, both the cypress-xray-plugin and the cypress-mochawesome-reporter register themselves for 'after:run' and so on. This neat little package solves the issue and allows attaching multiple hooks to the same events.

---

Here is what a somewhat minimal configuration could look like:

cypress.config.ts:

import { defineConfig } from "cypress";
import { addXrayResultUpload, configureXrayPlugin } from "cypress-xray-plugin";

export default defineConfig({
  reporter: "cypress-multi-reporters",
    reporterOptions: {
      reporterEnabled: "cypress-mochawesome-reporter, mocha-junit-reporter",
      cypressMochawesomeReporterReporterOptions: {
        charts: true,
        reportDir: "cypress/reports/mochawesome",
      },
      mochaJunitReporterReporterOptions: {
        mochaFile: "cypress/reports/junit/results-[hash].xml",
      },
    },
    e2e: {
    async setupNodeEvents(on, config) {
      const fixedOn = require("cypress-on-fix")(on);
      // https://www.npmjs.com/package/cypress-mochawesome-reporter
      require("cypress-mochawesome-reporter/plugin")(fixedOn);
      // https://qytera-gmbh.github.io/projects/cypress-xray-plugin/section/setup/installation
      await configureXrayPlugin(config, {
        jira: {
          projectKey: "CYP",
          url: "https://myorg.atlassian.net",
          testExecutionIssueSummary: `Execution ${new Date().toLocaleString()}`,
        },
        xray: {
          uploadResults: true,
        },
      });
      await addXrayResultUpload(fixedOn);
    },
  },
});

cypress/support/e2e.js

// https://www.npmjs.com/package/cypress-mochawesome-reporter
import "cypress-mochawesome-reporter/register";
import "./commands";

cypress/e2e/spec.cy.ts

describe("template spec", () => {
  // https://qytera-gmbh.github.io/projects/cypress-xray-plugin/section/guides/targetingExistingIssues/
  it("CYP-529 passes", () => {
    cy.visit("https://example.org");
  });
});

When I run this project using my Jira/Xray authentication data:

CYPRESS_JIRA_USERNAME=abc@def.com \
CYPRESS_JIRA_API_TOKEN=secret123 \
CYPRESS_XRAY_CLIENT_ID=id \
CYPRESS_XRAY_CLIENT_SECRET=secret456 \
npx cypress run

I get:

• a beautiful report in cypress/e2e/reports/mochawesome/:

  

• a JUnit XML file in cypress/e2e/reports/junit:

  

• an execution issue in Jira:

  

---

I hope this is what you were looking for.

[hugo-gc]

Hi @csvtuda
That's exactly what I needed, it works just fine.

Thanks!