Screenshots not found because of win/posix path issues

[ctigelaar]

Environment

- OS: Windows
- Node: 16.10.0
- cypress-mochawesome-reporter: 3.1.0
- cypress: 8.7.0

What happened?

Trying to implement reports with embedded screenshots, but I'm receiving an error no such file or directory on trying to read the screenshot file. I did some research myself and the paths set by the register.js file are not correct on Windows. The Cypress config uses unix-like paths like ../../folder/where/screenshots/are (because we run CI on Linux agents), but running it locally the incoming filenames have a Windows path with Windows path separators like ..\..\folder\where\screenshots\are.

Inside method saveScreenshotReference in register.js you're roughly String.replace-ing these both values, to get a relative path to the image file, without the value of screenShotFolder. This replace is simply not working on Windows, because the two values have no overlap because of the non-matching path separators.

It's fixable by using details.path.split('\\').join('/'); on the incoming filepath of the image, but then I would make the assumption given config paths are always unix-style, and I may be introducing other issues elsewhere. Hence the fact I didn't offer a PR, but opened an issue.

Config file

{
  ...,
  "videosFolder": "../../dist/cypress/apps/my-app-e2e/videos",
  "screenshotsFolder": "../../dist/cypress/apps/my-app-e2e/screenshots",
  "downloadsFolder": "../../dist/cypress/apps/my-app-e2e/downloads",
  ...
}

{
  "reportFilename": "[datetime]-[status]-report",
  "timestamp": "yyyy-mm-dd-HH:MM:ss",
  "reportDir": "../../dist/cypress/apps/my-app-e2e/reports",
  "charts": true,
  "embeddedScreenshots": true,
  "inlineAssets": true,
  "debug": true
}

Relevant log output

Start generate report process
Read and merge jsons from "..\..\dist\cypress\apps\my-app-e2e\reports\.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 '..\..\dist\cypress\apps\dist\cypress\apps\my-app-e2e\screenshots\test\test.spec.js\Suite -- Test (failed).png'
at Object.openSync (fs.js:498:3)
at Object.func [as openSync] (electron/js2c/asar_bundle.js:5:1846)
at Object.readFileSync (fs.js:394:35)
at Object.e.readFileSync (electron/js2c/asar_bundle.js:5:8872)
at convertImageToBase64 (\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:111:52)

Anything else?

No response

[ctigelaar]

It works btw when you use config with Windows paths, eg:

{
  ...,
  "videosFolder": "../../dist/cypress/apps/my-app-e2e/videos",
  "screenshotsFolder": "..\\..\\dist\\cypress\\apps\\my-app-e2e\\screenshots",
  "downloadsFolder": "../../dist/cypress/apps/my-app-e2e/downloads",
  ...
}

But the main issue remains, that the .replace() is not respecting OS path separators, while Cypress itself apparently does.

[LironEr]

I tried to replicate the bug with cypress v10 and everything works as expected.

Can you try to upgrade?

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