画像キャプチャのベストプラクティス

Eggplant Functionalは画像ベースのテスト自動化ツールであるため、画像を正しくキャプチャすることは、テストの成功に不可欠です。このページと次のビデオでは、テストをより成功させるための画像キャプチャのプラクティスについて説明します。

画像キャプチャの設定

ビューアウィンドウでは、キャプチャ領域を移動できます。移動したい場所をクリックするか、キャプチャ領域をドラッグするか、矢印キーを押します。矢印キーのみを押すと、キャプチャ領域は指定された方向に1ピクセルずつ移動します。キャプチャ領域を10ピクセルずつ移動するには、Shiftキーを押しながら矢印キーを押します。

To resize the Capture Area、キャプチャ領域の端または角をドラッグするか、Alt+矢印キー（Macの場合はOption+矢印キー）を押します。Shiftキーを同時に押すと、キャプチャ領域のサイズを10ピクセル単位で変更できます。

To adjust the image scale 画面上のアクションをより適切に表示するには、 をクリックして画像サイズを拡大し、 をクリックして画像サイズを縮小します。

注記

キャプチャした画像の初期ビューは1:1のスケールで表示されます。

To move the image hot spot、Ctrlキー（Macの場合はCmdキー）を押しながら目的の場所をクリックするか、ホットスポットをドラッグするか、矢印キーを押します。Shiftキーも併用すると、ホットスポットを10ピクセル単位で移動できます。

良い画像の特定

Eggplant Functionalスクリプトの堅牢性を最大限に保つ簡単な方法は、インターフェース要素を一意に識別するのに十分なコンテンツを含む画像をキャプチャすることです。例えば、デスクトップ上のフォルダの画像は次のようになります。

Folder with desktop background

画像にデスクトップの一部をキャプチャする場合、一致させるにはデスクトップの色が同じであることが常に重要です。デスクトップの色は常に同じであると期待できますが、この例では、フォルダアイコンが選択されると色が濃くなってしまいます。

背景に濃い青色の領域がある選択されたフォルダー

もちろん、選択した背景を設定したフォルダの画像もキャプチャできますが、アイコン自体は変更されないため、これは不要な手間です。デスクトップを背景にせずにアイコンをキャプチャすれば、1枚の画像で両方の状態をカバーできます。

背景なしのフォルダ

この画像はあなたにとってはフォルダアイコンにあまり似ていないかもしれませんが、形はEggplant Functionalにとって特別重要ではありません。画像の内側が画面上の他のものと一致しない限り、端は重要ではありません。

キャプチャエリアが大まかに必要なサイズと位置にあるとき、矢印キーを使って微調整することができます：

• キャプチャエリアを一度に1ピクセルずつ動かすには、矢印キーを押します。
• キャプチャエリアのサイズを一度に1ピクセルずつ調整するには、Alt+矢印キー（MacではOption+矢印）を押します。
• ホットスポットを一度に 1 ピクセルずつ移動するには、Ctrl + 矢印キー (Mac の場合は Cmd + 矢印キー) を使用します。

これらのショートカットにShiftを追加すると、調整を10ピクセル単位で行うことができます。

ホットスポットの使用

ホットスポットは、Eggplant Functionalがクリック、ダブルクリック、移動先などのマウスアクションを対象とするポイントです。また、ビューワーウィンドウで見つけた画像の位置を記述するためのポイントでもあります。

ホットスポットの位置は、キャプチャした画像の左上隅を基準とした (x, y) オフセットとして定義されます。例えば、幅20ピクセル、高さ10ピクセルの画像をキャプチャし、ホットスポットを画像中央のデフォルト位置に置いた場合、ホットスポットの位置は (10, 5) と報告されます。これは、左上隅から右に10ピクセル、下に5ピクセルの位置です。

相対的なホットスポット

ホットスポットは画像に関連付けられますが、必ずしも画像の「内側」にある必要はありません。例えば、テキストボックス内のテキストを選択する必要がある場合、そのテキストが何であるかを事前に知っていなければ、画像マッチングを行うことはできません。代わりに、テキストボックスのラベルの画像をキャプチャし、実際のテキストボックスが始まる位置から数ピクセル離れた位置にホットスポットを設定することができます（下の画像を参照）。

Eggplant Functional Viewerウィンドウのホットスポットを移動しました

ビューワーウィンドウで見たテキストボックスのラベルの画像がキャプチャされ、ホットスポットはキャプチャした画像の外部、テキストボックスが表示される予定の位置に移動しています。

もう1つの例として、何十もの国が表示される可能性のある国のポップアップメニューがあります。各可能性の画像をキャプチャする代わりに、ホットスポットを実際のポップアップメニュー上に持ってくるCountryのラベルをキャプチャすることができます。ポップアップメニューは画像に含まれていないので、表示される国は画像マッチに影響を与えません。

