guide visual regression testing with visual testing tools
この包括的なガイドでは、視覚的回帰テストについてすべて説明しています。 Applitools、Percy、Screenerなどの無料および商用のビジュアルテストツールのレビューも含まれています。
ソフトウェアでの視覚的回帰テストまたは視覚的テストは、アプリケーションのユーザーインターフェイスの視覚的側面がユーザーにとって適切であると思われるかどうかを検証する品質保証アクティビティです。視覚的検証テストとも呼ばれます。
これは、正しいデータとコンテンツがアプリケーションのフロントエンドに表示されているかどうかを確認することを目的としています。さらに、ユーザーインターフェイスとUI全体に存在する各視覚要素のレイアウトと外観も検証します。
学習内容：
視覚的回帰テスト
レイアウトの正確さについて話すとき、それは画面上の各要素の位置、形状、およびサイズが正しいことを意味します。要素は互いに重ならないようにし、表示したり非表示にしたりしないでください。
ここでの視覚的要素は、画像、ページ、ページの一部、または画像の一部を指す場合がある。
外観の検証とは、視覚要素のフォント、色、明るさ、コントラスト、密度、テクスチャ、視覚的重み、グラフィックスなどが適切に見える必要があることを意味します。
視覚的回帰テストとは何ですか？
回帰テストは、ソフトウェアに導入された変更が、以前は正常に実行されていたものを壊さないことを確認します。
視覚的テストに関しては、視覚的回帰テストにより、ソフトウェアで変更が行われたときに、スタイルの問題が発生しないことが保証されます。アプリケーションは、以前と同じように見栄えがするはずです。
視覚的な回帰テストツールは、現在のUIのスクリーンショットをキャプチャし、元のスクリーンショットと比較します。したがって、視覚的回帰テストでは、履歴の違いを調べます。コードを変更した後でも、さまざまなブラウザでWebページが期待どおりにレンダリングされることを確認します。
以下に示すのは、自動化されたツールを介して実行されたビジュアル回帰テストのスクリーンプリントです。
(画像 ソース )
今日の継続的インテグレーションの実践では、アプリケーションがバージョンからバージョンへと開発され、ブラウザー間で進行するときに、新しい変更によってレイアウトが混乱しないことを確認するために、視覚的な回帰テストが非常に重要になります。
多くの組織では、視覚的な回帰テストを使用して特定のWebページのバージョンを記録し、反復ごとにどのように変化するかを文書化しています。
視覚的検証テストの重要性
アプリケーションの機能がどれほど正しく機能していても、優れたユーザーインターフェースとユーザーエクスペリエンスを提供できない限り、顧客にとっては役に立ちません。
最近では、UI（ユーザーインターフェイス）だけでなく、UX（ユーザーエクスペリエンス）にも重点を置いています。より優れたユーザーエクスペリエンスを提供することを目標としている場合、より魅力的なビジュアルデザインがユーザーにとってより使いやすいと認識されるため、ビジュアルテストが非常に重要になります。
アマゾンのウェブサイトから以下の例を見てみましょう：
(画像 ソース )
上の画像では、テキストと画像が重なっていて、適切に配置されていないことがわかります。これは、顧客がWebサイトで意図したアクションを完了できないため、ユーザーエクスペリエンスが低下する可能性がある視覚的なバグの例です。
ビジュアルデザインは、さまざまな方法でユーザーエクスペリエンスを形作ります。
例えば、
- 優れたビジュアルデザインは、信頼と信頼を築くのに役立ちます。
- ブランドイメージを強化します。
- 読みやすさに影響します。
- 画面上で視覚的なバランスを形成します。
- アクションに向けてユーザーをガイドします。
- 特定のページ要素に注意を向けるように目を説得します。
また、現在、オペレーティングシステム、Webブラウザー、画面解像度、およびデバイスは多種多様であるため、これらの可能な組み合わせのそれぞれでUIが正しく表示されるようにすることが重要になります。
UIのわずかな歪みでも、ビジネスの損失につながる可能性があります。視覚的なバグは、ユーザーにとって迷惑で不快なものであり、ユーザーに不便をもたらす可能性があります。
あなたが銀行業務に従事していて、オンラインモバイルバンキングアプリケーションを顧客に提供するとします。
一部の顧客から、誰かの口座に送金したいときに必要な情報をすべて入力した後、 '参加する' 画面上のボタンとこれは彼らにとって苛立たしい経験です。
問題を調査すると、Androidモバイルの特定の画面解像度で送信ボタンが非表示になっていることがわかりました。そのため、その特定の画面サイズのAndroid携帯を使用しているすべての顧客が送信ボタンを表示できませんでした。
そのため、この場合、アプリケーションの機能は正常に機能していましたが、視覚的なバグのため、ユーザーはアプリで意図したアクションを完了できませんでした。この例は、アプリケーションを顧客に提供する前に、考えられるすべての構成でアプリケーションの視覚的側面をテストすることがいかに重要であるかを示しています。
視覚的検証テストが強く推奨されるいくつかの領域は次のとおりです（ブランドに直接影響するため）。
- モバイルアプリ
- モバイルウェブ/レスポンシブウェブ
- マーケティングウェブサイト
- コンテンツ管理システム
- 航空会社、旅行、銀行などの消費者システム。
その重要性を考えると、企業はビジュアルテストにかなりの労力とお金を費やす必要があります。既存の開発者テストと組み合わせて使用すると、開発ライフサイクルの初期段階で視覚的な問題を検出するのに役立ちます。
視覚的テストの方法とプロセス
開発者またはテスターとして、私たちはアプリケーションの機能のテストに取り組むことがよくあります。手動または自動化されたツールを使用して、アプリケーションが期待どおりに機能しているかどうかを確認します。このような機能テストは、アプリケーションの円滑な動作を保証するために非常に重要です。
ただし、これに視覚的なテストを追加すると、全体的なテストが大幅に改善されます。したがって、このテストは機能テストと組み合わせて行われることがよくあります。
幅広い構成にわたるアプリケーションの視覚的テストの課題に対応するために、いくつかのテスト方法とプロセスがあります。視覚的な検証テストをサポートするために利用できるツールもたくさんあります。
一般に、視覚的検証テストには、コードベースと構成ベースの2つの主要なアプローチがあります。ビジュアルテストツールも、これら2つのアプローチに基づいて分類されます。
手動または自動で実行できます。特定の課題が伴うため、完全に手動にすることも完全に自動化することもできません。一般に、手動アプローチと自動アプローチの組み合わせが推奨されます。
以下に示すのは、一般的に従う3つの異なる視覚的テスト方法です。
チームは、ニーズに応じてこれらのオプションのいずれかを選択できます。
ネットワークエンジニアのインタビューの質問250+質問と回答の説明pdf
＃1）専用のビジュアルテストを作成する ：これは、視覚的な検証を完全に制御できるため、最も推奨される方法です。また、このアプローチを使用すると、適度な労力でテストを作成できます。しかし、はい、最初からテストを作成する必要があり、かなりの時間が必要になります。
＃2）既存の機能テストに視覚的なチェックポイントを挿入します。 この方法では、アプリケーションの機能を検証するためのテストがすでにあり、これらのテストの間にいくつかの視覚的なチェックを追加して、ページを検証します。
もちろん、この方法はテストカバレッジを制限しますが、視覚的なテストを挿入する簡単な方法であり、既存の機能テストコードを利用できます。
＃3）既存のテストフレームワークに暗黙の視覚的検証を挿入します。 このメソッドは、数行のコードしか必要としないため、実装が非常に簡単です。ただし、この場合、一般的な検証も実行できるという制限があります。フレームワーク内の特定のコンポーネントを検証することはできません。
次に進むにつれて、手動および自動の視覚的テストについて説明します。また、ビジュアルテストツールとフレームワークについても詳しく確認します。
手動視覚テスト
ソフトウェア会社は、視覚的なテストを実行するための2つのオプション、つまり手動テストと自動テストに直面しています。手動の視覚的テストについて詳しく見ていきましょう。
手動テストは時間がかかり、費用がかかり、エラーが発生しやすい場合がありますが、インターフェイスデザインの主観的な性質により、すべてのシナリオの正確さを把握するための自動テストを行うことができない場合がよくあります。そのため、手動テストと自動化テストのバランスを選択する必要がある場合があります。
また、人間による手動テストの主な利点の1つは、テストの範囲外を見ることができます。自動化テストでは、その範囲内にある問題のみをキャプチャできますが、手動テストでは、人間のテスターは、UIで正しくないように見える他の外観上のバグやその他のものを見つけることもできます。
手動テストは実際のユーザーアクションに近いため、実際のユーザーがアプリケーションを操作するときに一般的に明らかになるレイアウトのバグや設計の問題をキャプチャできます。
UIが不安定な場合は、アプリケーション開発の初期段階で手動テストを行うことができます。また、その場で迅速に検査する必要がある場合のアドホックテストにも役立ちます。
手動の視覚的検証テストでは、テスターは視覚要素の外観とレイアウトを手動でチェックする必要があります。これには、現在のスクリーンショットを撮り、それらをベースラインのスクリーンショットと手動で比較してギャップを特定することが含まれる場合があります。
手動テストを行うもう1つの効果的な方法は、コンポーネントエクスプローラーを使用することです。ここでは、テスト状態を定義し、エクスプローラーを使用して状態とコンポーネントを選択し、画面で確認します。そのようなツールの1つに、UIコンポーネントを個別に開発できるReactStorybookがあります。
この方法により、テスターはコンポーネントの手動テストを実行し、コンポーネントがどのようにレンダリングされるかを確認し、正常に機能しているかどうかを確認できます。
手動テストの手順：
- アプリを閲覧し、既知の適切なベースラインスクリーンショットをキャプチャします。
- 後で、アプリの最新バージョンから別のスクリーンショットのセットを撮ります。
- 次に、これらのスクリーンショット（ベースラインと現在）を手動で比較して、視覚的なバグを特定します。
自動ビジュアルテスト
自動視覚テストは、ユーザーインターフェイスが意図したとおりに視覚的に表示されるかどうかを自動的に確認する方法です。
視覚的テストの自動化の利点は、長期的なコスト効率を提供し、手動テストよりも高速で、人的エラーを排除し、ピクセル単位で完璧な視覚的テストを提供できるため、より正確であり、再利用可能で透過的であり、チームの誰もが簡単かつ簡単にアクセスできます。
自動視覚テストの制限のいくつかは、多額の先行費用が発生する可能性があり、すべての変更に対応するためにテストのメンテナンスに多大な労力を費やす必要があることです。
自動化テストでは、スクリーンショットテストが実施されていない限り、範囲は狭くなります。また、組織が自動化テストツールについて学ぶのに時間がかかるため、学習曲線が急になります。
安定したUIで頻繁に発生する変更に対処するために回帰ビジュアルテストを実行する必要がある場合は、自動化を使用することをお勧めします。自動テストは、スクリーンショットの視覚的な比較にも役立ちます。
自動化されたスクリーンショットの比較により、視覚的なテストの精度が大幅に向上し、ROIが向上します。自動化されたスクリーンショットの比較では、人間の目や手動の比較では検出できないバグをキャプチャできます。また、複雑なユーザーストーリーのエンドツーエンドのテストにも役立ちます。
自動テストに利用できるさまざまなオープンソースおよび商用ツールがあります。
次の画像は、任意のプログラミング言語を使用して視覚的な検証を自動化する方法を示しています。
(画像 ソース )
Visual TestAutomationの一般的なワークフローを以下に示します。
(画像 ソース )
上記のワークフロー図に示されているように、自動ビジュアルテストには4つのステップが含まれます。
ステップ1 ：このステップでは、アプリケーションとテストを実行し、スクリーンショットをキャプチャする必要があります。
ステップ2 ：このステップでは、自動化ツールがこれらのスクリーンショットをベースラインのスクリーンショットと比較します。ベースラインのスクリーンショットは通常、以前のテスト実行で撮影され、テスターによって証明された画像です。
ステップ3： ツールが画像比較の結果を取得すると、見つかったすべての違いを強調するレポートを生成します。
例えば、以下の画像は、角度のあるアプリケーションの違いを強調するテスト自動化ツールの1つを示しています。
ステップ4 ：最後のステップで、テスターはレポートを確認し、それがバグであるか有効な変更（誤検知）であるかについて、それぞれの違いを確認します。これに基づいて、ベースライン画像が更新されます。
最初のテスト実行では、ベースラインイメージがありません。したがって、最初の実行で取得された画像は、通常、ベースライン画像として扱われます。次の実行以降、スクリーンショットと比較されます。
自動ビジュアルテストのベストプラクティス
- 誤検知を無視するのに十分スマートなツールを選択してください。ツールはアンチエイリアシング、ピクセルオフセットなどを処理できる必要があり、これらの理由でテストに失敗することはありません。
- テスト自動化は、動的で移動するコンテンツを処理できる必要があります。
- エラー率やしきい値の構成に依存しないでください。重要なのは、人間がその違いを理解できるかどうかだけです。それはユーザーエクスペリエンスに影響を与えますか？
- 自動化アルゴリズムは、ページの構造を分析でき、レイアウト比較を実行できる必要があります。
- 個々のコンポーネントではなく、完全なUIページの検証を優先します。これにより、より多くのカバレッジが提供されます。特定のコンポーネントのみを検証する場合、予期しないバグを見逃す可能性があります。
自動テストツールとビジュアルテストフレームワーク
今日、自動化された視覚的テストのために市場で利用可能なツールの多種多様な（ほぼ30以上）があります。これらのツールのいくつかはオープンソースですが、いくつかは商用です。これらのツールのほとんどは同じように機能しますが、ターゲットオーディエンスごとに異なるワークフローを追求します。
フロントエンド開発者の場合、ビジュアルテストに関係するフレームワークには2つのタイプがあります。まず、テストを記述して実行できるテストランナーが必要です。次に、ユーザーの操作を複製するには、ブラウザー自動化フレームワークが必要です。これらの2つのフレームワークは、まとめてビジュアルテストコードと呼ばれます。
これらのテストフレームワークの助けを借りて、開発者はテキストの入力やボタンのクリックなどの実際のユーザーアクションを模倣するコードを作成します。テストコードには、関連するポイントでスクリーンショットを撮るコマンドがあります。テストが初めて実行されると、スクリーンショットの初期セットが取得されます。
これらのスクリーンショットは、アプリケーションに変更が加えられた場合の比較のベースラインとして機能します。ベースラインが確立されると、開発者はバックグラウンドでコードを実行します。変更が見つかると、変更のスクリーンショットがキャプチャされます。
テストランナーは、このスクリーンショットをそのコード領域のベースラインスクリーンショットと比較します。画像間に違いが見つかった場合、テストは失敗と見なされ、視覚的なバグが報告されます。
テストコード全体が実行されると、レポートが自動的に生成されます。このレポートは、ベースライン画像とは異なるすべてのスクリーンショット画像を確認するために、人間のテスターによって手動で確認されます。一部のツールは、実際のスクリーンショットと予想されるスクリーンショットの違いを強調するために差分画像を生成します。
違いがコードの問題によって引き起こされている場合、開発者はその問題を修正してコードを再実行できます。違いがアプリケーションのUIの必要な変更によって引き起こされた場合、開発者はそのスクリーンショットを確認し、ベースラインスクリーンショットを更新して、将来のテストに合格できるようにします。
ビジュアルテストには、無料ツールと有料ツールの両方が含まれています。ツールについて詳しく説明しましょう。
トップビジュアルテストツールのリスト
コード/スクリプトベースのオープンソースおよび無料ツール
以下に、オープンソースで無料で利用できるコードベースの視覚的検証ツールのリストを示します。
- PhantomCSS （UJs CapserJs）
- FBSnapshotTestCase （XCTestを使用）
- ジェミニ （JS DSLを使用）
- 針 （Pythonを使用）
- Rspecページの回帰 （カピバラを使用）
- Pix-Diff （JSと分度器を使用）
- Selenium Visual Diff （JavaとWDを使用）
- Vizregress （.NETおよびWDを使用）
- VisualCeption （PHPとCodeCeptionを使用）
- スペクター （JS DSLを使用）
構成ベースのオープンソースおよび無料ツール
参考までに、オープンソースで無料で利用できる構成ベースの視覚的検証ツールを以下に示します。
- BaskstopJS
- dpxdtMake –描写
- CSSCritic
- Grunt Photobox
- VIFF
- 緑ネギ
- レプラコーン
- CSSビジュアルテスト
- スナップして比較
- Grunt-Vigo
- ガレンフレームワーク
- オートモーション
上記の各ツールについては詳しく説明しませんが、最適なツールについて簡単に説明します。
ファントムCSS は、視覚的な検証のための非常に人気のあるオープンソースツールの1つです。 4,768個のGitHubスターがあります。自動化された視覚的回帰テストを支援します。 CasperJSを使用してスクリーンショットを取得し、Resemble.jsを使用してベースラインのスクリーンショットと比較します。
(画像 ソース )
RGBピクセルの違いに基づいて画像の違いを生成します。このツールは、UIが予測可能な場合にのみ役立ちます。
FBSnapshotTestCase このカテゴリで人気のあるもう1つのツールです。 880個のGitHubスターがあります。
構成済みのUIViewまたはCALayerをキャプチャし、render InContext：と呼ばれるメソッドを使用して、そのコンテンツのイメージスナップショットを取得します。このイメージをソースコードリポジトリに保持されている「参照イメージ」と照合し、2つのスナップショットが一致しない場合はテストに失敗します。
BackstopJS は、構成ベースのツールのカテゴリーにおける主要なツールです。 CSSカーブボールをキャッチします。これは、視覚的な回帰テスト用の自動化ツールであり、DOMスクリーンショットを経時的に照合することでレスポンシブWebUIをテストできます。
これは、ブラウザー内レポートUI、統合されたDockerレンダリング、JUnitレポート、CLIレポートなど、いくつかの優れた機能を備えた使いやすいツールです。
Galenフレームワークは、視覚的検証テスト用の有名なオープンソースフレームワークの1つでもあります。このツールを使用すると、自動化された方法でWebアプリのレイアウトとレスポンシブデザインをテストできます。
(画像 ソース )
このフレームワークは、セレングリッドで適切に実行されます。
Visual TestAutomationで利用できるいくつかの商用ツールとフレームワークについて今すぐ説明しましょう。
商用ツール
＃1）Applitools
これは、自動視覚テストおよび視覚回帰テストで非常に人気のある商用フレームワークの1つです。このツールは、AIを活用した認知ビジョンを提供します。人工知能を使用して、エンドツーエンドの視覚的なテストと監視を支援します。
Applitoolsを使用すると、コードを記述せずに、または最小限のコードで、すべてのプラットフォームと構成にわたって数百のUIコンポーネントを自動的にテストできます。 40を超えるテストフレームワークと言語をサポートしています。
また、ビジュアルテストケースをCI / CDパイプラインに簡単に統合できるDevOpsプロセスもサポートしています。このツールを使用すると、カスタムのビジュアルレポートを作成することもできます。
このフレームワークは、Sony、SAP、MasterCard、PayPalなどの一部のトップ企業で採用されています。非常に好意的なカスタマーレビューもあります。
ベンダーは、このフレームワークの3つのバージョン、つまり、スターター、エンタープライズパブリッククラウド、エンタープライズ専用クラウドを提供しています。価格については、ベンダーに問い合わせる必要があります。
ウェブサイト： Applitools
無料のデータ復旧ソフトウェアウィンドウズ10
＃2）クロスブラウザテストビジュアルテスト
Crossbrowsertestingは、テストプロセス全体のためにSmartBearによって開発されたWebテストプラットフォームです。このツールは、視覚的テストと視覚的回帰テストをカバーしています。
このツールが提供するスクリーンショットテスト機能は、全ページのスクリーンショットをキャプチャし、視覚的なバグの発見と視覚的な不整合の追跡にすばやく役立ちます。スクリーンショットテストを開始するには、URLを入力し、いくつかのブラウザを選択する必要があります。
スクリーンショットテストは、ほとんどのデスクトップデバイスと一般的なモバイルデバイスで利用できます。ブラウザの解像度を組み合わせて、デスクトップブラウザとモバイルの向きで動的なレスポンシブテストを行うことができます。スクリーンショットテストでは、各構成の3つのビュー、つまりウィンドウ、フルページ、フルページのクロムレスをキャプチャします。
テスト結果をすばやくフィルタリングして、視覚的なバグを確認できます。ライブテストにジャンプして、視覚的な欠陥をデバッグまたは修正することもできます。このソフトウェアが提供するローカル接続ツールを使用して、ローカル環境と開発環境をテストできます。
視覚的回帰テストの場合、スクリーンショットテストを正常に実行したら、毎日、毎週、または毎月スケジュールすることができます。このツールは、テスト結果の通知も送信します。
このツールには自動比較エンジンがあり、さまざまな構成で同じページの自動スクリーンショットをキャプチャします。ここから、ベースラインブラウザーを選択し、強調表示されたレイアウトの違いを一緒に評価できます。
また、テストをより強力にするためのいくつかの高度なオプションも提供します。これらのオプションには、基本認証、ログインプロファイル、Seleniumスクリプト、スクリーンショットの遅延、電子メールの送信、固定要素の非表示などが含まれます。
また読む= >> Seleniumでスクリーンショットを撮る方法
これは高価なツールです。ただし、無料トライアルもご利用いただけます。このツールのライブテストバージョンの価格は月額29ドル、自動テストの価格は月額60ドル、無制限テストの価格は月額100ドルです。
ウェブサイト： クロスブラウザテスト
＃3）パーシービジュアルテスト
パーシーは、自動視覚テストのための強力なツールの1つです。ビジュアルテストを統合、実行、レビューすることができます。統合は、テスト自動化フレームワーク、CI / CDサービスを介して、またはアプリケーションを介して直接行うことができます。
統合後、アプリケーションとコンポーネントに必要なビジュアルテストの実行を開始できます。ビジュアルテストが開始されると、Percyツールはさまざまなブラウザとレスポンシブ幅全体でUIスクリーンショットを抽出します。次に、ピクセルごとのベースライン比較を行い、UIの関連する視覚的な変更を識別します。
スクリーンショットがレンダリングされたら、視覚的な問題がないか確認できます。
このツールによって提供されるピクセルごとの差分と応答性のある差分は、優れた視覚的カバレッジを提供します。また、スナップショット安定化機能は誤検知を最小限に抑えます。
これは有料のツールです。ただし、無料の試用版も提供しています。有料版には、エッセンシャル、ビジネス、エンタープライズの3つのフレーバーがあります。 Essentialバージョンの価格は月額29ドル、Businessバージョンの価格は月額849ドル、Enterpriseバージョンは必要に応じてカスタム作成されるため、価格はそれに応じて異なります。
ウェブサイト： パーシービジュアルテスト
＃4）Screener.io
これは、クラウドでリアルタイムにテストを記録および実行できる自動テストツールです。テストフローは、コーディングを必要とせずに簡単に自動化できます。さまざまなプラットフォーム間でのUIの不整合を自動的に検出します。また、ストーリーブックコンポーネントのテストもサポートしています。
これにより、同じテスト実行で機能テストと組み合わせて視覚的なテストを実行できるため、全体的なテストカバレッジが向上します。 screener.ioを使用している企業には、Yammer、Microsoft、uberなどがあります。
このツールのスターターパックの価格は月額約249ドル、パフォームパックの価格は月額499ドル、エンタープライズパックの価格は要件に基づいたカスタム価格です。
ウェブサイト： Screener.io
＃5）最終テスト
endtestは、機械学習の助けを借りてコードレス自動化テストをサポートするUIテストプラットフォームです。自動化されたテストをすばやく作成し、クラウドに直接保存して実行することができます。また、テストを記録できるChrome拡張機能もあります。
このツールには、ランダムテストデータの生成、高度なアサーション、自動バックアップ、ジオロケーション、ライブビデオ、スクリーンショットの比較など、多くの機能があります。
ウェブサイト： エンドテスト
結論
このチュートリアルでは、ソフトウェアアプリケーションが画面サイズ、モバイルデバイス、オペレーティングシステム、画面解像度などの複数の構成で正常に動作する必要がある今日のシナリオで、視覚的検証テストがいかに重要であるかについて説明しました。
優れたユーザーエクスペリエンスが必要な場合は、視覚的な検証テストが機能テストと同じくらい重要です。視覚的テストと機能テストを組み合わせると、幅広いテストカバレッジを提供できます。
視覚的な検証テストに利用できる、さまざまなオープンソースおよび商用のツールとフレームワークがあります。このチュートリアルでは、いくつかの最高のツールについて説明しました。これらのツールは、自動視覚テストと視覚回帰テストに役立ちます。
幸せな読書！