feat: support absolute path images when converting image to base64

[kdp88]

hey all,

so currently im running into an issue when running a screenshot compare tool https://github.com/simonsmith/cypress-image-snapshot

from debugging the error :

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 'C:\dev\frontend-e2e-cypress\cypress\screenshots\C:\dev\frontend-e2e-cypress\cypress\snapshots\cypress\e2e\compare-login\login-screen.e2e.cy.ts\__diff_output__\login.d
iff.png'
    at Object.openSync (node:fs:603:3)
    at Object.readFileSync (node:fs:471:35)
    at convertImageToBase64 (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:164:52)
    at C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:147:13
    at Array.map (<anonymous>)
    at createScreenshotsContextList (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:137:22)
    at attachMediaToTestContext (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:86:9)
    at C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:43:24
    at Array.forEach (<anonymous>)
    at C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:36:19
    at Array.forEach (<anonymous>)
    at attachMediaToSuiteTestsContext (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:34:12)
    at C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:17:7
    at Array.forEach (<anonymous>)
    at enhanceReport (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:8:18)
    at mergeAndCreate (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\generateReport.js:19:3)
    at async Promise.all (index 0)
    at async generateReport (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\generateReport.js:64:22)
    at async afterRunHook (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\lib\index.js:35:3)
    at async Object.handler (C:\dev\frontend-e2e-cypress\node_modules\cypress-mochawesome-reporter\plugin.js:9:5)

i was getting i came to this

my suites [ ] has a context like this (cleaned up a bit for readability)

the screenshot compare tool adds its own directory outside of screenshots that i dont see being configurable

"context": [{
        "title": "cypress-mochawesome-reporter-videos-failed",
        "value": "cypress\\\\e2e\\\\compare-login\\\\login-screen.e2e.cy.ts"
    },
    {
        "title": "cypress-mochawesome-reporter-screenshots",
        "value": [
            "\\\\login-screen.e2e.cy.ts\\\\actions\\\\login\\\\clicking-login.png\",
            "C:\\\\dev\\\\frontend-e2e-cypress\\\\cypress\\\\snapshots\\\\cypress\\\\e2e\\\\compare-login\\\\login - screen.e2e.cy.ts\\\\ __diff_output__\\\\ login.diff.png",
            "\\\\login-screen.e2e.cy.ts\\\\sanity.e2e.cy -- login page - login with email@email.com assert redirect url.com (failed).png"
        ]
    }
]

so when i console out convertImageToBase64()

i get

imagePath = C:\dev\frontend-e2e-cypress\cypress\snapshots\cypress\e2e\compare-login\login-screen.e2e.cy.ts\__diff_output__\login.diff.png

screenshotsDir = C:\dev\frontend-e2e-cypress\cypress\screenshots

imgPath = C:\dev\frontend-e2e-cypress\cypress\screenshots\C:\dev\frontend-e2e-cypress\cypress\snapshots\cypress\e2e\compare-login\login-screen.e2e.cy.ts\__diff_output__\logi
n.diff.png

// above imgPath blows up during:
const contents = 'data:image/png;base64, ' + fse.readFileSync(imgPath, { encoding: 'base64' });

so my thought was to try to see if an image exists in imgPath then do the conversion or just catch the error make it readable serve the error

This isnt really solving the issue but im not sure there needs to be a solution to screenshots being added outside the cypress config var screenshotsFolder

[kdp88]

@LironEr just bumping to see if you saw this so we can review together

[LironEr]

Thanks @kdp88 I will release it in the next few days, just want to wait a bit for another feature to be merged

[kdp88]

@LironEr Thanks for the help dude!