HTML report stopped generating after installation of cypress-image-diff

[lanakudrya]

Environment

- OS: MacOS Monterey 12.3
- Node: 21.2
- cypress-mochawesome-reporter: 3.7.0
- cypress: 13.6.1
- cypress-image-diff-js": "^1.32.0"

What happened?

HTML report sopped generation when cypress-image-diff-js": "^1.32.0" installed https://github.com/uktrade/cypress-image-diff Only json files are generating. Overriding of task after:run does not help

Config file

const { defineConfig } = require("cypress");
const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin');

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    //reportPageTitle: 'custom-title',
    embeddedScreenshots: true,
    inlineAssets: true,
    saveAllAttempts: false,
    saveHtml: true,

  },
  e2e: {
    setupNodeEvents(on, config) {

      require('cypress-mochawesome-reporter/plugin')(on);

      on('after:run', async () => {
        console.log('override after:run');
        await afterRunHook();
      });
      return getCompareSnapshotsPlugin(on, config);

    },
  },
});

Relevant log output

npx cypress run

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        13.6.1                                                                         │
  │ Browser:        Electron 114 (headless)                                                        │
  │ Node Version:   v21.2.0 (/usr/local/bin/node)                                                  │
  │ Specs:          1 found (visual.cy.js)                                                         │
  │ Searched:       cypress/e2e/**/*.cy.{js,jsx,ts,tsx}                                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

Remove output folder ...../cypress/reports/html

────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  visual.cy.js                                                                    (1 of 1)

  template spec
    1) visite site-1
    ✓ visite site-2 (6588ms)

  1 passing (41s)
  1 failing

  1) template spec
       visite site-1:
     Error: Image difference greater than threshold: 0
      at Context.eval 

[mochawesome] Report JSON saved to ..../cypress/reports/html/.jsons/mochawesome.json

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        2                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  2                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     40 seconds                                                                       │
  │ Spec Ran:     visual.cy.js                                                                     │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

====================================================================================================

  (Run Finished)

       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  visual.cy.js                             00:40        2        1        1        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                     00:40        2        1        1        -        -

Anything else?

No response

[LironEr]

The problem is that the plugin overrides the after:run hook, which the reporter needs. You need to find a way to call the plugin and the reporter after:run hook.

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  e2e: {
    setupNodeEvents(on, config) {
      on('before:run', async (details) => {
        console.log('override before:run');
        await beforeRunHook(details);
      });

      on('after:run', async () => {
        console.log('override after:run');
        await afterRunHook();

       // ***************** Find a way to add the plugin after:run behavior here
      });
    },
  },
});

[mistic100]

Or use https://github.com/bahmutov/cypress-on-fix

[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.