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]

it looks like imagePath in your case is an absolute path, then it adds another absolute path, so you can add a check and if the variable is already absolute, use it as it is.

what do you think? it might solve the issue

If you add this part, I think you can revert the other parts, because imagePath won't need to be inside screenshotsDir, and the current NodeJS exception is pretty good.

Suggested change

	const imgPath = path.join(screenshotsDir, imagePath);
	const imgPath = path.isAbsolute(imagePath) ? imagePath : path.join(screenshotsDir, imagePath);

[kdp88]

awesome! yeah makes sense

[kdp88]

thanks for the code review @LironEr i pushed your comment ! Thanks!

[kdp88]

@LironEr i notice now my latest commit i removed the main part of the function convertImageToBase64() (whoops) i am adding it back but im testing it now and it is still failing for me with

Error: ENOENT: no such file or directory, open '\screenshot-compare.e2e.cy.ts\screenshot-compare.e2e.cy.ts -- users page - assert img (failed).png'
    at Object.openSync (node:fs:596:3)
    at Object.readFileSync (node:fs:464: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>)

======imgPath         C:\dev\frontend-e2e-cypress\cypress\snapshots\screenshot-compare\screenshot-compare.e2e.cy.ts\__diff_output__\user list.diff.png
=====path.isAbsolute(imagePath)true


======imgPath     \screenshot-compare.e2e.cy.ts\screenshot-compare.e2e.cy.ts -- users page - assert img (failed).png
=====path.isAbsolute(imagePath)true

[kdp88]

it looks like context.value[] has this

\screenshot-compare.e2e.cy.ts\\\\screenshot-compare.e2e.cy.ts -- users page - assert img (failed).png

which is a valid path.isAbsolute() according to https://www.w3schools.com/nodejs/met_path_isabsolute.asp..... context seems to not pass in the cypress screenshots dir in the path. would the code below be a bad idea?

function convertImageToBase64(screenshotsDir, imagePath) {
  if (fse.pathExistsSync(imagePath)) {
    return convertImg(imagePath);
  } else {
    const imgPath = path.join(screenshotsDir, imagePath);
    return convertImg(imgPath);
  }

  function convertImg(pathToFile)
  {
    return 'data:image/png;base64, ' + fse.readFileSync(pathToFile, { encoding: 'base64' });
  }
}

[kdp88]

@LironEr bump baybay bump

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