ホットスポットの移動

ビューワーウィンドウ、Capture Imageパネル、スクリプト内の画像プロパティリスト、およびスイートエディターのImagesペインで、画像のホットスポットを変更することができます。

ホットスポットを移動する方法はいくつかあります：

• 画像の中や周りでCtrl+クリックします。（MacではCmd+クリック。）
• ホットスポットを示す赤い十字線をCtrl+ドラッグします。（MacではCmd+ドラッグ。）
• Ctrl+矢印キーを押して、ホットスポットを1ピクセルずつ移動します。（MacではCmd+矢印。）
• Shift+Ctrl+矢印を押して、ホットスポットを一度に10ピクセル移動します。（MacではShift+Cmd+矢印。）
• ビューワーウィンドウで、キャプチャエリアをリサイズして、ホットスポットを画像の中心に戻します。

最適な検索タイプの選択

画像を保存するとき、Capture Imageパネルは検索タイプの選択肢を提供します。Eggplant Functionalは、画像に最適な検索タイプを自動的に検出しようとしますが、場合によってはデフォルトの設定を上書きすることが必要かもしれません。Eggplant Functionalのスクリプトが、以前に見つけた画像を突然見つけられなくなった場合、ImagesペインのInfoパネルで検索タイプを変更してみてください。検索タイプの変更は即時に保存され、次回スクリプトがその画像を呼び出すときに新しい検索タイプが使用されます。

重要

表示される検索タイプは、一般設定でShow all search typesを有効にしているかどうかによります。デフォルトでは、背景に対して寛容、テキスト用に平滑化、画像に適応の3つの検索タイプが表示されます。このチェックボックスを選択すると、Eggplant Functionalはピクセルに対して精密、要素に対してパルス、平滑かつパルスも表示します。精密とパルスは、それらが表示されていなくても、Eggplant Functionalがデフォルトの検索タイプとして選択することができます。

背景に対して寛容

通常、Eggplant FunctionalはTolerant of Backgroundの検索タイプを選択します。寛容設定はほとんどの画像に対してうまく機能し、画像が見つかったときに画像の色に多少のバリエーションがあることを許容します。良い例は、半透明のウィンドウやメニューです。以下の画像では、右側のメニューを通して背景のオブジェクトが見えます。寛容設定により、Eggplant Functionalは、メニューの背後の画面が画像をキャプチャしたときと異なる状態にあっても、メニューアイテムを正確に特定することができます。

透明度のないメニューの外観

Precise to Pixel を通してデスクトップ項目が表示されるメニュー

テキスト用に平滑化

この検索タイプは、主にMacのテキストのアンチエイリアスにより、微妙に外観を変えることがあるテキストやボタンを処理するように設計されています。Macシステムに対してテストを行っている場合、Smooth（またはSmooth and Pulsing）検索タイプを使用すると、テキストを含む画像に大きな違いを生むことができます。

画像に適応

この検索タイプは、柔軟な検索アルゴリズムを使用して個々のピクセルを分析し、それに加えて全体的な類似性を見てから一致を判断します。その効果は、人間がそれを見るように、画像全体を見ることです。これにより、解像度とスケールが変わるときに、異なるデバイス間で画像を一致させることが格段に容易になります。したがって、クロスデバイスやクロスプラットフォームのテストを行うときは、画像スケーリングと一緒にAdaptive to Imageの検索タイプを使用することを検討するかもしれません。

ピクセルに対して精密

Precise to Pixelの検索タイプは、SUT上の画像が一致すると考えるために非常に高い精度を必要とします。この設定は、コントラストが低い画像や微妙な色の違いを持つ画像に有用です。

要素にパルスを送る

一部のMacのバージョンのSaveボタンなどのパルスボタンも、Eggplant Functionalによって自動的に検出することができます。Pulsing設定により、Eggplant Functionalは画像に"マスク"を使用して、変化するピクセルをフィルタリングします。

パルスのライトエンド パルスの軽い終わり

パルスのダークエンド パルスのダークエンド

パルスマスクが適用されたキャプチャ画像 パルスマスクを適用したキャプチャ画像

平滑化とパルス

テキスト用に平滑化に似て、Smooth and Pulsingの検索タイプは、特にMac上でのテキストのアンチエイリアスを考慮に入れます。

注記

上記の検索タイプ―画像に適応を除く―は、それぞれ以前は次のように呼ばれていました：寛容、平滑、精密、パルス、平滑とパルス。

ツールチップとその他の一時的なGUI要素のキャプチャ

Freeze Screenオプションを使用すると、ツールチップや他の一時的な画面上のオブジェクトの画像を簡単にキャプチャすることができます。Freeze Screenを使用するには：

