如何在 Playwright 框架中将屏幕截图附加到 Cucumber HTML 报告？

Question

我正在尝试将屏幕截图添加到我的 Playwright 测试框架中的 Cucumber HTML 报告中。

这是我的

reporter.js

：

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

const options = {
  theme: 'bootstrap',
  jsonFile: 'cucumber_report.json',
  output: 'reports/cucumber_report.html',
  reportSuiteAsScenario: true,
  scenarioTimestamp: true,
  launchReport: true,
}

reporter.generate(options)

根据 [cucumber-html-reporter#storescreenshots][1] 文档，我将以下内容添加到我的

reporter.js

选项中，如下所示：

{
   ...
   output: '/report/cucumber_report.html',
   screenshotsDirectory: 'screenshots/',
   storeScreenshots: true
}

文档说“

storeScreenshots: true

将屏幕截图存储到默认目录。如果不存在，它会创建一个目录‘屏幕截图’”。

但是，当我运行测试时，并没有创建这样的目录。

我正在使用

npm run testAndReport

运行框架：

"scripts": {
    "test": "./node_modules/.bin/cucumber-js --require cucumber.js --require step-definitions/**/*.js -f json:cucumber_report.json --publish-quiet",
    "report": "node reporter.js",
    "testAndReport": "npm run test; npm run report"
}

如果需要，我可以添加更多代码。

更新：

我在

hooks.js

中添加了以下钩子：

After(async function (scenario) {
    const img = await global.page.screenshot({ path: `screenshots/${scenario.pickle.name}.png` })
    await this.attach(img, 'image/png')
    await global.page.close()
    await global.context.close()
})

使用上面的代码，为每个测试场景添加了屏幕截图。

然后我更新了

After

挂钩，尝试仅在失败时附加屏幕截图：

if (scenario.result.status === 'failed') {      
    const img = await global.page.screenshot({ path: `screenshots/${scenario.pickle.name}.png` })
    await this.attach(img, 'image/png')
}

但是，通过此更改，不会添加任何屏幕截图

Answer 1

而不是使用：

if (scenario.result.status === 'failed') {

我现在正在使用

if (scenario.result.status === 'FAILED') {

状态是“失败”而不是“失败”。

现在仅附加失败场景的屏幕截图。