如何通过@badeball/cypress-cucumber-preprocessor在Cypress Cucumber HTML报告中输出日志？

有两种常用方式可以实现类似Cucumber-Java中scenario.write()的效果：

1. 使用Scenario实例的log()方法 #

在步骤定义中，你可以直接获取Scenario对象并调用其log()方法，日志会直接写入Cucumber报告：

JavaScript示例 #

Given('我完成了某个操作', function (scenario) {
  // 直接写入日志到报告
  scenario.log('hello，这是自定义日志内容');
  
  // 后续测试逻辑
  cy.visit('/');
});

TypeScript示例 #

如果使用TypeScript，需要先导入Scenario类型：

import { Given, Scenario } from '@badeball/cypress-cucumber-preprocessor';

Given('我完成了某个操作', function (scenario: Scenario) {
  scenario.log('hello，这是自定义日志内容');
  cy.visit('/');
});

注意：这里需要使用普通函数（而非箭头函数），确保能正确获取到Scenario对象，也可以直接通过参数注入的方式获取。

2. 使用Cypress内置的cy.log()命令 #

cy.log()的输出不仅会显示在Cypress测试运行器的日志面板中，也会被捕获并包含到最终的Cucumber HTML报告里：

Given('我执行页面操作', () => {
  cy.log('正在访问首页');
  cy.visit('/');
  
  cy.log('验证页面标题');
  cy.title().should('eq', '首页');
});

确保报告正确捕获日志 #

要让日志正常出现在HTML报告中，需确保你的Cypress配置正确生成Cucumber报告：

1. 安装必要的报告依赖（如果未安装）：

npm install cucumber-html-reporter --save-dev

2. 在cypress.config.js中配置报告生成：

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

module.exports = defineConfig({
  e2e: {
    specPattern: '**/*.feature',
    async setupNodeEvents(on, config) {
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      });
      on('file:preprocessor', bundler);
      await addCucumberPreprocessorPlugin(on, config);

      // 配置生成JSON格式的Cucumber报告
      config.reporter = 'cucumber-json';
      config.reporterOptions = {
        jsonFolder: './cypress/reports/json',
      };

      return config;
    },
  },
});

3. 添加一个脚本到package.json，用于将JSON报告转换为HTML：

{
  "scripts": {
    "test:e2e": "cypress run",
    "generate-report": "cucumber-html-reporter -f ./cypress/reports/json/*.json -o ./cypress/reports/html"
  }
}

运行测试后执行npm run generate-report，即可在./cypress/reports/html目录下看到包含自定义日志的HTML报告。

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