Cucumber html 报告错误未以正确方式显示

Question

我在测试用例失败后启动 Cucumber html 报告，但 html 报告中的错误消息未以正确的方式显示。

任何人都可以帮助我吗？

"scripts":{
"test": "npx cucumber-js -p test_runner --tags @Demotest & node ./htmlReportGenerator.js"
}

"dependencies":{
       "@cucumber/cucumber": "8.10.0",
       "@types/cucumber-html-reporter": "5.0.1",
       "cucumber-html-reporter": "5.5.o",
       "@playwright/test": "^1.23.1",
       "ts-node": "^10.9.1",
       "typescript": "^4.5.5",
}

*htmlReportGenerator.js:*

const reporter = require('cucumber-html-reporter');

var options = {
      brandTitle: "Automation test",
      theme: 'bootstrap',
      jsonFile: 'reports/cucumber_report.json',
      output: 'reports/cucuber_report.html',
      reportSuiteAsScenarios: true,
      launchReport: true,
}
 reporter.generate(options)

*cucumber.js:*

let options = [
        '--require-module ts-node/register',
        '--require ./steps/*.steps.ts',
        '--format progress',
        '--publish-quiet',
        '--format json:./reports/cucumber_report.json',
].join(' ');

let run_features = [
       './features/',
        options,
].join(' ');

module.exports = {
       test_runner: run_features
}

*hook.ts:*
import { After, AfterAll, Before, BeforeAll, setDefaultTimeout, Status } from    "@cucumber/cucumber";
import { Browser, chromium, Page } from "@playwright/test";

let page: Page
let browser: Browser
setDefaultTimeout(60000)

BeforeAll(async() => {
          broser = await chromium.launch({
                headless: false,
                timeout: 60000
         })
      })

AfterAll(async() => {
            awit browser.close()
   })

Before(async() => {
         const context = await broswer.newContext()
          page = await context.newPage()
      })

After(async function (Scenario) {
                 if(Scenario.result!.status === Status.FAILED) {
                            await this.attach(
                               await page.screenshot ({
                                 path: `./Screenshots/${Scenario.pickle.name}.png`,
                                 fullPage: true,
                          }),
                            "image/png"
                        )
                   }
                 await page.close()
     })

  export {page, browse }

在 html 报告中运行测试用例后，错误显示如下，格式不正确。 （请看下图）

我期待这样的事情。

Answer 1

即使我也面临着同样的问题。您对此有什么解决方案吗？ 我探索了这个格式化程序链接，但目前无法解决问题。 https://github.com/cucumber/cucumber-js/blob/main/docs/formatters.md#colored-output

有人可以提供解决方案吗？