带有量角器的黄瓜 HTML 报告

Posted 2023-02-16

【中文标题】带有量角器的黄瓜 HTML 报告

【英文标题】：Cucumber HTML report with Protractor

【发布时间】：2014-09-26 17:24:55

【问题描述】：

我正在使用带有 Cucumber (js) 的量角器。我想像 Cucumber-JVM 版本一样生成报告文件。我在 Jasmine 中使用 Protractor 时看到过示例，但在 Cucumber 中几乎没有。

使用此配置时如何生成报告？

最终目标是在 Jenkins 或其他任何地方发布此报告（如果它们是直接以 html 生成的）。

谢谢！

【问题讨论】：

同样的用例，还没有答案，但环顾四周......

这个你试过了吗：npmjs.com/package/cucumber-junit？

问题是，因为我使用的是 Protractor，所以我无法像 cucumber-junit 建议的那样重定向输出。虽然，最新版本的 protractor 解决了这个问题，您最终可以重定向输出并生成一个 JSON 文件，您可以使用 protractor-cucumber-junit 处理该文件并获取 XML。谢谢。

另外值得一看的是gulp-protractor-cucumber-html-report

您可能想看看Serenity/JS，它可以补充您当前的 Protractor/Cucumber 设置以自动生成带插图的 HTML 报告 - see this answer for instructions

【参考方案1】：

使用最新版本的量角器（从 1.5.0 版开始），您现在可以生成 JSON 报告。大约 7 个月前，当我问这个问题时，该功能不存在。

您需要做的就是将它添加到您的 protractor-config.json 文件中。

resultJsonOutputFile: 'report.json'

report.json 是输出文件的位置。

