cypress-plugin-visual-regression-diff: Images not being included in mochawesome report

Describe the bug

Diff images are not being included into mochawesome reports. The directory to place the images is being created, though the path doesn’t look right.

To Reproduce Steps to reproduce the behavior:

1. Create a Cypress project and add mochawesome as a dependency.

    "cypress": "^10.6.0",
    "cypress-mochawesome-reporter": "^3.2.2",

1. Use the following Cypress config:

const { defineConfig } = require('cypress');
const visualRegression = require('@frsource/cypress-plugin-visual-regression-diff/dist/plugins');

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  e2e: {
    baseUrl: 'https://your.website.test/',
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
      visualRegression.initPlugin(on, config);
    },
  },
});

1. Create a test that includes cy.matchImage().
2. After test end, go to cypress/reports/html and open the index.html file containing test results.

Expected behavior I’m expecting to see on the report is the original screenshot in case there’s no diff. If there is any diff, I expect to see the original screenshot, the diff and the actual. For actual behavior, see attached screenshot.

Screenshots

The url of the file is pointing to file:///{root_path}/cypress/reports/html/screenshots{root_path}/cypress/integration/__image_snapshots__/Error%20page%20should%20validate%20there%20are%20no%20visual%20changes%20#0.actual.png

Note: {root_path} is the full path to the project folder.

Please complete the following information:

• OS and version: Ubuntu 20.04
• Browser and version: Electron (the one included with Cypress 10.6.0)
• Cypress version: 10.6.0

Additional context

I’m using cypress-mochawesome-reports plugin. I can see the diff on the Cypress UI, but when I run the tests on headless mode (the default on the CI) the images are not being added to the report. It creates a set of empty folders (where the image should be).

I’m using cypress-mochawesome-reports default config, and visual regression plugin defaults. The issue becomes more evident when I turn on embeddedScreenshots on for the reporter:

reporter: 'cypress-mochawesome-reporter',
reporterOptions: {
   embeddedScreenshots: true,
},

I’m getting the following error:

Start generate report process
Read and merge jsons from "{root_path}/cypress/reports/html/.jsons"
Enhance report
An error was thrown in your plugins file while executing the handler for the after:run event.

The error we received was:

Error: ENOENT: no such file or directory, open '{root_path}/cypress/screenshots{root_path}/cypress/integration/__image_snapshots__/Error page should validate there are no visual changes #0.actual.png'
    at Object.openSync (node:fs:585:3)
    at Object.readFileSync (node:fs:453:35)
    at convertImageToBase64 ({root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:111:52)
    at {root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:104:11
    at Array.map (<anonymous>)
    at createScreenshotsContextList ({root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:100:22)
    at attachScreenshotsToTestContext ({root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:76:9)
    at {root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:34:24
    at Array.forEach (<anonymous>)
    at {root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:32:19
    at Array.forEach (<anonymous>)
    at attachScreenshotsToSuiteTestsContext ({root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:31:12)
    at {root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:16:7
    at Array.forEach (<anonymous>)
    at enhanceReport ({root_path}/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:6:18)
    at mergeAndCreate ({root_path}/node_modules/cypress-mochawesome-reporter/lib/generateReport.js:19:3)
    at async Promise.all (index 0)
    at async generateReport ({root_path}/node_modules/cypress-mochawesome-reporter/lib/generateReport.js:62:22)
    at async afterRunHook ({root_path}/node_modules/cypress-mochawesome-reporter/lib/index.js:35:3)
    at async Object.handler ({root_path}/node_modules/cypress-mochawesome-reporter/plugin.js:9:5)

I believe that the issue is related to the path of the image being sent to the test context.

Thank you!