Cypress修改截图路径遭遇EPERM权限错误求助

问题背景 #

在Windows 10/11 + VS Code + NX工作区环境中，参照Cypress官方文档修改截图保存路径时，出现EPERM: operation not permitted权限错误，无法完成截图文件的重命名与迁移。

官方参考代码 #

// cypress.config.js
import { defineConfig } from 'cypress'
import fs from 'fs'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('after:screenshot', (details) => {
        console.log(details) // 打印截图详情到终端

        const newPath = '/new/path/to/screenshot.png'

        return new Promise((resolve, reject) => {
          // fs.rename 将文件移动到已存在的目录 'new/path/to'，并将图片重命名为 'screenshot.png'
          fs.rename(details.path, newPath, (err) => {
            if (err) return reject(err)

            // 由于重命名并移动了图片，需要返回新路径以保证测试结果中的路径准确
            resolve({ path: newPath })
          })
        })
      })
    },
  },
})

我的问题代码 #

const { defineConfig } = require('cypress')
const fs = require('fs')
const { Runnable } = require('mocha')

module.exports = defineConfig({
e2e: {
    setupNodeEvents(on, config) {
        on('after:screenshot', (details) => {
            console.log(details) // 打印截图详情到终端
       const testNmae=Cypress.spec.name.replace(/\.|\/|\s/g,'_')
       const timeStamp = newDate().toISOString().replace(/:/g,'_')
       const filename = '${testname}--${timeStamp} (failed).png'
       const newPath = 'cypress/myscreenshots/${filename}'
    if (!fs.existsSync(newPath)) {fs.mkdirSync(newPath, {recursive: true });}
    return new Promise((resolve, reject) => {
    fs.rename(details.path, newPath, (err) => {if (err) return reject(err)
resolve({ path: newPath })
          })
        })
      })
    },
  },
})

错误详情 #

1. template spec passes:
Error: EPERM: operation not permitted, rename 'D:\Cypress\projects\example\cypress\screenshots\spec.cy.js\template spec -- passes (failed).png' -> 'D:\Cypress\projects\example\cypress\myscreenshots'

问题分析 #

代码中存在多个关键错误，直接导致了Windows下的权限异常：

1. 字符串模板语法错误：使用单引号包裹模板字符串，无法解析${变量}语法，导致文件名和路径拼接失败
2. 变量拼写错误：testNmae拼写错误，后续filename中使用的testname大小写不匹配
3. 日期对象创建错误：newDate()缺少空格，应为new Date()
4. 目录创建逻辑错误：将包含文件名的完整路径newPath传给fs.mkdirSync，试图把文件路径当作目录创建，后续fs.rename尝试将文件重命名到“目录”上，Windows系统禁止此类操作，触发EPERM错误

修复后的代码 #

const { defineConfig } = require('cypress')
const fs = require('fs')
const path = require('path') // 引入path模块处理路径，避免跨系统路径问题

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('after:screenshot', (details) => {
        console.log(details)
        
        // 修正变量拼写与日期创建
        const testName = Cypress.spec.name.replace(/\.|\/|\s/g, '_')
        const timeStamp = new Date().toISOString().replace(/:/g, '_')
        // 使用反引号解析模板字符串
        const filename = `${testName}--${timeStamp} (failed).png`
        // 拆分目录与文件名：先定义目标目录
        const targetDir = 'cypress/myscreenshots'
        // 拼接完整的文件路径
        const newPath = path.join(targetDir, filename)

        // 只创建目录，而非包含文件名的路径
        if (!fs.existsSync(targetDir)) {
          fs.mkdirSync(targetDir, { recursive: true })
        }

        return new Promise((resolve, reject) => {
          fs.rename(details.path, newPath, (err) => {
            if (err) return reject(err)
            resolve({ path: newPath })
          })
        })
      })
    },
  },
})

额外优化建议 #

• 引入path模块处理路径，避免Windows与Linux系统的路径分隔符差异问题
• 可以通过config.projectRoot获取项目根目录，拼接绝对路径，进一步避免相对路径的潜在问题

内容的提问来源于stack exchange，提问作者Christian Rudolf Tan