VizDiff

VizDiff はチームがすでに書いたストーリーを読み込むので、別のテスト群を維持する必要はありません。パイプラインが Storybook をビルドすると、CLI が出力をアップロードし、ツールがストーリーごとに 1 枚のスクリーンショットを描画します。Storybook にコンポーネントを足せば、余分な設定なしで次の比較に現れます。

このツールは GitLab のマージリクエストにコミットステータスを、GitHub のプルリクエストにチェックを送ります。GitLab ビジュアルテストと GitHub ビジュアルテストが同じ流れに乗ります。スクリーンショットの描画中、そして新規や変更分を誰かが見る間、このチェックは保留のままです。何も変わっていなければ自動で成功に変わるので、定型的なコミットは誰も手を動かさずに通ります。

変更のあったストーリーは、Old、New、Diff、2-Up の 4 つの表示を持つ比較ダイアログで開きます。Diff 表示はピクセル差分ツールとして動いたピクセルを目立たせ、2-Up モードは 2 つの版を並べます。矢印キーで次々に移れるので、1 つのブランチが数十のストーリーに触れるときに効きます。

承認済みのスクリーンショットは、次のビルドが比べられる基準になり、チーム全員が同じ一式で作業します。スクリーンショットは自分の S3 互換バケットに保存されるので、参照画像がインフラの外に出ることはありません。承認済みのコミットから分岐すれば、比較は意味を保ち、全部が新規に戻ることはありません。

VizDiff は MIT ライセンスのオープンソースプロジェクトとして配布され、api、worker、frontend の 3 サービスとして PostgreSQL と自分で用意するバケット上で動きます。バージョン付きのマルチアーキテクチャイメージが GitHub Container Registry に公開され、Docker Compose ファイルと Helm chart のどちらでも設置できます。ベンダーのアカウントも、席ごとの料金もありません。