如何在Playwright中为Cucumber.js生成Allure测试报告？

1. 清理冗余依赖 #

你的配置混入了与Cucumber+Playwright组合无关的Jasmine、Jest类Allure依赖，这类冗余依赖会引发冲突，是报告生成异常的核心诱因之一。以下是修正后的package.json：

{
  "author": "Lorem ipsum",
  "description": "Playwright end-to-end test automation with Cucumber",
  "devDependencies": {
    "@cucumber/cucumber": "^8.5.1",
    "@playwright/test": "^1.30.0",
    "allure-playwright": "^2.0.0-beta.25",
    "allure-cucumberjs": "^2.0.0-beta.25",
    "allure-commandline": "^2.17.2",
    "playwright": "^1.24.0"
  },
  "keywords": [
    "cucumber"
  ],
  "license": "",
  "name": "automation",
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "test": "cucumber-js --parallel 3 --tags '@smoke' --format ./allure-reporter.js",
    "allure:generate": "npx allure generate ./allure-results --clean",
    "allure:open": "npx allure open ./allure-report",
    "allure:serve": "npx allure serve ./allure-results"
  },
  "version": "1.0.0",
  "dependencies": {}
}

关键调整说明： #

• 删除cucumber-junit、jasmine-allure-reporter等无关依赖，仅保留Cucumber+Playwright+Allure核心依赖
• 添加allure-cucumberjs：这是Cucumber专属的Allure报告生成器，之前缺失该依赖导致无法正确关联测试结果
• 简化test脚本：直接通过Cucumber命令实现多线程（--parallel 3）、标签筛选（--tags '@smoke'），并关联自定义Allure报告配置
• 移除冗余的JSON报告转换步骤，Allure会直接生成自有格式的结果文件

2. 创建Cucumber Allure报告配置文件 #

在项目根目录新建allure-reporter.js，用于定义Cucumber生成Allure结果的规则：

const { AllureRuntime } = require('allure-cucumberjs');
const { CucumberJSAllureFormatter } = require('allure-cucumberjs');

function Reporter(options) {
  return new CucumberJSAllureFormatter(
    options,
    new AllureRuntime({ resultsDir: './allure-results' }),
    {
      labels: [
        {
          name: 'epic',
          pattern: /@epic:(.*)/
        },
        {
          name: 'feature',
          pattern: /@feature:(.*)/
        }
      ]
    }
  );
}

Reporter.prototype = Object.create(CucumberJSAllureFormatter.prototype);
Reporter.prototype.constructor = Reporter;

module.exports = Reporter;

该文件指定了Allure结果的存储目录，同时支持解析自定义标签（如@epic:、@feature:），让报告维度更清晰。

3. 优化Playwright集成（可选） #

原playwright.config.js仅对@playwright/test生效，若需要在Cucumber步骤中补充Allure数据，可在步骤定义中手动调用Allure API：

const { Given, When, Then } = require('@cucumber/cucumber');
const { chromium } = require('playwright');
const { allure } = require('allure-playwright');

Given('我打开首页', async function () {
  this.browser = await chromium.launch();
  this.page = await this.browser.newPage();
  await this.page.goto('https://example.com');
  allure.step('首页加载完成');
  allure.attachment('首页截图', await this.page.screenshot(), 'image/png');
});

通过上述代码可在报告中添加自定义步骤说明、截图附件，提升报告可读性。

4. 执行流程 #

1. 安装依赖：npm install
2. 执行测试：npm run test（可修改--tags参数切换测试标签，调整--parallel数值修改并行线程数）
3. 生成报告：npm run allure:generate
4. 查看报告：npm run allure:open（本地打开静态报告）或npm run allure:serve（启动临时服务查看）

5. NaN异常原因说明 #

之前的配置混用了多套测试框架的Allure依赖，且未正确配置Cucumber专属的Allure报告生成器，导致Allure无法解析测试结果结构，最终出现NaN异常。清理冗余依赖并配置正确的Cucumber Allure关联后，即可解决该问题。

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