Playwright+Cucumber集成Allure报告显示Unknown NaN%问题求助

我在Playwright与Cucumber的自动化测试框架中集成Allure报告，执行用例的命令为：npm run test -- --tags "@Something"。执行完成后运行npm run allure generate生成报告，但浏览器中显示Allure Report Unknown NaN%。以下是我的package.json配置：

{"name": "playwright",
  "version": "1.0.0",
  "description": "E2E Automation Framework",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "allure:generate": "npx allure generate ./allure-results --clean",
    "allure:open": "npx allure open ./allure-report",
    "allure:serve": "npx allure serve",
    "test": "./node_modules/.bin/cucumber-js --require cucumber.cjs --require step-definitions/**/*.cjs --require features/**/*.js",
    "allure-reports": "node_modules/.bin/allure generate ./reports/allure/allure-results/  -o ./reports/allure/allure-report/ --clean && allure open ./reports/allure/allure-report",
    "posttest": "npm run allure:generate",
    "allure": "allure serve reports/allure-results"
  },
  "author": "X",
  "license": "ISC",
  "dependencies": {
    "@cucumber/cucumber": "^8.7.0",
    "chai": "^4.3.6",
    "prettier": "^2.7.1",
    "ts-jest": "^29.0.3"
  },
  "jest": {
    "verbose": true,
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "preset": "ts-jest/presets/js-with-ts",
    "testEnvironment": "node",
    "allowJs": true,
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!variables/.*)"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "@babel/register": "^7.18.9",
    "@jest/globals": "^29.3.0",
    "@playwright/test": "^1.27.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "allure-commandline": "^2.18.1",
    "allure-playwright": "^2.0.0-beta.19",
    "babel-jest": "^29.2.2",
    "experimental-allure-playwright": "^0.0.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.2.2",
    "playwright": "^1.27.1",
    "react-test-renderer": "^18.2.0"
  }
}

解决方案 #

1. 统一Allure结果目录路径 #

你的scripts中存在多个不一致的Allure结果路径：

• allure:generate读取./allure-results
• allure-reports读取./reports/allure/allure-results/
• allure读取reports/allure-results

测试执行生成的结果文件路径必须和报告生成时读取的路径完全一致。建议统一为一个路径，比如全部改为./allure-results：

• 修改scripts中的所有相关路径，确保前后统一
• 同时确认Cucumber配置中设置的Allure结果输出路径与scripts一致

2. 添加Cucumber专属的Allure适配器 #

当前依赖中缺少Cucumber集成Allure必需的allure-cucumberjs适配器，仅依赖allure-playwright不足以支持Cucumber场景：

• 安装依赖：

npm install allure-cucumberjs --save-dev

• 在你的Cucumber配置文件（cucumber.cjs）中注册适配器：

const { AllureRuntime } = require('allure-cucumberjs');
const { BeforeAll, Before, After } = require('@cucumber/cucumber');

let allureRuntime;

BeforeAll(() => {
  allureRuntime = new AllureRuntime({ resultsDir: './allure-results' });
});

Before(function () {
  this.allure = allureRuntime.startCase(this.pickle.name);
});

After(function (testCase) {
  // 根据测试结果更新Allure状态
  switch (testCase.result.status) {
    case 'PASSED':
      this.allure.passed();
      break;
    case 'FAILED':
      this.allure.failed(testCase.result.exception);
      // 可选：结合Playwright添加失败截图
      if (this.page) {
        const screenshot = await this.page.screenshot();
        this.allure.addAttachment('Failure Screenshot', screenshot, 'image/png');
      }
      break;
    case 'SKIPPED':
      this.allure.skipped();
      break;
  }
  this.allure.endCase();
});

3. 验证Allure结果文件是否生成 #

执行测试后，检查指定的结果目录（比如./allure-results）下是否生成了.json、.txt、.png等Allure格式的文件：

• 如果没有生成任何文件，说明Cucumber配置未正确触发Allure报告生成，需检查适配器注册代码
• 如果有文件但报告显示异常，删除结果目录后重新执行测试和生成报告，避免残留的损坏文件影响

4. 排查posttest脚本的执行问题 #

你的posttest设置为自动执行allure:generate，但如果测试执行失败，npm可能不会触发posttest脚本：

• 先手动执行测试命令，确认测试正常完成后，再手动执行npm run allure:generate，排除posttest的影响
• 若需要强制执行posttest，可修改脚本为："posttest": "npm run allure:generate || true"

5. 更新Allure相关依赖版本 #

当前allure-playwright为2.0.0-beta.19，属于旧版本，可能存在兼容性问题：

• 更新所有Allure相关依赖：

npm update allure-commandline allure-cucumberjs allure-playwright

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