1. Viewerウィンドウで、キャプチャしたい要素を表示するSUTの位置にマウスを移動します。
2. Control（MacではCommand）を押してキャプチャモードに切り替えます。
3. 画面をフリーズさせるには、Ctrl+5（MacではCmd+5）を押すか、Control > Freeze Screenに移動します。ツールチップやその他の一時的な画像はControlメニューを経由してFreeze Screenに移動するのにかかる時間で消えてしまう可能性があるため、キーボードショートカットの使用を推奨します。
4. キャプチャエリアをキャプチャしたいオブジェクトに移動します。
5. Capture Imageをクリックするか、キャプチャエリアをダブルクリックして画像をキャプチャします。

スクリプト実行中にツールチップを維持する

ツールチップをキャプチャしようとすると、マウスを移動させると問題が生じることがあります。なぜなら、マウスが離れるとすぐにツールチップが消えてしまうからです。この動作を解消するために、shouldRepositionMouseグローバルプロパティのデフォルト値はnoとなっています。この設定は、Eggplant Functionalが最初の検索で探している画像を見つけられない場合、マウスを画面の右下隅に移動しないことを意味します。

要素の上にマウスを置くと、別の要素が隠れてしまうことがある場合、カーソルが自動的に移動するように設定することが適切かもしれません。この変更を適用するには、shouldRepositionMouseグローバルプロパティをyesに設定します。これにより、Eggplant Functionalの動作が変更され、最初の検索で探している画像を見つけられない場合、マウスを画面の右下隅に移動します。この変更により、画像がカーソルによって隠れていないことが確認できます。

グラフィックソフトウェアを使用して画像を比較する

Eggplant Functionalが特定の画像を見つけることができない場合、そしてImage Update Panelを使用して検索タイプとタイミングの問題を排除した場合、SUTが画像を一貫して表示していない可能性があります。

これらの稀なケースでは、キャプチャした画像とSUTが表示している画像とを詳細に比較することが有益（または少なくとも情報提供）なことがあります。

以下に概説した手順では、これらの画像の違いをピクセル単位で視覚的に確認する方法を説明しています。ここではAdobe Photoshop Elementsを使用していますが、通常使用するグラフィックスプログラムにこの手法を適応することができます。

1. 両方の画像を開く。グラフィックスプログラムで保存された画像と、この画像のために失敗したスクリプトの実行結果のScreen_Errorファイルを開きます。
2. 画像を重ね合わせる。保存した画像をコピーして、Screen_Errorファイルの上に貼り付けます。Photoshopでは、コピーした画像は自動的に別のレイヤーに貼り付けられます。
3. 画像を整列する。Moveツールを使用して、保存した画像をScreen_Errorファイル内の対応する位置にドラッグします。次に、拡大して矢印キーで微調整して画像をさらに整えます。
4. 差異を強調表示する。レイヤーパレットで、ブレンドモードのポップアップメニューをクリックし、Differenceを選択します。
5. 差異を評価する。完全に一致するピクセルは黒で表示されます。他のピクセルについては、Infoパネルで各画像のRGB値を確認します。3つの値の中で最も大きな差が、Eggplant Functionalがそのピクセルを両方の画像で一致するとみなすために許容しなければならない許容範囲です。例えば、保存された画像のピクセルのRGB値が(99, 99, 135)で、Screen_Errorの同じピクセルが(100, 100, 150)の場合、検索許容範囲は少なくとも15（青の値の差）でなければなりません。

キャプチャした画像の再利用

スクリプト作成時には、同じ画像をスイートやスクリプト内で何度も使うことがよくあります。例えば、ファイルメニューを何度もクリックしたり、OKボタンがあるダイアログをいくつか開いたりする場合などです。

以下に、以前に保存した画像をスクリプトに挿入する4つの簡単な方法を紹介します：

• Alt+クリック（MacではOption+クリック）: ビューアウィンドウのツールバーで、コマンドボタンをAlt+クリック（MacではOption+クリック）します。画像をキャプチャする代わりに、コマンドはUse Imageパネルを開き、既存の画像を選択できます。クリックしたコマンドはスクリプトに追加され、SUTで実行されます。
• 挿入ポップアップメニュー: スクリプトエディタで、挿入ポップアップメニューからコマンド（またはコマンドがない場合はAdditional Image）を選択し、ファイルブラウザで画像を選択します。ここで選択するコマンドはSUTで実行されません。
• ドラッグアンドドロップ: スイートエディタのImagesペインからスクリプトに画像をドラッグアンドドロップします。
• コピー＆ペースト: スクリプトの他の部分からコピー＆ペーストします。また、引用符で囲んだ画像名を常に入力することもできます。