如何取消Cypress截图递归目录结构，统一存储至指定文件夹？

当然可以实现！Cypress默认会根据spec文件的目录结构生成递归的截图存储路径，但我们可以通过自定义截图钩子来修改这个行为，让所有截图直接存在screenshots根目录下，具体操作如下：

核心思路 #

利用Cypress提供的after:screenshot节点事件钩子，在每次截图完成后，将默认路径下的截图文件移动到screenshots根目录，并自定义唯一的文件名避免覆盖。

针对Cypress 10+版本（使用cypress.config.js） #

在项目根目录的cypress.config.js中添加以下配置：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 拦截截图完成事件，修改存储路径
      on('after:screenshot', (details) => {
        // 生成唯一文件名：spec文件名 + 测试标题（替换空格为短横线） + 时间戳
        const uniqueFileName = `${details.specName.replace('.spec.js', '')}-${details.testTitle.replace(/\s+/g, '-')}-${Date.now()}.png`;
        // 新的存储路径：直接放在screenshots根目录
        const targetPath = `${config.screenshotsFolder}/${uniqueFileName}`;

        // 使用fs模块移动文件
        return new Promise((resolve, reject) => {
          require('fs').rename(details.path, targetPath, (err) => {
            if (err) return reject(err);
            // 返回新路径，让Cypress后续流程（比如报告生成）使用这个路径
            resolve({ path: targetPath });
          });
        });
      });
    },
    // 确保截图文件夹配置正确
    screenshotsFolder: 'screenshots',
  },
});

针对Cypress 10以下版本（使用cypress/plugins/index.js） #

如果你的项目还在使用旧版Cypress，修改cypress/plugins/index.js：

module.exports = (on, config) => {
  on('after:screenshot', (details) => {
    const uniqueFileName = `${details.specName.replace('.spec.js', '')}-${details.testTitle.replace(/\s+/g, '-')}-${Date.now()}.png`;
    const targetPath = `${config.screenshotsFolder}/${uniqueFileName}`;

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

  return config;
};

关键细节说明 #

• 唯一文件名：通过spec文件名+测试标题+时间戳组合，避免不同测试用例的截图互相覆盖，同时能快速识别截图对应的测试场景。
• 路径传递：钩子中返回新的截图路径后，Cypress会自动将这个路径同步给报告生成工具（比如mochawesome），无需额外配置就能在报告中正确引用截图。
• 手动截图兼容：不管是测试失败自动生成的截图，还是你通过cy.screenshot()手动触发的截图，都会被这个钩子处理，统一存储到根目录。

这样设置后，你所有的截图都会直接保存在screenshots文件夹下，不用再逐层查找子目录，也能顺利添加到mochawesome报告中啦！

内容的提问来源于stack exchange，提问作者trickster