Buddy Visual Tests

Buddy Visual Testsは、レンダリング済みUIスナップショットを承認済みベースラインと比較し、マージ前のビジュアルリグレッションを検出します。Buddy Pipelines、GitHub Actions、ローカル実行に対応。

概要

Buddy Visual Tests は、機能テストでは検出できない UI 変更を捉えるためのビジュアルリグレッションテスト機能です。アプリのレンダリング済みスナップショットを承認済みベースラインと比較し、レイアウトのずれ、スタイルのずれ、欠落要素、レスポンシブの破綻など、確認が必要な差分を強調表示します。

この製品は、ゼロから新しいテストアサーションを書かずに配信パイプラインへビジュアルチェックを組み込みたいチーム向けに設計されています。Buddy Pipelines、GitHub Actions、またはローカルで実行でき、Buddy ではこの機能は Preview と説明されています。

主な機能

ピクセルベースのリグレッション検出

レンダリング済みスナップショットを取得し、承認済みベースラインと比較することで、マージ前にレイアウトのずれ、スタイルのドリフト、欠落要素、レスポンシブの破綻を表面化します。

スイートベースのテスト整理

何をレンダリングし、どのように比較するかをスイート単位で定義できます。ブラウザーとデバイスの組み合わせや、差分しきい値も含まれます。

バリアント別ベースライン

セッション全体だけでなくブラウザーとデバイスのバリアントごとにスナップショットを比較するため、モバイルとデスクトップの結果を個別に確認できます。

承認主導のベースライン更新

差分を確認して変更済みスナップショットを承認または却下します。承認された変更は、そのブランチにおける後続実行の新しい参照になります。

CI とローカルでの実行

Visual な変更がレビューされるまで Buddy のパイプラインを一時停止するか、Buddy の外部でも同じワークフローを GitHub Actions やローカル実行で利用できます。

複数の取得経路

チームがすでにテストコードを持っているか、スクリプト不要のテストを行いたいかに応じて、URL またはサイトマップ収集、E2E プラグイン、Storybook アップロードを使い分けられます。

適用場面

デプロイ前のパイプライン品質ゲート
UI 変更によってレンダリングが予期せず変わった場合に Visual Tests を使ってリリースを停止します。承認アクションにより、誰かが差分を確認してセッションを承認または却下するまで Buddy パイプラインを保留できます。
エージェントや開発者による UI 変更の人手レビュー
エージェントまたは開発者が加えた変更に対してビジュアルチェックを実行し、実際に変わったピクセルを確認します。機能的には正しい変更でも、見た目のリグレッションを導入してしまう場合に有用です。
ライブページ向けのスクリプト不要テスト
リポジトリにテストコードを追加したくない場合は、URL またはサイトマップ収集を使用します。Buddy は URL からライブページを直接スナップショットし、承認済みベースラインと比較できます。
既存のテストと Storybook のワークフロー
既存の Playwright、Cypress、Selenium、Puppeteer のワークフローに Visual Tests を接続するか、コンポーネントライブラリやデザインシステム向けに Storybook ビルドをアップロードします。
レスポンシブおよびクロスブラウザーのレビュー
ブラウザーおよびデバイス別のスナップショットを比較して、モバイル、タブレット、または別のブラウザーエンジンでのみ現れる問題を検出します。

Pros and Cons

Pros

機能テストでは見逃しうる、レイアウトのずれや非表示/欠落コンテンツなどのビジュアル問題を検出できます。
E2E プラグイン、Storybook、URL またはサイトマップ収集を含む複数の入力経路をサポートします。
Buddy Pipelines、GitHub Actions、ローカル実行で動作します。
ブランチ対応のベースラインを使用するため、あるブランチでの承認が別のブランチの参照状態を自動的に変更することはありません。
人がセッションを確認して承認するまで、パイプラインを一時停止できます。

Cons

この機能は Preview 中であるため、チームはまだ一般提供前のものとして扱う必要があります。
ソース資料では、Visual Tests の個別料金モデルは示されておらず、Buddy の広範な料金プランと Preview の注記のみが記載されています。

FAQ

Visual Tests はどのようにベースラインを決定しますか？

Visual Tests は、各スナップショットごと、および各ブラウザー/デバイスのバリアントごとに解決されたベースラインと比較されます。フィーチャーブランチでは、最初の実行はそのブランチの祖先履歴にある最新の承認済みベースラインと比較し、その後の実行は新たに承認されたスナップショットと比較されます。

Visual Tests はどこで実行できますか？

ソース文書では Buddy Pipelines と GitHub Actions が示されており、Visual Tests はローカルでも実行できると記載されています。ホームページでは、bdy コマンドを使う CLI ベースのワークフローも説明されています。

Visual Tests はどのようにセットアップしますか？

Visual Tests はスイートとして設定します。Buddy では、TEST → Visual Tests に移動してスイートを追加し、E2E テストプラグイン、Storybook アップロード、またはスクリプト不要の URL/サイトマップ収集のいずれでスナップショットを取得するかを選びます。ドキュメントによると、その後スイートを Buddy Pipelines、GitHub Actions、またはローカルマシンに接続できます。

visual テストのセッションとは何ですか？

セッションは、Visual Tests の 1 回の実行です。スイートで有効化されたブラウザー、システム、デバイスの組み合わせ全体で、その実行中に取得されたスナップショットが含まれ、差分が見つかった場合はレビュー待ちになります。

Visual Tests に個別の料金設定はありますか？

料金ページでは、Buddy に無料プランと有料プランがあることが示されており、Visual Tests のページでは Preview 中は Visual Tests が無料であると記載されています。ドキュメントには、Visual Tests に固有の別料金やクォータモデルは示されていません。

Quick Facts

カテゴリ: ビジュアルリグレッションテスト
プラットフォーム: Buddy CI/CD。GitHub Actions とローカル実行にも対応
ステータス: Preview
主な利用者: UI 変更を出荷する開発者とエージェント
ソースドメイン: buddy.works
料金の संकेत: Preview 中は無料。Buddy には無料プランと有料プランもあります