web-dev-qa-db-ja.com

分度器を使用したキュウリのHTMLレポート

私はキュウリ（js）で分度器を使用しています。 Cucumber-JVMバージョンと同じようにレポートファイルを生成したいと思います。ジャスミンで分度器を使用したときの例を見たことがありますが、キュウリでは実際には何もありません。

この構成を使用する場合、レポートをどのように生成しますか？

最終的な目標は、このレポートをJenkinsで公開するか、HTMLで直接生成されている場合は他の場所で公開することです。

ありがとう！

reportcucumberreportingprotractorcucumberjs
14
Pedro Lopez

最新バージョンの分度器（バージョン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

お役に立てれば。

12
Pedro Lopez

Cucumber-html-reportを使用して、jsonレポートをHTMLに変換できます。 cucumber-html-reportをプロジェクトに追加します

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

分度器を使用する場合は、次のコードをhooks.jsに追加できます。

  • 失敗した各シナリオの後にブラウザのスクリーンショットを撮り、アフターフックのjsonレポートに添付します。
  • Cucumber opts formatプロパティに「pretty」と表示されている場合でも、テスト結果を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);
8
Ola

私のために働いている以下のコードを試してください：

以下のプラグインを使用できます：

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');
    });
}
});
3
Shubham Jain

他の回答が示す方法で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に直接関連する構成のみです-残りは味わうために味付けされていることを報告してください。

テストを実行する前に、レポートディレクトリが存在することを確認してください。

レポートの作成をCucumberリスナーとして添付する代わりにここに配置することにより、Cucumberは非同期操作が完了するのを待ってから終了します。

元の答えをくれたOlaに感謝します。私は非同期の問題（難しい方法）を発見し、同じ問題を見つけたときに誰かの時間を節約できると考えていました。

1
Hopasaurus