ビジュアルレポーターは、バージョンv5.2.0から`@wdio/visual-service`で導入された新機能です。このレポーターを使用すると、ビジュアルテストサービスによって生成されたJSON差分レポートを視覚化し、人間が読みやすい形式に変換できます。出力のレビューのためのグラフィカルインターフェースを提供することで、チームがビジュアルテストの結果をより適切に分析および管理するのに役立ちます。
この機能を使用するには、必要な`output.json`ファイルを作成するための設定がされていることを確認してください。このドキュメントでは、ビジュアルレポーターの設定、実行、および理解について説明します。
前提条件
ビジュアルレポーターを使用する前に、JSONレポートファイルを生成するようにビジュアルテストサービスが設定されていることを確認してください。
export const config = {
// ...
services: [
[
"visual",
{
createJsonReportFiles: true, // Generates the output.json file
},
],
],
};
詳細な設定手順については、WebdriverIOのビジュアルテストドキュメントまたは`createJsonReportFiles`を参照してください。
インストール
ビジュアルレポーターをインストールするには、npmを使用して開発依存関係としてプロジェクトに追加します。
npm install @wdio/visual-reporter --save-dev
これにより、ビジュアルテストからレポートを生成するために必要なファイルが利用可能になります。
使用方法
ビジュアルレポートの作成
ビジュアルテストを実行して`output.json`ファイルが生成されたら、CLIまたはインタラクティブプロンプトを使用してビジュアルレポートを作成できます。
CLIの使用
次のコマンドを使用して、レポートを生成できます。
npx wdio-visual-reporter --jsonOutput=<path-to-output.json> --reportFolder=<path-to-store-report> [--logLevel=debug]
必須オプション
- `--jsonOutput`：ビジュアルテストサービスによって生成された`output.json`ファイルへのパス。
- `--reportFolder`：生成されたレポートが保存されるディレクトリ。
オプション
- `--logLevel`：詳細なログを取得するには`debug`に設定します。特にトラブルシューティングに役立ちます。
例
npx wdio-visual-reporter --jsonOutput=/path/to/output.json --reportFolder=/path/to/report --logLevel=debug
これにより、指定されたフォルダーにレポートが生成され、コンソールにフィードバックが表示されます。例えば
✔ Build output copied successfully to "/path/to/report".
⠋ Prepare report assets...
✔ Successfully generated the report assets.
インタラクティブプロンプトの使用
または、次のコマンドを実行してプロンプトに答えて、レポートを生成することもできます。
npx @wdio/visual-reporter
プロンプトに従って、必要なパスとオプションを入力します。
レポートデモ
レポートの例を見るには、GitHub Pagesデモをご覧ください。
ビジュアルレポートの概要
ビジュアルレポーターは、ビジュアルテスト結果を整理されたビューで提供します。各テスト実行について、次を行うことができます。
- テストケース間を簡単に移動し、集計結果を確認します。
- テスト名、使用されたブラウザ、比較結果などのメタデータを確認します。
- 視覚的な違いが検出された場所を示す差分画像を表示します。
この視覚的な表現により、テスト結果の分析が簡素化され、視覚的な回帰を特定して対処することが容易になります。
CI統合
Jenkins、GitHub ActionsなどのさまざまなCIツールをサポートする取り組みに着手しています。ご協力いただける場合は、Discord - ビジュアルテストまでお問い合わせください。