完成后，您可以使用 protractor-cucumber-junit (https://www.npmjs.com/package/protractor-cucumber-junit)、cucumberjs-junitxml (https://github.com/sonyschan/cucumberjs-junitxml) 或类似的东西将 JSON 文件转换为 Jenkins 可以显示的有效 XML 文件。

$ cat report.json | ./node_modules/.bin/cucumber-junit > report.xml

希望这会有所帮助。

【讨论】：

这不是 html

【参考方案2】：

您可以使用 cucumber-html-report 将 json 报告转换为 HTML。将 cucumber-html-report 添加到您的项目中

$ npm install cucumber-html-report --save-dev

如果你使用量角器可以在 hooks.js 中添加如下代码

在每个失败的场景后获取浏览器屏幕截图，以附加到 After-hook 中的 json 报告。 即使您的黄瓜 opts 格式属性显示“漂亮”，也将测试结果写入 json 文件。 将 json 报告转换为 HTML，包括失败场景的屏幕截图。

var outputDir = 'someDir';
this.After(function(scenario, callback) 
  if (scenario.isFailed()) 
    browser.takeScreenshot().then(function(base64png) 
      var decodedImage = new Buffer(base64png, 'base64').toString('binary');
      scenario.attach(decodedImage, 'image/png');
      callback();
    , function(err) 
      callback(err);
    );
   else 
    callback();
  
);

var createHtmlReport = function(sourceJson) 
  var CucumberHtmlReport = require('cucumber-html-report');
  var report = new CucumberHtmlReport(
    source: sourceJson, // source json
    dest: outputDir // target directory (will create if not exists)
  );
  report.createReport();
;

var JsonFormatter = Cucumber.Listener.JsonFormatter();
JsonFormatter.log = function(string) 
  if (!fs.existsSync(outputDir)) 
    fs.mkdirSync(outputDir);
  

  var targetJson = outputDir + 'cucumber_report.json';
  fs.writeFile(targetJson, string, function(err) 
    if (err) 
      console.log('Failed to save cucumber test results to json file.');
      console.log(err);
     else 
      createHtmlReport(targetJson);
    
  );
;

this.registerListener(JsonFormatter);

【讨论】：

我收到以下错误：[launcher] Error: TypeError: undefined is not a function at Object. (e2e/hooks.js:2:6) at Module._compile (module .js:460:26) 在 Object.Module._extensions..js (module.js:478:10) 在 Module.load (/Users/aaaa/.npm-packages/lib/node_modules/cucumber/node_modules/coffee- script/lib/coffee-script/register.js:45:36) 在 Function.Module._load (module.js:310:12) 在 Module.require (module.js:365:17) 在 require (module.js :384:17)

... 所以我将 hooks.js 包装在一个 module.exports... 但是它开始说 [launcher] Error: ReferenceError: Cucumber is not defined ...... 所以我尝试将其设为小写 c（黄瓜），但它仍然不起作用：错误：TypeError：无法读取未定义的属性 'JsonFormatter'

我们可以在每个步骤中使用记录器吗？如果是这样，如何实现

【参考方案3】：

试试下面对我有用的代码：

您可以使用以下插件：

https://www.npmjs.com/package/cucumber-html-reporter

在 package.json 中添加如下依赖：

   "cucumber-html-reporter": "^5.0.0"

点击命令如下：

npm install

在您的 cucumberconfig.ts 中添加以下导入

import * as reporter from "cucumber-html-reporter"

现在在 cucumberconfig.ts 中添加以下键

 onComplete: () => 
      //var reporter = require('cucumber-html-reporter');
      var options = 
        theme: 'bootstrap',
        jsonFile: './cucumberreport.json',
        output: './cucumberreportsss.html',
        reportSuiteAsScenarios: true,
        launchReport: true,
        metadata: 
            "App Version":"0.3.2",
            "Test Environment": "STAGING",
            "Browser": "Chrome  54.0.2840.98",
            "Platform": "Windows 10",
            "Parallel": "Scenarios",
            "Executed": "Remote"
        
      ;

      reporter.generate(options);
    ,

完整的文件如下所示：

import Config from 'protractor'
import * as reporter from "cucumber-html-reporter"

export let config: Config = 
    directConnect:true,
     // set to "custom" instead of cucumber.
    framework: 'custom',
    // path relative to the current config file
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    seleniumAddress: 'http://localhost:4444/wd/hub',
    // To run script without cucumber use below
    //specs: ['typescriptscript.js'],

    onComplete: () => 
      //var reporter = require('cucumber-html-reporter');
      var options = 
        theme: 'bootstrap',
        jsonFile: './cucumberreport.json',
        output: './cucumberreportsss.html',
        reportSuiteAsScenarios: true,
        launchReport: true,
        metadata: 
            "App Version":"0.3.2",
            "Test Environment": "STAGING",
            "Browser": "Chrome  54.0.2840.98",
            "Platform": "Windows 10",
            "Parallel": "Scenarios",
            "Executed": "Remote"
        
      ;

      reporter.generate(options);
    ,
    capabilities: 
        'browserName': 'firefox',
        'marionette': true,
        //shardTestFiles: true,
    ,
    SELENIUM_PROMISE_MANAGER: false,
    specs: [
        '../Features/*.feature' // accepts a glob
      ],
    // Run feature file for cucumber use below
    cucumberOpts: 
        // require step definitions
        require: [
          './stepDefination/*.js' // accepts a glob
        ],
        format: 'json:cucumberreport.json',

      ,

      jasmineNodeOpts: 
        showColors: true,
    ,

; 

要附加失败的屏幕截图，请在钩子中使用下面的代码

  After(function(scenarioResult) 
    let self = this;
    if (scenarioResult.result.status === Status.FAILED) 
    return browser.takeScreenshot()
    .then(function (screenshot) 
        const decodedImage = new Buffer(screenshot.replace(/^data:image\/png;base64,/, ''), 'base64');
        self.attach(decodedImage, 'image/png');
    );

);

【讨论】：

ng run e2e 命令完成后，是否有任何方法可以在浏览器中自动运行报告

@ShubhamJain 在钩子中，我们调用 this.attach，这是对世界的附加函数的调用，对吧？我的功能只是在报告的文件夹中生成屏幕截图，我想将屏幕截图附加到黄瓜 HTML 报告中，我找不到解决方案。请说明您是如何实现附加功能的（我的意思是真实内容而不是您如何称呼它）再次感谢您的帮助！

没关系，我找到了一种方法，我从自定义世界中删除了附加代码 sn-p，并改用黄瓜世界构造函数：这里的代码 sn-ps ：***.com/a/60278678/2376892

【参考方案4】：

以其他答案指示的方式使用 cucumber-html-report 时，您可能会在较新版本的 Cucumber/Protractor/Cucumber-html-report 上遇到问题。

症状是 index.html 已创建，但在测试运行结束时为空。

这是因为 cucumber-html-report 正在使用异步文件写入，并且量角器没有等待它完成。 （我们使用的代码与答案中的代码有着惊人的相似之处。）

这是一个有效的设置：

在 hooks.js 中，屏幕截图部分与其他答案保持一致：

// Generate a screenshot at the end of each scenario (if failed; configurable to always)
cuke.After(function(scenario, done) 
    browser.getProcessedConfig().then(config => 
        if (!config.screenshots.onErrorOnly || scenario.isFailed()) 
            return browser.driver.takeScreenshot().then(function(png) 
                let decodedImage = new Buffer(png.replace(/^data:image\/(png|gif|jpeg);base64,/, ''), 'base64');
                scenario.attach(decodedImage, 'image/png');
                done();
            );
         else 
            done();
        
    );
);

在 protractor.conf.js 中：

var cucumberReportDirectory = 'protractor-report';
var jsonReportFile = cucumberReportDirectory + '/cucumber_report.json';

exports.config = 
  cucumberOpts: 
    format: 'json:./' + jsonReportFile,
  ,
  onCleanUp: function () 
      var CucumberHtmlReport = require('cucumber-html-report');

      return CucumberHtmlReport.create(
          source: jsonReportFile,
          dest: cucumberReportDirectory,
          title: 'OptiRoute - Protractor Test Run',
          component: new Date().toString()
      ).then(console.log).catch(console.log);
  ,
  ignoreUncaughtExceptions: true,
  untrackOutstandingTimeouts: true
;

这只是与cucumber-html-report直接相关的配置，其他的就老实说吧。

在运行测试之前确保报告目录存在。

通过将报告创建放在此处而不是将其附加为 Cucumber 侦听器，Cucumber 将在退出之前等待异步操作完成。

感谢 Ola 的原始答案，我发现了异步问题（困难的方式），并认为当他们发现相同的问题时我可以节省时间。