Cypress生成报告遇ENOENT错误：路径重复致文件不存在求解决方法

问题说明 #

生成Cypress报告时出现路径拼接错误，将/Users/xlrs/test/project/cypress/screenshots与完整绝对路径/Users/xlrs/test/project/cypress/snapshots/profile.cy.js/launches websitehola.snap.png重复拼接，形成无效路径，触发ENOENT: 找不到指定文件或目录错误。

报错日志 #

Start generate report process
Read and merge jsons from "/Users/xlrs/test/project/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 '/Users/xlrs/test/project/cypress/screenshots/Users/xlrs/test/project/cypress/snapshots/profile.cy.js/launches websitehola.snap.png'
    at Object.openSync (node:fs:594:3)
    at Object.readFileSync (node:fs:462:35)
    at convertImageToBase64 (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:111:52)
    at /Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:104:11
    at Array.map (<anonymous>)
    at createScreenshotsContextList (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:100:22)
    at attachScreenshotsToTestContext (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:76:9)
    at /Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:34:24
    at Array.forEach (<anonymous>)
    at /Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:32:19
    at Array.forEach (<anonymous>)
    at attachScreenshotsToSuiteTestsContext (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:31:12)
    at /Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:16:7
    at Array.forEach (<anonymous>)
    at enhanceReport (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js:6:18)
    at mergeAndCreate (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/generateReport.js:19:3)
    at async Promise.all (index 0)
    at async generateReport (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/generateReport.js:62:22)
    at async afterRunHook (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/lib/index.js:35:3)
    at async Object.<anonymous> (/Users/xlrs/test/project/node_modules/cypress-mochawesome-reporter/plugin.js:9:5)
    at async Object.handlerThatCallsUserDefinedHandler [as handler] (/Users/xlrs/test/project/node_modules/@applitools/eyes-cypress/src/plugin/pluginExport.js:49:11)

解决方案 #

1. 修正报告器路径配置 #

在cypress.config.js中，确保cypress-mochawesome-reporter的screenshotsFolder使用相对路径，避免绝对路径导致重复拼接：

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    screenshotsFolder: 'cypress/snapshots', // 替换为你的快照存储相对路径
    reportDir: 'cypress/reports/html'
  },
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
    },
  },
});

2. 临时修复报告器路径拼接逻辑 #

如果是报告器本身的bug，可修改node_modules/cypress-mochawesome-reporter/lib/enhanceReport.js中的convertImageToBase64函数，判断图片路径是否为绝对路径，避免重复拼接：

// 找到convertImageToBase64函数，修改路径处理逻辑
const imageAbsolutePath = path.isAbsolute(imagePath) ? imagePath : path.join(screenshotsFolder, imagePath);
const imageBuffer = fs.readFileSync(imageAbsolutePath);

3. 排查Applitools插件冲突 #

报错日志显示存在@applitools/eyes-cypress插件，该插件可能修改了截图存储路径，与报告器产生冲突：

• 确认Applitools配置是否将快照存储到了snapshots目录
• 临时禁用Applitools插件，验证错误是否消失，定位冲突点

4. 更新依赖包 #

尝试更新cypress和cypress-mochawesome-reporter到最新稳定版本，修复已知路径处理bug：

npm update cypress cypress-mochawesome-reporter

内容的提问来源于stack exchange，提问作者Javier Joasimar Palos Flores