UI テストの AI イメージ比較
紹介
従来、ユーザー インターフェイス (UI) のテストは手動で行われ、手動による介入は、見逃しがちな UI 画面間の違いを検出するために必要でした。UI 画面の数が増えると、マニュアル テスト エラーの確率が高くなります。また、フォント、色、画面サイズ、解像度などの特定の側面が複雑さを増し、非効率の向上に寄与します。中~大規模なアプリでテストする場合、 検証する画像の量が非常に大きくなり、完了までに数時間かかります。UI テストでイメージ比較で AI を使用すると、イメージの手動比較が不要になります。また、インターネット上で AI API のサービスを使用する場合と同様に、より高速に実行され、リソースが少なくなります。
画像比較ソリューション
画像比較を考える最初のアイデアは、ピクセル比較(AIなし)です。 ピクセル単位の画像比較は、比較された画像とベースライン画像が絶対に非正規の場合にのみ成功すると見なされます。場合によっては、ピクセル単位の比較は、比較された画像の内容が同一であるように見えても失敗することがあります(フォント、色、サイズ、明るさが原因で,…). この方法は、特定の場合にのみ役立ちます。
研究者は、ファジーピクセル比較、ヒストグラム比較、相関比較、画像マスクなど、多くの比較アルゴリズムを発明しています,… 各アルゴリズムは、異なる目的のために使用することができます。
このページでは、Scale InVariant 機能変換 (SIFT) アルゴリズムを使用したイメージ比較ソリューションを紹介し、各画像を特徴ベクトルのコレクションに変換します。したがって、キーポイント検出比較手法を使用すると、ピクセル単位で同一の一致が保証できない場合に、ベースラインイメージとテスト対象画像の間で信頼性の高いマッチングを実行できます。
このアプローチの最後には、このアプローチを使用して、古い SAP UI (ECC) と新しい SAP UI (HANA) の 2 つのイメージを比較する簡単なデモとソースコードがあります。
SIFT と キーポイント
SIFTは2004年にブリティッシュコロンビア大学D.Loweによって初めて発表されました。今SIFTのファンクショナルはOpenCV(オープンソースコンピュータビジョンライブラリ)で利用可能です - リアルタイムで最適化されたコンピュータビジョンライブラリ。
ポイントは、金利ポイントと同じものです。これらは空間的な位置、または画像の中で何が面白いか、何が目立つのかを定義する画像のポイントです。これらは、イメージの回転、収縮、移動、歪みなど、不変です。図 1 は、回転およびスケールの画像でのキーポイントの照合の視覚化を示しています。
キーポイントとSIFTの詳細を知りたい場合は、ここにそれについての短くて便利な文書があります。
当社のソリューション
キーポイントを使用して画像を比較するソリューションを紹介します。ノイズがないので、キーポイントを使って簡単な画像を比較すれば簡単です 。この場合、キーポイントと比較結果は簡単です。しかし、ほとんどの比較ケースは、それほど単純ではありません。したがって、キーポイントと比較する前にノイズを低減する必要があります。
ノイズを減らす方法はたくさんあります。しかし、ほとんどの画像にはテキストとアイコンが含まれています。したがって、Keypointを比較する前に、テキストとアイコンをクリアすることをお勧めします。画像を前処理した後、結果は少し正確です。画像を比較する完全なプロセスには、グレースケールへの変換、テキストとアイコンのクリア、画像の比較などがあります。Image 2 は、Keypoint を使用した実際のケースイメージ比較の全ステップを示しています。次に、完全な手順について詳しく説明します。
1.画像をグレースケールに変換する
まず、手順 2 での Optical 文字認識 (OCR) のパフォーマンスを向上させ、イメージ ファイルのサイズを小さくするために、イメージをグレースケールに変換します。グレースケール表現がカラー画像を直接操作するのではなく、記述子を抽出するためにしばしば使用される主な理由は、グレースケールがalgorithmを単純化し、計算要件を削減することです。
いくつかの特定の複雑なケースでは、OCRを行うために画像を白黒のカラー画像に変換する必要があります。しかし、ほとんどの場合、グレースケールで十分です。
2.クリア テキストとアイコン
イメージ 3 で見ることができるように、テキスト (アイコンも) に多くのキーポイントが含まれ、キーポイントの照合が遅く、誤って実行されます。したがって、キーポイントの数を減らすために、画像内のテキストをクリアする必要があります。その後、画像比較はより速く、より慎重になります。
私たちは、写真のテキストをクリアし、背景色に置き換える多くの方法があります。
● 同一のテキストをクリアします。両方のイメージにテキストが存在する場合は、背景色でクリアします。
● 定義済みのアイコンをクリアします。 背景色のアイコンが定義済みのアイコン セットに属している場合は、そのアイコンをすべてクリアします。
● 定義済みのテキストをクリアします。背景色のテキストが定義済みのテキスト セットに属している場合は、そのテキストをすべてクリアします。
● 背景色がわかっている場合は、アルゴリズムに提供します。わからない場合は、algorithm はヒューリスティック(周囲の色を使用)に基づいて背景色を計算します。
3.ポイントの比較
最後のステップは、キーポイントを使用して画像を比較することです。すでに画像からノイズを除去していますが、結果が100%に一致することはほとんどありません。結果を正確にしない always ノイズがあります (イメージ 4: 単純な画像のキーポイントマッチングを参照)。アルゴリズムのしきい値を指定する必要があります。しきい値より大きいすべての一致は、一致と見なされます。比較結果は、キーポイントを選択する方法によって異なります。マッチング結果を改善するために、エッジのキーポイントを画像 4 の赤い点として選択する必要があります。
デモ
上記のソリューションを使用してデモを実装しました。デモはで利用可能ですギットハブApache ライセンス 2.0
画像比較デモ
紹介
このページでは、ページ1で導入されたSIFTアルゴリズムを用いたAI画像比較の簡単なデモを紹介します。
このページでは、テストアーキテクト、OpenCV、Googleクラウドビジョンを使用して画像比較ソリューションを実装します。また、このデモのしくみと、その実行方法についても詳しく説明します。また、ページの最後に「このデモの実行方法」についてのビデオもあります。
ソースコード
ソースコードは、Apacheライセンス2.0の下で私たちのGithubリポジトリで利用可能です
現在、Python をプログラミングラングアゲとして使用しています。しかし、他のプログラミング言語を自分で使うこともできます。
このデモでは、ベースラインイメージ ecc.png (SAP ECC F110 トランザクションコード) とターゲットイメージ hana.pn g (SAP Hana F110 トランザクションコード) を 80% の類似度で比較します。
入力と出力
インプット：
● ベースラインイメージ: ソース画像 (ecc.png このデモでは)
● ベースラインキーポイント:ソース画像 のイメージキーポイント。 キーポイント修正ツールを使用して最適なキーポイントを選択することは、テスターの経験に基づいています。たとえば、 ecc.pngの赤い円のキーポイントを次のように選択します。
● ターゲット画像:ソース画像と比較するターゲット画像(このデモでは.png
● パーセント: キーポイントを使用して比較する場合の類似のパーセント (このデモでは 80)
アウトプット：
● 2 つの画像のキーポイントが%より近い場合は渡します。
ステップス
ステップ1 - 画像をグレースケールに変換する
手順 2 で光学式文字認識 (OCR) のパフォーマンスを向上させるために、イメージをグレースケールに変換します。また、画像サイズを縮小し、GoogleビジョンAPIの実行が高速化します。このデモでは、opencvライブラリを使用して画像をグレースケールに変換します。ソースとターゲットのイメージは、OCRを使用する前に opencv を使用してグレースケールに変換されます (手順 2):
ステップ2 - 画像内の同一のテキストをクリア
特徴点の数を減らすために、画像内のテキストをクリアします。これにより、SIFT アルゴリズムがより正確に実行されます。
私たちは、OCRのためのGoogleクラウドビジョンを使用しています。確かに、テッセアクトなどの他の OCR ツールを使用できます。しかし、Googleクラウドビジョンはより正確であり、クラウド上で動作するため、ローカルリソースを使用しません。Googleは、Googleの膨大なコンピューティングリソースを使用して、多くの画像を使用してコンピュータvisionモデルを訓練するという努力をしてきました。Google クラウド ビジョン OCR を使用して、このデモの 2 つの画像の OCR 結果を無料で 試すことができます。
次に、背景色を使用して 2 つの図の同一の段落をクリアします。テキストの背景色がわかっている場合は、パラメータとして入力できます。背景色がわからない場合は、ヒューリスティックを使用して計算します。このステップのアウトプットは、GoogleクラウドビジョンOCRの結果に依存します。たとえば、現在の Google クラウド ビジョン API では、この手順の出力は次のようになります。
注: ノイズを除去するために、次のような他の機能も提供します(ただし、このデモには存在しません)。
● イメージを白黒に変換する(グレースケールの代わりに)
● 背景色を使用して定義済みのアイコンまたは画像を削除する
● 背景色を含む正確なテキストをクリアする
ステップ3 - キーポイントを使用して画像を比較する
最後のステップは、キーポイントを使用して2つの画像を比較することです。キーポイント比較を行うには 、TestArchitectとそのキーポイント修正ツールを使用します。次の図にノイズが表示されます。 これにより、類似性は 100% と等しくありません。そこで、デモを実行する際にはノイズを除去し、類似性のパーセントを提供する必要があります。
業績
2 つのイメージのキーポイントが予想パーセントよりも類似している場合は渡し、それ以外の場合は失敗を返します。TestArchitect でのこのデモの結果は 、次のように報告されます。
デモを実行する
デモを実行するには、GithubリポジトリのREADME.mdの手順に従ってください。
ビデオ
