Appium を使用したビジュアル回帰テストの開始
公開: 2023-09-17
今日のソフトウェアでは、複数のプラットフォームやデバイスにわたるシームレスなユーザー エクスペリエンスが求められています。 この分野で最も困難な側面の 1 つは、アプリケーションの視覚的な整合性を維持することです。 そこで、ビジュアル回帰テスト (VRT) が活躍します。これは、他の方法では気付かない可能性のある視覚的なバグや不一致を見つけるための合理的な方法を提供します。 VRT を始めようとしている人向けに、Appium は、幅広いプラットフォームでこの種のテストを自動化するための堅牢でスケーラブルなフレームワークを提供します。
さらに、LambdaTestのようなサービスは、視覚的な回帰テストのための AI を活用したテスト オーケストレーションとテスト実行ソリューションを提供するため、チームが独自のテスト インフラストラクチャを設定して管理する必要がなくなります。このクラウド アプローチは、さまざまな実際のブラウザーやデバイスへのオンデマンド アクセスを提供し、複数の環境での同時テストを可能にし、テストの実行時間を短縮し、Web アプリケーションの外観と機能の一貫性を確保します。 LambdaTest は、詳細なテスト レポートと、問題を迅速に特定して解決するための一般的なテスト フレームワークとの統合も提供します。
この記事では、テスト戦略を次のレベルに引き上げられるように、Appium を使用して VRT を始めるための基本について説明します。
ビジュアル回帰テストとは何ですか?
ビジュアル回帰テストは、アプリケーションに加えられた変更がアプリケーションのユーザー インターフェイス (UI) の視覚的な表示に悪影響を及ぼさないことを確認するために採用される検証手法です。 その主な目的は、レイアウトと視覚要素が事前に定義された期待に準拠していることを確認し、それによって完璧な視覚的なユーザー エクスペリエンスを保証することです。 これらの視覚チェックには、ボタン、メニュー、コンポーネント、テキストなどの位置、輝度、コントラスト、色などのさまざまな属性が含まれます。 この方法は、ビジュアル テストまたは UI テストと呼ばれることもあります。
ビジュアル回帰テストはどのように機能しますか?
本質的に、ビジュアル回帰テストは、変更前の UI のスナップショットをキャプチャし、その後に取得したスクリーンショットと比較することによって機能します。 その後、不一致があれば、テスト エンジニアによる検査のために強調表示されます。 実際には、視覚的な回帰テストを実施するためのさまざまな手法があります。 最もよく使用されるもののいくつかを以下にリストします。
手動による視覚テスト
この方法では、特殊なツールを使用せずに UI を手動で検査します。 デザイナーと開発者は、リリースごとに時間をかけてページを視覚的に検査し、視覚的な欠陥を積極的に探します。 このアプローチは、アプリケーション全体に適用すると手間がかかり、人的エラーが発生しやすい可能性がありますが、特に開発の初期段階でのアドホックまたは探索的な UI テストには役立ちます。
ピクセルごとの比較
この手法では、2 つのスクリーンショットをピクセル レベルで精査し、不一致があればテスト エンジニアに警告します。 ピクセル差分としても知られるピクセル比較は、すべての潜在的な問題を特定できますが、人間の目には知覚できず、ユーザビリティに影響を与えない多くの重要でない違い (レンダリングのばらつき、アンチエイリアシング、パディング/マージンの違いなど) にもフラグを立てる可能性があります。 ）。 テスト エンジニアは、テストを実行するたびに、これらの「誤検知」を注意深く選別する必要があります。
DOM ベースの比較
この比較方法は、状態変更の前後でドキュメント オブジェクト モデル (DOM) を分析し、相違点を特定することに基づいています。 DOM 内のコード関連の変更を強調表示するのには効果的ですが、真の視覚的な比較は提供されません。 コードは変更されないが UI が進化する場合 (動的コンテンツや埋め込みコンテンツなど)、またはコードは変更されるが UI が静的なままである場合、偽陰性または偽陽性が生成されることがよくあります。 その結果、テスト結果に一貫性がなくなる可能性があり、視覚的な欠陥を見逃さないように慎重に検討する必要があります。
ビジュアルAIの比較
Visual AI を使用したビジュアル回帰テストでは、コンピューター ビジョンを利用して、人間と同様の方法で UI を認識します。 十分に訓練された AI は、人間の観察者が気づくであろう差異のみにフラグを立てることでテスト エンジニアを支援し、ピクセルと DOM の比較テストでよくある「偽陽性」の問題に対処するという面倒な作業を排除します。 さらに、Visual AI は動的コンテンツを評価し、予期しない領域または地域でのみ問題を特定できます。
ビジュアル回帰テストを実行する理由
このセクションでは、アプリケーションでビジュアル回帰テストを実行する最も確かな理由について説明します。 それでは、読み続けてください…。
視覚的な一貫性を確保する
ビジュアル回帰テストは、モバイル アプリの UI とビジュアル要素が、さまざまなバージョン、デバイス、プラットフォーム間で一貫性を保っていることを確認するのに役立ちます。 この一貫性は、シームレスなユーザー エクスペリエンスを提供するために重要です。
設計変更の検証
アプリの設計変更が行われた場合、ビジュアル回帰テストにより、これらの変更が正しく実装されているかどうか、および意図しない視覚的な問題が発生していないかどうかを検証できます。
フィードバック ループの高速化
視覚的な回帰テストにより、開発者や設計者に迅速なフィードバックが提供され、開発サイクルの早い段階で問題に対処できるようになります。 これにより、重大な視覚的欠陥が生産現場に到達する可能性が減少します。
ユーザーエクスペリエンスの向上
視覚的な不具合や不一致は、ユーザー エクスペリエンスに悪影響を及ぼし、アプリの評判を傷つける可能性があります。 視覚的な回帰テストを通じてこれらの問題を把握することで、ユーザーの満足度を向上させることができます。
UI ライブラリの回帰テスト
アプリでサードパーティの UI ライブラリまたはフレームワークを使用している場合、ビジュアル回帰テストは、これらのライブラリの更新によって不要なビジュアル変更が導入されないことを確認するのに役立ちます。
Appium を使用してビジュアル回帰テストを開始する手順
Appium を使用したビジュアル回帰テストでは、アプリケーションのユーザー インターフェイスのビジュアル要素を比較して、アプリの異なるバージョン間での意図しない視覚的な変更を検出します。 Appium を使用してビジュアル回帰テストを開始する手順は次のとおりです。
ステップ 1: Appium とテスト環境をセットアップする
まず、システムに Appium がインストールされ、セットアップされていることを確認します。 好みのプログラミング言語 (Java、Python など) の Appium クライアント ライブラリも必要です。 さらに、テスト環境に必要な依存関係とツールをインストールします。
ステップ 2: テスト イメージを準備する
ビジュアル回帰テストを実行する前に、アプリの画面の予想される外観を表すベースライン画像のセットが必要です。 さまざまなデバイス/エミュレーターでアプリを実行し、各画面のスクリーンショットを撮ることで、これらのベースライン画像をキャプチャします。 これらの画像をプロジェクト内の指定されたフォルダーに保存します。
ステップ 3: テスト スクリプトを実装する
Appium クライアント ライブラリを使用してテスト スクリプトを作成し、スクリーンショットのキャプチャと視覚的な比較の実行プロセスを自動化します。 テスト スクリプトは次のことを行う必要があります。
- Appium ドライバーを初期化して、特定のデバイス/エミュレーターでアプリを起動します。
- アプリの画面内を移動し、UI の変更をトリガーするアクションを実行します。
- Appium のスクリーンショット機能を使用してスクリーンショットをキャプチャします。
- キャプチャしたスクリーンショットを比較のために別のフォルダーに保存します。
Appium Java クライアントを使用して Java でコードがどのように表示されるかを示す例を次に示します。
```ジャバ
インポート io.appium.java_client.AppiumDriver;
インポート io.appium.java_client.MobileElement;
io.appium.java_client.android.AndroidDriverをインポートします。
org.openqa.selenium.remote.DesiredCapabilities をインポートします。
java.net.URLをインポートします。
パブリック クラス VisualRegressionTest {
public static void main(String[] args) throws Exception {
// Appium ドライバーに必要な機能を設定します
DesiredCapabilities のキャップ = new DesiredCapabilities();
caps.setCapability("プラットフォーム名", "Android");
caps.setCapability("デバイス名", "エミュレータ-5554");
caps.setCapability("appPackage", "your.app.package");
caps.setCapability("appActivity", "your.app.activity");
// Appium ドライバーを初期化します
AppiumDriver<MobileElement> driver = new AndroidDriver<>(new URL("https://localhost:4723/wd/hub"), caps);
// アクションを実行し、スクリーンショットをキャプチャします
// ...
// 比較のためにスクリーンショットを保存します
// ..
// ドライバーを閉じます
driver.quit();
}
}
「」
ステップ 4: 視覚的な比較ロジックを実装する
視覚的な回帰テストの場合、キャプチャされたスクリーンショットをベースライン画像と比較するメカニズムが必要です。 「Resemble.js」や「Pixelmatch」などの画像比較ライブラリを使用して、ピクセルごとの比較を実行し、視覚的な違いを計算できます。
ステップ 5: アサーションとレポート
テスト スクリプトでは、視覚的な比較の結果に基づいてアサーションを実装します。 視覚的な違いが特定のしきい値を超えた場合、テストは失敗したと見なされます。 検出された視覚的な違いなど、テスト結果の詳細を示すレポートを生成します。
ステップ 6: 継続的インテグレーション (CI)
ビジュアル回帰テストを CI/CD パイプラインに統合して、コードの変更または新しいリリースがあるたびにテストが自動的に実行されるようにします。 これは、開発プロセスの初期段階で視覚的な問題を発見するのに役立ちます。
ステップ 7: ベースライン イメージを維持する
アプリが進化するにつれて、期待される新しい外観に一致するようにベースライン画像を更新する必要があります。 これにより、正当な UI 変更がリグレッションと間違われることがなくなります。
ユーザーは LambdaTest で Appium を使用して VRT を実行するにはどうすればよいですか?
ユーザーが LambdaTest で Appium を使用してビジュアル回帰テストを実行する方法は次のとおりです。
LambdaTest アカウントのセットアップ
開始するには、LambdaTest プラットフォームでアカウントをまだ作成していない場合は作成します。 テスト インフラストラクチャにアクセスするには、このアカウントが必要です。 次に、上で説明したように、Appium とすべての依存関係を必ずインストールしてください。
テストスクリプトを書く
モバイル アプリケーションと対話するための Appium テスト スクリプトを開発します。 これらのスクリプトには、アプリ内を移動し、主要な要素または画面のスクリーンショットをキャプチャするステップが含まれている必要があります。
LambdaTest 機能の構成
Appium スクリプトを変更して、LambdaTest 固有の機能を含めます。 これには、目的のプラットフォーム (iOS/Android)、ブラウザのバージョン、デバイスの種類、LambdaTest 認証情報 (ユーザー名とアクセス キー) の指定が含まれます。
LambdaTest でテストを実行する
Appium テスト スクリプトを LambdaTest のプラットフォームにアップロードします。 LambdaTest は、Appium テストを実行できる Selenium グリッドを提供します。 このグリッドは、テスト用にさまざまな実際のデバイスとブラウザを提供します。
テストの実行
Web ベースのインターフェイスからテストをトリガーすることで、LambdaTest のグリッド上でテストを実行します。 LambdaTest は、指定されたモバイルデバイスとブラウザ上でテストを実行し、テストフローのさまざまなポイントでスクリーンショットをキャプチャします。
視覚的な比較
テストの実行後、LambdaTest はアプリケーションのさまざまな状態のスクリーンショットを生成します。 組み込みの視覚比較ツールを使用して、これらのスクリーンショットをベースライン画像と比較し、視覚的な矛盾を特定できます。
レビューと分析
VRT 結果を分析して視覚的な違いを特定します。 LambdaTest は、視覚的な変化に関する洞察を提供し、不一致が検出された領域を強調表示します。
自動レポート
LambdaTest は、テスト結果を長期にわたって追跡するための自動レポート機能を提供し、傾向の特定や、アプリケーションの外観に対する変更の影響の評価を容易にします。
Appium を使用したビジュアル回帰テストを成功させるためのベスト プラクティス
Appium を使用してビジュアル回帰テストを成功させるために従うべきベスト プラクティスをいくつか紹介します。
信頼できるデバイスとプラットフォームのマトリックスの選択
対象ユーザーが使用する最も重要な組み合わせを表すデバイス、オペレーティング システム、画面解像度のセットを選択します。 このマトリックスは、アプリがさまざまな構成にわたって一貫して見えるようにするために、さまざまなデバイスをカバーする必要があります。
参照画像のバージョン管理
さまざまなデバイスやプラットフォーム上でアプリの予想される外観を表す参照画像のバージョン管理されたリポジトリを保持します。 これらの参照画像は、回帰テスト中の比較のベースラインとして機能します。
安定した一貫したテスト環境
テスト実行ごとにテスト環境が一貫していることを確認します。 これには、異なるテスト実行間で同じ OS バージョン、Appium バージョン、ライブラリを使用することが含まれます。 テストでの誤検知につながる可能性のある不必要な変更を環境に導入することは避けてください。
UIの変更を機能の変更から分離する
視覚的な回帰テストを機能テストから分離します。 これにより、機能的な問題に気を取られることなく、視覚的な違いのみに焦点を当てることができます。
予想される視覚的な差異を許容する
視覚的な違いがすべてバグというわけではありません。 全体的なユーザー エクスペリエンスに影響を及ぼさない可能性のあるフォント レンダリングの変動など、UI の軽微な変更を考慮して、許容可能な視覚的な変動の許容レベルを設定します。
動的なコンテンツの処理
広告、ユーザー生成コンテンツ、リアルタイム データなどの動的コンテンツを適切に処理します。 これらの動的な変化を考慮して、これらの要素を比較から除外するか、参照イメージを更新する必要がある場合があります。
スマートな待機戦略
スマートな待機戦略を実装して、スクリーンショットをキャプチャする前にアプリの UI 要素が完全に読み込まれるようにします。 これは、不完全または部分的に読み込まれた画面によって引き起こされる誤検知を回避するのに役立ちます。
並列実行
可能であれば、複数のデバイスとプラットフォームにわたってビジュアル回帰テストを並行して実行します。 これにより、全体的なテスト時間が短縮され、潜在的な視覚的な不一致に対するより迅速なフィードバックが保証されます。
自動レポートと通知
自動レポートと通知を設定して、視覚的な不一致が検出されたときにチームに警告します。 これにより、迅速な対応が確保され、問題の修正にかかる時間を最小限に抑えることができます。
定期テストメンテナンス
アプリが進化するにつれて、参照画像を更新し、意図的な視覚的な変更に対応できるようにテストを調整します。 視覚的な回帰テストを定期的に確認して維持し、関連性が維持されていることを確認します。
調査結果のレビューと検証
違いを実際の問題として考慮する前に、スクリーンショットを手動で確認して、その違いが実際のバグなのか、それとも動的なコンテンツや外観の小さな変更によって引き起こされる単なる誤検知なのかを検証してください。
継続的改善
ビジュアル回帰テスト戦略を継続的に評価し、必要に応じて適応させます。 テスト プロセスの有効性を確保するために、最新のツール、ライブラリ、ベスト プラクティスを常に最新の状態に保ちます。
結論
意図しない変更を特定する場合でも、手動による QA 作業を軽減する場合でも、単にさまざまなデバイスや解像度間での視覚的な一貫性を向上させる場合でも、VRT はテストの武器として不可欠なツールです。 他のテクノロジーと同様、ニュアンスを習得するには時間がかかりますが、時間の節約、エラーの減少、よりシームレスなユーザー エクスペリエンスという点で得られるメリットは計り知れません。 では、なぜ待つのでしょうか？ 今すぐ VRT と Appium を使い始めて、モバイル アプリケーションのテストを次のレベルに引き上げましょう。