Cypress+Cucumberのテスト結果を良い感じに出力する

Cypress＋Cucumberのテスト環境

Cypressだけでもテストは書けるのですが、直感的にどういうテストを行っているのか理解しやすくなるので、Cucumberと組み合わせて使っています。
導入方法は TypeScript + Cypress + CucumberでE2Eテストをやる が分かりやすく参考になりました。

mochawesomeが使える・・・？

テストのレポートを出力したいと思って調べたところ、
Cypress で html テストレポート (mochawesome) を出力する - Qiita　がヒットしました。
こちらの記事もわかりやすくまとまっていて参考になります。

mochawesomeでHTML出力すること自体は簡単にできましたが、出力される内容はCucumberのシナリオまでで、各シナリオでどのようなステップを実行しているのかが分からない状態でした。

それでもいいよ！って方はmochawesomeを利用するのも良いと思います。

cucumber-html-reporterが良い！

せっかくCucumber使っているんだし、ステップの内容まで見たいですよね。
というわけで、さらに調べてみるとまさに同じ悩みを抱えている方を発見。
cucumber - Can I generate cucumbur html report in cypress? - Stack Overflow

やることはAnswerに書いてある通りなんですが、もう少し補足しつつメモしておきます。

1. cypress-cucumber-preprocessorの設定を追加

CypressとCucumberを組み合わせて使う場合、package.jsonにcypress-cucumber-preprocessorの設定を記載していると思います。
そこに下記を追記します。

package.json

"cypress-cucumber-preprocessor": {
  "cucumberJson": {
    "generate": true,
    "outputFolder": "cypress/cucumber-json",
    "filePrefix": "",
    "fileSuffix": ".cucumber"
  }
}

この設定を行うことで、テスト実行後に結果のjsonファイルがoutputFolderに指定しているフォルダへ出力されるようになります。

2. cucumber-html-reporterをインストール

手順1で出力したjsonをもとにhtmlを生成してくれるライブラリ cucumber-html-reporter をインストールします。

$ yarn add --dev cucumber-html-reporter

3. html生成するためのjsファイルを作成

cucumber-html-reporterの設定を記載しつつ、実行するためのJSファイルを書きます。任意の場所に作成すれば良いです。

cucumber-html-reporter.js

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

const options = {
  theme: 'hierarchy',
  jsonDir: 'cypress/cucumber-json', // 手順1で指定したcucumberJsonの出力先
  output: 'reports/report.html', // 任意の出力先
  reportSuiteAsScenarios: true,
  scenarioTimestamp: true,
  launchReport: true,
  ignoreBadJsonFile: true,
  metadata: {
    ... // アプリのバージョンなどご自由に
  }
};

reporter.generate(options);

4. htmlを生成

手順3のjsファイルを実行すると指定した内容がhtmlとして出力されます。

$ node ./cucumber-html-reporter.js

実際は、いちいち手動で実行せずにCypress run実行後に生成までしたいので、npmスクリプトを活用しています。