タイムラインレポーター
wdio-timeline-reporter はサードパーティパッケージです。詳細については、GitHub | npm を参照してください。
「百聞は一見にしかず」というように、テスト結果をまとめて可視化するためのワンストップショップのWebdriverIOレポーターです。
理由
テストが失敗した場合、ターミナル出力の確認からエラー画面のスクリーンショットの確認などに切り替えながらデバッグに多くの時間を費やします。このレポーターは、必要な典型的な情報をすべて1つのレポートに集約します。テストを実行し、すべてが正常に見えることをさらに検証するために振り返ることができるイベントの素晴らしいタイムラインを入手できます。
機能：
- MochaおよびJasmineフレームワークで非常にうまく機能します。Cucumberでも動作しますが、すべてのステップがテストとして報告されます。
- テスト結果の大きなサマリー。
- テスト実行中にキャプチャされたすべてのスクリーンショットを含む、各テスト実行の詳細。
- テスト結果のフィルタリング。失敗したテストに焦点を当てるのに最適です。
- テストに添付されたエラーのスタックトレース。
- 実行時にテストに追加情報を追加する機能。
- ポストプロセッシングは必要ありません。wdioテストプロセスの完了時に、静的なhtmlレポートファイルが生成されます。
- 画像のサイズ変更を含むスクリーンショットの取得を管理するタイムラインサービス。
サンプルhtmlレポートはこちらにあります。
WebdriverIOのインストール方法については、こちらをご覧ください。
インストール
WEBDRIVERIO V4と互換性のあるバージョンについては、こちらを参照してください。
npm install --save wdio-timeline-reporter
依存関係がpackage.jsonに追加されます
{
"dependencies": {
"wdio-timeline-reporter": "^5.1.0"
}
}
使い方
wdio構成ファイルのレポーター配列にtimelineを追加します。
また、wdio-timeline-reporterからTimelineServiceをインポートして追加します。
サービスは、webdriverio 5でレポーターがランナーインスタンスごとに初期化されるようになったため、レポートを結合してhtmlを作成するために必須です。webdriverioに関するオープンな議論を参照
TimelineServiceは、テスト実行中のスクリーンショットの取得も管理できます。画像のサイズと品質を下げたり、画像をbase64としてレポートに埋め込んだりするオプションがあります。これらは、レポーターオプションを使用して構成できます。
// wdio.conf.js
const { TimelineService } = require('wdio-timeline-reporter/timeline-service');
exports.config = {
// ...
reporters: [['timeline', { outputDir: './desired_location' }]],
// ...
services: [[TimelineService]]
};
レポーターオプション
デフォルトのレポーター構成を上書きする場合は、以下に示すように、レポーターの下のタイムライン配列にreporterOptionsオブジェクトリテラルを追加します。
| インデックス | 説明 |
|---|---|
| 1. | htmlファイルとスクリーンショットが作成されるディレクトリ。必須オプション |
| 2. | レポートhtmlファイルの名前。デフォルト値はtimeline-report.html |
| 3. | htmlファイルにbase64として画像を埋め込みます。デフォルト値はfalse |
| 4. | 画像操作のオブジェクトオプション |
| 5. | JPEG品質を設定します。resizeオプションがtrueの場合にのみ関連します。値が小さいほど、画像サイズと品質は小さくなります。デフォルト値は70。許容される最大値は100 |
| 6. | 画像のサイズを変更します。デフォルト値はfalse |
| 7. | 総ピクセル数を減らすための値。resizeオプションがtrueの場合にのみ関連します。デフォルトは1。有効な値1 - 5 |
| 8. | スクリーンショットを撮る頻度。サポートされる値は、on:error、before:click、noneです。デフォルトはnoneです。before:clickは、テスト対象のアプリのスクリーンショットのタイムラインを作成するのに最適なオプションです。 |
テストコンテキストに追加情報を追加する
addContext静的メソッドを使用して、テストに追加情報を追加できます。これは、たとえば、動的なユーザー名を持つテスト実行中に作成されたユーザーなど、失敗したテストのデバッグに役立つ重要な情報を追加するのに役立ちます。
基本的な使い方
TimelineReporter.addContext静的メソッドは、文字列パラメーター、またはtitleとvalueの2つのプロパティを持つオブジェクトリテラルを受け入れます。例:
{ title: 'sessionId', value: 'b59bb9ec-ab15-475e-9ce6-de8a14ca0cd3' }
値はリンクである可能性もあります
Mochaの例
const TimelineReporter = require('wdio-timeline-reporter').default;
describe('Suite', function() {
it('Test', function() {
// object literal parameter
TimelineReporter.addContext({
title: 'Test User',
value: 'user id created during the test'
});
// value as anchor tag
TimelineReporter.addContext({
title: 'Dynamic link',
value: '<a href="">Some important link related to test</a>'
});
// string parameter
TimelineReporter.addContext('This test might be flaky');
});
});
謝辞
wdio-json-reporterの作成者およびメンテナに感謝します。彼らのv5ソリューションを検討したことが、私の作業をスピードアップするのに役立ちました。
