迁移至@badeball/cypress-cucumber-preprocessor后无法生成JSON报告及失败截图咨询

一、修复JSON报告不生成的问题 #

你当前配置里，package.json中的cypress-cucumber-preprocessor配置在@badeball的新版本中，建议移到cypress.config.js的env字段下，同时要确保插件初始化时能正确读取配置。

修改cypress.config.js #

更新配置文件，把cucumber相关配置放到env下，或者在插件初始化时明确配置：

const { defineConfig } = require('cypress');
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
const addCucumberPreprocessorPlugin =
  require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin;
const createEsbuildPlugin =
  require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin;

module.exports = defineConfig({
  defaultCommandTimeout: 5000,
  numTestsKeptInMemory: 0,
  viewportWidth: 1360,
  viewportHeight: 768,
  env: {
    username: 'xxxxxxx',
    password: 'xxxxxxxx',
    // 迁移cucumber配置到此处
    'cypress-cucumber-preprocessor': {
      stepDefinitions: 'cypress/e2e/**/*.cy.js',
      commonPath: 'cypress/e2e/common/**/*.cy.js',
      filterSpecs: true,
      omitFiltered: true,
      nonGlobalStepDefinitions: true,
      cucumberJson: {
        generate: true,
        outputFolder: 'cypress/cucumber_report',
        filePrefix: '',
        fileSuffix: '.cucumber'
      }
    }
  },
  e2e: {
    async setupNodeEvents(on, config) {
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      });

      on('file:preprocessor', bundler);
      // 确保插件获取正确配置
      await addCucumberPreprocessorPlugin(on, config);

      return config;
    },
    specPattern: 'cypress/e2e/**/*.feature',
  },
})

另外，先检查cypress/cucumber_report文件夹是否存在，若不存在手动创建即可，部分版本插件不会自动生成目录。

二、给失败测试用例附加截图 #

要把失败用例的截图加到cucumber JSON报告里，需在setupNodeEvents中监听test:after:run事件，将截图路径关联到测试结果中。

更新setupNodeEvents逻辑 #

修改cypress.config.js里的setupNodeEvents部分：

async setupNodeEvents(on, config) {
  const bundler = createBundler({
    plugins: [createEsbuildPlugin(config)],
  });

  on('file:preprocessor', bundler);
  await addCucumberPreprocessorPlugin(on, config);

  // 处理失败用例截图
  on('test:after:run', async (test, runnable) => {
    if (test.state === 'failed') {
      // 拼接默认截图路径
      const screenshotPath = `cypress/screenshots/${runnable.parent.title}/${test.title} (failed).png`;
      // 将截图添加到cucumber报告
      await addCucumberPreprocessorPlugin.attachScreenshot(test, screenshotPath);
    }
  });

  return config;
},

如果attachScreenshot方法失效，可手动读取截图文件转base64添加：

// 先引入fs模块
const fs = require('fs');

// 替换test:after:run事件内的代码
if (test.state === 'failed') {
  const screenshotPath = `cypress/screenshots/${runnable.parent.title}/${test.title} (failed).png`;
  if (fs.existsSync(screenshotPath)) {
    const base64Screenshot = fs.readFileSync(screenshotPath, 'base64');
    await addCucumberPreprocessorPlugin.addAttachment(
      test,
      'image/png',
      base64Screenshot,
      `${test.title}-failed.png`
    );
  }
}

同时确认Cypress截图配置开启（默认开启），可在config中补充：

module.exports = defineConfig({
  // ...其他配置
  screenshotsFolder: 'cypress/screenshots', // 默认路径，可省略
  // ...
});

三、验证配置 #

1. 删除旧报告文件夹（若存在），重新运行测试：

npm run test

2. 检查cypress/cucumber_report下是否生成.cucumber.json文件。
3. 故意让某个用例失败，查看报告中是否包含截图附件，同时确认screenshots文件夹生成对应截图。

排查小技巧 #

• 确认@badeball/cypress-cucumber-preprocessor与Cypress版本兼容（你用的15.1.0和12.3.0是兼容的）。
• 检查步骤定义路径是否正确，确保.feature文件能匹配到对应的.cy.js文件。
• 若报告仍未生成，添加调试日志排查：

DEBUG=cypress-cucumber-preprocessor* npm run test

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