Multiple plugins cannot be executed in the after:run hook

[ztarsoly]

Hello!

I use your Xray plugin which is a great addition along with cypress-mochawesome-reporter. Since I added your plugin to my project the Mochawesome Report is not executed after the run to merge the JSONs and to create the HTML report. Do you have idea what can be the problem? Thanks in advance!

Version: 5.1.0

Best regards,
Zoltan Tarsoly

[csvtuda]

Hey @ztarsoly,

thanks for creating the issue. I think the reason is most probably that you're registering multiple plugins under the on variable in the Cypress configuration without using cypress-on-fix.

Without it, the event listeners of the plugins override each other, meaning that only the last one to register will be executed.

You can check out the documentation of cypress-on-fix on how to set it up, it's quite simple. Just do something like this:

import fix from "cypress-on-fix";

// ...

async setupNodeEvents(on, config) {
  const fixedOn = fix(on);
  require('cypress-mochawesome-reporter/plugin')(fixedOn);
  await configureXrayPlugin(
    config,
    {
      jira: {
        projectKey: "PRJ",
        url: "https://example.org"
      }
    }
  );
  await addXrayResultUpload(fixedOn);
  return config;
}

[ztarsoly]

Hello Basti,

thanks for the info. With cypress-on-fix plugin both the reporter and your plugin work.

[tiago-coelho]

I'd like to share my cypress.config.js configuration, as it might be helpful for others. The key to making the plugin work was to use async setupNodeEvents(cypressOn, config) and const on = require('cypress-on-fix')(cypressOn) instead of async setupNodeEvents(on, config). As workaround, if you want keep using on("before:run") and on("after:run"), you can create a script to run the necessary code before and after Cypress runs. Here's an example of how you could set it up in your YAML file:

- step:
    name: Run E2E/API Automation Tests
    script:
      - scripts/report/clear_previous_reports.sh
      - npm install
      - npx cypress run
      - scripts/report/merge_mochawesome_reports.sh

And here is the cypress.config.js:

In this configuration, we use fixedOn to ensure that specific actions occur before and after each test run. This setup is especially useful in a CI environment, where precise control over test execution and reporting is crucial.

const { defineConfig } = require("cypress");
const { addXrayResultUpload, configureXrayPlugin } = require("cypress-xray-plugin");
const path = require("path");
const fs = require("fs-extra");
const { merge } = require("mochawesome-merge");

module.exports = defineConfig({
    e2e: {
        // Configure Mochawesome reporter
        reporter: "mochawesome",
        reporterOptions: {
            reportDir: "cypress/reports",
            overwrite: false,
            html: false,
            json: true,
        },
        specPattern: "cypress/tests/**/*.spec.{js,jsx,ts,tsx}",
        async setupNodeEvents(cypressOn, config) {
            const on = require('cypress-on-fix')(cypressOn)
            // Configure Xray plugin for CI environment
            if (process.env.CI) {
                await configureXrayPlugin(config, {
                    jira: {
                        projectKey: "ABC",
                        url: "https://www.google.com",
                    },
                    xray: {
                        uploadResults: true,
                    },
                });
                await addXrayResultUpload(on);
            }

            // Event to clear previous JSON reports before each run
            on("before:run", async () => {
                const jsonReportPath = path.join(config.projectRoot, "cypress", "reports");
                // Read and filter out JSON files
                const files = fs.readdirSync(jsonReportPath).filter((file) => file.endsWith(".json"));

                // Delete each JSON report file
                files.forEach((file) => {
                    fs.unlinkSync(path.join(jsonReportPath, file));
                });
                console.log("Cleared all previous JSON reports.");
            });

            on("after:run", async () => {
                const jsonReportPath = path.join(config.projectRoot, "cypress", "reports");
                //Get list of JSON report files
                const reportFiles = fs.readdirSync(jsonReportPath).filter((file) => file.endsWith(".json"));

                console.log("JSON Report Files:", reportFiles);

                // Merge reports if any are found
                if (reportFiles.length) {
                    const mergedReport = await merge({
                        files: reportFiles.map((file) => path.join(jsonReportPath, file)),
                    });
                    await fs.writeJson(path.join(jsonReportPath, "merged-report.json"), mergedReport);
                    console.log("Merged report successfully");
                } else {
                    console.log("No JSON files to merge");
                }
            });

        },
    },
});