Storybook＋Loki 差分インスペクター
Lokiのbaselineとlatest PNGを読み込み、差分をハイライトしたヒートマップと統計をブラウザ内で確認・書き出します。
Lokiが生成したbaselineとlatestのPNGファイルを選択してください。レポートを解凍し、同じストーリーのペアを指定します。
ハイライトカラー
概要
Lokiのビジュアルリグレッション用スクリーンショットをブラウザ上で確認し、差分をハイライトしながらメトリクスとヒートマップを取得できます。CLIは不要です。
使い方
- Lokiの実行結果を解凍し、ペアになっているbaseline/latestのPNGをアップロードします。
- ノイズとシグナルを分けられるように差分閾値とハイライトカラーを調整します。
- ヒートマップと差分サマリーを確認し、フィードバック用に注釈付きPNGをダウンロードします。
ユースケース
- Pull Requestをマージする前にStorybookのビジュアルリグレッション差分をレビューする。
- 意図したUI変更かを確認するためにヒートマップをデザイナーと共有する。
- フルツールチェーンがない環境でもLokiの失敗を素早くトリアージする。
TIPS
- baselineとlatestは同じビューポートサイズとデバイスピクセル比で取得しましょう。
- ストーリー内のタイムスタンプや動的データを固定すると誤検知が減ります。
- スクリーンショットの寸法がずれた場合は再キャプチャしてからレビューしましょう。