3つのシンプルなステップ
複雑なセットアップも学習曲線もなし。結果だけ。
スクリーンショットをキャプチャ
ScanUにウェブサイトのURLを追加。ChromeとFirefoxのブラウザを自動的に起動し、デスクトップ、タブレット、モバイルの6つの異なる解像度でフルページスクリーンショットをキャプチャします。
- ブラウザと解像度の並列キャプチャ
- ビューポートだけでなくフルページのスクリーンショット
- 初回実行時の自動ベースライン設定
- 不正利用防止のための安全なURL検証
変更を比較
ピクセルパーフェクトな比較エンジンがすべてのスクリーンショットをベースラインと分析。高度な画像差分アルゴリズムを使用して、ノイズをフィルタリングしながら最小の視覚的変更も検出します。
- Pixelmatchによるピクセル単位の比較
- プロジェクトごとに設定可能な差分しきい値
- アンチエイリアシングの自動ノイズフィルタリング
- ハイライトされた差分可視化
通知を受け取る
ビジュアルリグレッションが検出されると即座にメール通知を受信。直感的な比較ビューアで変更を確認し、ワンクリックで各差異を承認または拒否。
- リグレッションに対する即時メールアラート
- テスト完了時のサマリーメール
- ワンクリックで承認または拒否
- デザイン変更時に新しいベースラインを設定
完全なプロセス
ScanUでのビジュアルリグレッションテストの仕組みをより詳しく見てみましょう。
プロジェクトを作成
無料で登録して最初のプロジェクトを作成。ウェブサイトのURLを入力し、オプションで差分しきい値を設定。セットアップはこれだけです。
最初のテストを実行
「テスト実行」をクリックしてスクリーンショットのキャプチャを開始。最初のテスト実行が自動的に将来の実行と比較されるベースラインになります。
スクリーンショットをキャプチャ
実際のブラウザ(ChromeとFirefox)を起動し、URLに移動して、複数の解像度でフルページスクリーンショットをキャプチャ。すべてのスクリーンショットはEU内に安全に保存されます。
変更して再テスト
ウェブサイトを更新したら、別のテストを実行。ScanUが新しいスクリーンショットをベースラインと比較し、視覚的な差異を計算します。
差異を確認
並べて比較ビューアを使用して、検出された変更を確認。オーバーレイモードと差分のみモードを切り替えて異なる視点で確認。
承認または拒否
意図的な変更を承認してベースラインを更新。意図しないリグレッションを拒否して修正のフラグを立てます。ビジュアルテストワークフローの完全な制御。
こんな方に最適
ScanUはあらゆる規模のチームがビジュアルバグを検出するのを支援します。
フリーランス開発者
クライアントに見られる前にCSSバグを検出。オーバーヘッドなしでプロフェッショナルなQAでクライアントに印象を与えましょう。
小規模チーム
専任QAリソースなしでワークフローにビジュアルテストを追加。チーム全員が変更を確認・承認できます。
デジタルエージェンシー
一箇所で複数のクライアントプロジェクトを管理。ビジュアルリグレッションレポートで作業品質を証明。