search

LironEr / cypress-mochawesome-reporter

Zero config Mochawesome reporter for Cypress with screenshots and videos
MIT License
159 stars 49 forks source link

Wrong path for snapshots #96

Closed mariostephan closed 2 years ago

mariostephan commented 2 years ago

Environment

- OS: Windows10
- Node: v16.14.2
- cypress-mochawesome-reporter: 3.2.0
- cypress-image-snapshot: 4.0.1
- cypress: 8.5.0

What happened?

The path for the embedded snapshots seems to be wrong:

C:\screenshotsFolder\C:\full\path\to\snapshots...>

This leads to the error:

Error: ENOENT: no such file or directory, open 'C:\Users\stephanm\Projects\ConfigEditor\E2E\screenshots\C:\Users\stephanm\Projects\ConfigEditor\E2E\snapshots\process-flow\story273618\tc289099.spec.js__diff_output__\289099 [SUTC] Template visualization - SaveResetCancel -- 289099 [SUTC] Template visualization - SaveResetCancel (failed).diff.png'

I guess the path.join(screenshotsDir, imagePath); in enhanceReport.js convertImageToBase64() is wrong/ unnessary

This wrong joinment of the path doesn't matter if the screenshotsDir and the starting of the imagePath are equal, like it is for normal screenshots. But for snapshots, where the paths are different, it fails.

Config file

cypress.json:

{
  "baseUrl": "http://localhost:4200",
  "chromeWebSecurity": false,
  "testFiles": "**/*.spec.js",
  "video": false,
  "screenshotsFolder": "screenshots",
  "downloadsFolder": "downloads",
  "viewportWidth": 1700,
  "viewportHeight": 950,
  "watchForFileChanges": false,
  "defaultCommandTimeout": 15000,
  "reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "configFile": "reporter.json"
  },
  "env": {
    "coverage": false
  },
  "retries": {
    "runMode": 0,
    "openMode": 0
  }
}

reporter.json:

{
  "reporterEnabled": "cypress-mochawesome-reporter, mocha-junit-reporter, cypress-image-snapshot/reporter",
  "cypressMochawesomeReporterReporterOptions": {
    "reportDir": "reports",
    "charts": true,
    "reportPageTitle": "E2E Tests",
    "embeddedScreenshots": true,
    "debug": true,
    "inlineAssets": true,
    "outputs": true
  },
  "mochaJunitReporterReporterOptions": {
    "mochaFile": "reports-ci/junit/results-[hash].xml",
    "attachments" : true,
    "outputs" : true,
    "consoleTo": true
  }
}

Relevant log output

(Screenshots)

  -  C:\Users\stephanm\Projects\ConfigEditor\E2E\snapshots\process-flow\story273618\t     (1280x720)
     c289099.spec.js\__diff_output__\289099 [SUTC] Template visualization - SaveReset
     Cancel -- 289099 [SUTC] Template visualization - SaveResetCancel (failed).diff.p
     ng

override after:run
Start generate report process
Read and merge jsons from "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 'C:\Users\stephanm\Projects\ConfigEditor\E2E\screenshots\C:\Users\stephanm\Projects\ConfigEditor\E2E\snapshots\process-flow\story273618\tc289099.spec.js\__diff_output__\289099 [SUTC] Template visualization - SaveResetCancel -- 289099 [SUTC] Template visualization - SaveResetCancel (failed).diff.png'
    at Object.openSync (node:fs:585:3)
    at Object.readFileSync (node:fs:453:35)
    at convertImageToBase64 (C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:111:52)
    at C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:104:11       
    at Array.map (<anonymous>)
    at createScreenshotsContextList (C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:100:22)
    at attachScreenshotsToTestContext (C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:76:9)
    at C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:34:24        
    at Array.forEach (<anonymous>)
    at C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:32:19        
    at Array.forEach (<anonymous>)
    at attachScreenshotsToSuiteTestsContext (C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:31:12)
    at C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:16:7
    at Array.forEach (<anonymous>)
    at enhanceReport (C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:6:18)
    at mergeAndCreate (C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\generateReport.js:19:3)
    at async Promise.all (index 0)
    at async generateReport (C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\generateReport.js:62:22)
    at async afterRunHook (C:\Users\stephanm\Projects\ConfigEditor\E2E\node_modules\cypress-mochawesome-reporter\lib\index.js:35:3)
    at async Object.handler (C:\Users\stephanm\Projects\ConfigEditor\E2E\cypress\plugins\index.js:127:5)

Anything else?

the same error happens also on the server CI

Error: ENOENT: no such file or directory, open '\\XXX.com\esroadmap\GUIDev\TestResults\FE\E2E\683650_merge\e2e_ci-processflow\XXX.com\esroadmap\GUIDev\TestResults\FE\E2E\683650_merge\snapshots\process-flow\story273618\tc289097.spec.js\TC289097.snap.png'
    at Object.openSync (fs.js:498:3)
    at Object.readFileSync (fs.js:394:35)
    at convertImageToBase64 (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:111:52)
    at D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:104:11
    at Array.map (<anonymous>)
    at createScreenshotsContextList (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:100:22)
    at attachScreenshotsToTestContext (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:76:9)
    at D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:34:24
    at Array.forEach (<anonymous>)
    at D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:32:19
    at Array.forEach (<anonymous>)
    at attachScreenshotsToSuiteTestsContext (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:31:12)
    at D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:16:7
    at Array.forEach (<anonymous>)
    at enhanceReport (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\enhanceReport.js:6:18)
    at mergeAndCreate (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\generateReport.js:19:3)
    at async Promise.all (index 0)
    at async generateReport (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\generateReport.js:62:22)
    at async afterRunHook (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\node_modules\cypress-mochawesome-reporter\lib\index.js:35:3)
    at async Object.handler (D:\Apps\Agents\esconfig-test-agent4\_work\334\s\E2E\cypress\plugins\index.js:127:5)

If I remove the path.join then Snapshots work fine and are embedded

function convertImageToBase64(screenshotsDir, imagePath) {
  // const imgPath = path.join(screenshotsDir, imagePath);
  const contents = 'data:image/png;base64, ' + fse.readFileSync(imagePath, { encoding: 'base64' });
  return contents;
}

But then Screenshots doesn't work due to the normalized screenshot path in register.js

const normalizedScreenshotPath = details.path.replace(screenshotsFolder, '');

It only works for me if I remove the replacement of the screenshotFolder in register.js and the path.join in enhanceReport.js

function saveScreenshotReference(details) {
  const normalizedScreenshotPath = details.path;// .replace(screenshotsFolder, '');

  const title = normalizedScreenshotPath.includes('(failed)') ? 'Failed screenshot' : 'Screenshot';

  if (!Cypress.Mochawesome) {
    Cypress.Mochawesome = createMochawesomeObject();
  }

  Cypress.Mochawesome.currentAttemptScreenshots.push({ title, value: normalizedScreenshotPath });
}
LironEr commented 2 years ago

Duplicate issue, when I tried with Cypress v10 it worked as expected. Please refer to: https://github.com/LironEr/cypress-mochawesome-reporter/issues/85#issuecomment-1179748126

mariostephan commented 2 years ago

I can not confirm that. Same issue with Cypress v10.6.0 for me.

FRSgit commented 2 years ago

Same issue here