.svg){kind=small}
現代のプロダクトは、第一印象に魅力がない時点で、約38%のユーザーが離脱してしまうと言われています。そのため、見た目の品質を保つための「ビジュアルテスト（Visual Testing）」は、開発に欠かせないプロセスとなっています。
特にPercyのようなツールを使えば、アプリケーションがアップデートされても見た目が崩れないか簡単に確認することができます。
本ブログでは、Percyを使ったビジュアルテストの仕組みや、その進化の過程、メリットなどを解説していきます。
ビジュアルテストの最大の目的は、ソフトウェア開発における「UIの一貫性」という課題を解決することでした。
当初、UIのテストは目視で確認する方法が主流でしたが、この方法では非常に手間がかかる上、ミスも起こりやすいという問題がありました。特に、インターフェースが複雑になるにつれて、作業の自動化が求められるようになりました。
こうした背景から誕生したのが、「Percy」です。Percyは、UIの変化を自動でキャプチャや比較、レビューをすることで、これまの課題を解決するために開発されました。創業者たちは、Percyが現代のCI/CDワークフローに組み込まれることで、UIのバグが本番環境にリリースされる前に検知できる仕組みになると考えていました。
そこからPercyは進化を遂げ、現在ではクロスブラウザテストや高度な画像比較（image diff）といった多くの便利な機能を備えるまでになりました。また、GitHubやSlackといった人気ツールとの連携にも対応しており、利便性が大きく向上しています。
こうした進化を経て、Percyはピクセル単位の完成度を求める開発チームにとって、信頼できるソリューションへと成長しました。
近年のアプリケーションは、ユーザーの要望や改善点を反映するため、頻繁にアップデートが行われています。しかしその一方で、意図しないビジュアルの崩れや視覚的なリグレッションが発生することがあります。
例えば、フォントの変更によってレイアウトがわずかに崩れるだけでも、ユーザー体験の質が下がり、ユーザーの離脱やブランドイメージの低下に繋がる可能性があります。
しかし、手動テストでは現代の開発スピードに追いつけず、従来の自動テストも機能面の確認が中心で、ビジュアルの確認まではカバーできていません。その結果、UIに関するバグが見逃されるケースが多くなっています。
UIの一貫性を保つことは見た目の問題だけではなく、ユーザーからの信頼を得て、完成度の高いプロダクトを提供することに繋がります。Percyはこのギャップを埋める存在として、視覚的なリグレッションを効率的に検出・修正する手段を提供しています。
Percyは、「アプリケーションのUIを様々な状態で撮影し、基準となる画像と比較する」という、非常にシンプルな原理に基づいています。ピクセルレベルでの違いを分析することで、見た目の変化やリグレッション（意図しない見た目の崩れ）を検出できます。
【主な機能】
・スナップショットの取得
テストフレームワークやCI/CDパイプラインの中で、アプリケーションの画面を自動で撮影します。
・スナップショットの比較
Percyのアルゴリズムは、新しく取得されたスナップショットと過去に記録された基準画像（ベースライン）を比較し、違いを検出します。
・変更のレビュー
視覚的な違い（ビジュアルディフ）はPercyのダッシュボード上に表示されるため、開発メンバーが変更内容を簡単に確認することができます。その結果、チーム全体で協力しながらUIの品質を保ち、一貫性のあるデザインを維持することが可能になります。
1. アカウントとプロジェクトを作成すると、そのプロジェクト専用のトークンが表示されます。
2. @percy/webdriverをインストールし、必要な依存関係を追加します。
3. WebdriverIOを使ってテストスクリプトを作成します。
4. 使用しているOSに応じて、Percyのトークンを環境変数として設定します。
・ECサイト
商品一覧、カート画面、購入手続き画面などが常に同じ見た目で表示されることを確認できます。
・SaaSプラットフォーム
新機能を追加しても、ダッシュボードの使い勝手や表示が変わらないように保つことができます。
・マーケティングページ
キャンペーンや地域別のページでも、ブランドイメージの一貫性を保つことができます。
【動的コンテンツへの対応】
・課題：頻繁に内容が変化するページでは、毎回違いが検出されるため、誤検出が起きやすくなります。
・解決策：Percyの機能を活用し、テスト中に動的なコンテンツ部分をマスキングすることで誤検出を防ぐことができます。
【初期導入のハードル】
・課題：既存の開発フローにPercyを組み込む際に、操作や設定に慣れるまでに時間がかかることがあります。
・解決策：詳細なドキュメントやサポート体制を整えることで、スムーズな導入を支援します。
AIを活用した変更検知の仕組みは、今後注目されている機能の一つです。
また、モダンなデザインシステムやコンポーネントベースの開発が主流となる中で、強化されたクロスブラウザテスト機能の重要性もますます高まっていくと考えられています。
このように、Percyを使ったビジュアルテストは、UIの品質を維持したいと考えるチームにとって、強力なサポートツールとなっています。
UIのスナップショットを自動で取得し、チームでの確認作業をスムーズにし、開発者やQAエンジニアが理想的なユーザー体験を提供できるよう支援します。
