画像キャプチャの最良の慣行

Eggplant Functional is an image-based test automation tool, so capturing images the right way is integral to the success of your tests. This page and the following video describe image capture practices that can make your tests more successful.

Setting Up Image Capture

ビューアウィンドウ内で、キャプチャエリアを移動できます。所望のロケーションをクリックし、そのキャプチャエリアをドラッグしてください。または矢印キーを押してください。 Pressing an arrow key alone moves the Capture Area one pixel in the given direction; to move the Capture Area in 10-pixel increments, hold down Shift as you press an arrow key.

To resize the Capture Area, drag the edges or corners of the Capture Area, or press Alt+arrow (Option+arrow on Mac) keys. 上記にShiftキーを追加すると、10ピクセル刻みでキャプチャエリアをサイズ変更できます。

To adjust the image scale to offer a better perspective for screen actions, click to enlarge the image size and to reduce the image size.

Note: The initial view of the captured image is shown at a 1:1 scale.

To move the image hot spot, Ctrl+click (Cmd+click on Mac) the desired location, drag the hot spot, or press the arrow keys. Add the Shift key to move the hot spot in 10-pixel increments.

優れた画像を同定する

An easy way to keep Eggplant Functional scripts as robust as possible is to capture images with just enough content to uniquely identify an interface element. 例として、このデスクトップ上のフォルダの画像をご覧ください。

FolderwithDesktop.png

デスクトップ背景付きのフォルダ

画像内にデスクトップの一部をキャプチャすると、一致は、そのデスクトップカラーと同一であるかに常に左右されます。 無地のカラーのデスクトップを利用すると選択したとしても、この例では、フォルダアイコンを選択すると背景に影ができます。

SelectedFolder .png

背景に暗いエリアがある選択済みフォルダ

もちろん、選択済み背景を持つフォルダの画像をキャプチャすることも可能ですが、アイコン自体に変わりはないのですから、これは不要な重複です。 背景にデスクトップなしのアイコンをキャプチャすれば、どちらの状態も1つの画像でカバーできます。

FoldernoDesktop.png

背景なしのフォルダ

This image might look less like a folder icon to you, but shape isn’t especially important to Eggplant Functional. 画像内部が画面上の他のものと一致しない限り、端部は重要ではありません。

When you have the Capture Area in roughly the size and position you need, you can use the arrow keys to fine tune it:

  • To nudge the Capture Area one pixel at a time, press the arrow keys.
  • To adjust the size of the Capture Area one pixel at a time, press Alt+arrow (Option+arrow on Mac) keys.
  • To nudge the hot spot one pixel at a time, use Ctrl+arrow (Cmd+arrow on Mac) keys.

これらのショートカットにShiftキーを加えると、10ピクセル刻みで調整できます。

Using the Hot Spot

The hot spot is the point that Eggplant Functional targets for mouse actions such as Click, DoubleClick, and MoveTo. また、ビューアウィンドウで見つかった画像のロケーションを説明するのに使用するポイントでもあります。

ホットスポットの位置は、キャプチャした画像の左上角に相対する(x, y)オフセットとして定義されます。 例えば、幅20ピクセル高さ10ピクセルの画像をキャプチャし、ホットスポットをそのデフォルトロケーションである画像中央のままにすると、そのホットスポットロケーションは(10, 5)、すなわち左上角から10ピクセル右および5ピクセル下と報告されます。

相対ホットスポット

ホットスポットは画像に関連付けられていますが、画像内部内部にあることが必須というわけではありません。 例えば、テキストフィールド内でテキストを選択しなければならない場合、テキストが何であるか事前に知っていない限り画像一致を行うことはできません。 代替方法として、テキストフィールドのラベルのみの画像をキャプチャして、実際のテキストフィールドが始まる場所へと数ピクセル分ずらしてホットスポットを設定することが可能です。

別の例として、何十もの国の一つを表示できる国ポップアップメニューが挙げられます。 可能な画像すべてをキャプチャするのではなく、ラベルCountry(国)をキャプチャして、実際のポップアップメニューのところにホットスポットを設定すればよいのです。 ポップアップメニューは画像に含まれていませんので、どの国が表示されても画像一致に影響が出ることはありません。

ホットスポットを移動する

You can change an image's hot spot in the Viewer window, the Capture Image panel, an image property list in a script, and in the Images pane of the Suite Editor.

There are several ways to move a hot spot:

  • Ctrl+click in or around an image. (Cmd+click on Mac.)
  • Ctrl+drag the red crosshairs that indicate the hot spot. (Cmd+drag on Mac.)
  • Press Ctrl+arrow keys to nudge the hot spot one pixel at a time. (Cmd+arrow on Mac.)
  • Press Shift+Ctrl+arrow to nudge the hot spot ten pixels at a time. (Shift+Cmd+arrow on Mac.)
  • In the Viewer window, resize the Capture Area to snap the hot spot back to the center of the image.

Choosing the Best Search Type

画像を保存すると、キャプチャ画像パネルで5つの検索タイプの選択肢が与えられます。 Eggplant Functional tries to automatically detect the appropriate search type for your image, but in some cases you might want to override the default setting.

The Precise search type requires a very high degree of precision to consider an image matched in the Viewer window. この設定はあまり色の差異がない、またはコントラストが低い画像で有用です。

Typically, Eggplant Functional chooses the Tolerant search type. Tolerant(寛容)設定はほとんどの画像に適しており、画像が見つかったときの色からの多少の変化を容認します。 良い例として、半透過性のウィンドウまたはメニューが挙げられます。 以下の画像では、背景のオブジェクトが右側のメニューで透けて見えるのが分かります。 The Tolerant setting allows Eggplant Functional to accurately locate menu items, even if the screen behind the menu is in a different state than it was when the image was captured.

非透過メニュー

基本のメニュー外観

透過メニュー

デスクトップアイテムが透けて見えるメニュー

Pulsing buttons, such as the Save buttons in Mac, can also be detected automatically by Eggplant Functional. The Pulsing setting causes Eggplant Functional to use a "mask" on the image to filter out the pixels that are changing.

光パルスボタン

明るめのパルス

暗パルスボタン

暗めのパルス

パルスマスク付きボタン

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

Smooth Search Types

The last two search types are Smooth and Smooth and Pulsing. These search types are designed to deal with text and buttons that sometimes change their appearance subtly, primarily due to Mac text anti-aliasing. If you are testing against Mac systems, using the Smooth (or Smooth and Pulsing) search type can make a big difference in your images that include text.

If an Eggplant Functional script suddenly fails to find an image that it found on a previous run, try changing the search type in the Info panel of the Images pane. 検索タイプの変更は即座に保存され、次回スクリプトがその画像を呼び出すときに、その新しい検索タイプが使用されます。

Capturing Tooltips and Other Transient GUI Elements

The Freeze Screen option makes it easy to capture images of tooltips and other on-screen objects that come and go quickly. To use Freeze Screen:

  1. In the Viewer window, move the mouse to a position in your SUT that brings up the element that you want to capture.
  2. Press Control (Command on Mac) to toggle into Capture Mode.
  3. To freeze the screen, press Ctrl+5 (Cmd+5 on Mac), or go to Control > Freeze Screen. We recommend using the keyboard shortcut, as tooltips and other transient images might disappear in the time it takes to navigate to Freeze Screen via the Control menu.
  4. Move the Capture Area to the object you want to capture.
  5. Click Capture Image or double-click the Capture Area to capture the image.

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

When you are trying to capture a tooltip, moving the mouse out of the way can cause a problem, because the tooltip disappears as soon as the mouse moves away. To remedy this behavior, the default value of the shouldRepositionMouse global property is no.This setting means that, if Eggplant Functional fails to find an image it is looking for on the first search, it does not move the mouse to the lower right-hand corner of the screen.

If hovering over an element obscures an element, it might make sense to have the cursor automatically get out of the way. To accomplish this change, set the shouldRepositionMouse global property to yes. Doing so changes Eggplant Functional's behavior such that if it fails to find an image it is looking for on the first search, it moves the mouse to the lower right-hand corner of the screen. This change makes sure the image is no longer being obscured by the cursor.

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

If Eggplant Functional continuously fails to find a particular image, and you have ruled out search type and timing problems using the Image Update Panel, it might be that the SUT is not displaying the image consistently.

これらのまれなケースでは、キャプチャした画像をSUTで表示されるものと詳細比較することが、有用である(または少なくとも情報を得るのに役立つ)場合があります。

以下で概説する手順で、これらの画像のピクセルごとの違いを見つける方法を説明します。 Adobe Photoshop Elements is used here, but you can adapt this technique for use with the graphics program you typically use.

  1. 両方の画像を開きます。 グラフィックプログラムで保存した画像と、この画像により失敗したスクリプト実行のScreen_Errorファイルを開きます。
  2. 両画像をオーバーラップさせます。 保存した画像をコピーして、Screen_Errorファイルの上にペーストします。 In Photoshop, the copied image is automatically pasted into a separate layer.
  3. 画像を位置合わせします。 Move(移動)ツールを利用して、保存した画像をScreen_Errorファイルの対応するロケーションへとドラッグします。 その後矢印キーを利用して、画像へとさらにズームインして調整します。
  4. 違いをハイライトします。 レイヤーパレットで、Blending Mode(ブレンドモード)ポップアップメニューをクリックしてDifference(違い)をクリックします。
  5. 違いを評価します。 完全に一致するピクセルは黒く表示されます。 その他のピクセルについてはInfo(情報)パネルを見て、各画像のRGB値を確認します。 The greatest difference between the three values is the tolerance Eggplant Functional must allow to consider that pixel a match in both images. For example, if a pixel in the saved image has RGB values (99, 99, 135), and the same pixel in the Screen_Error has (100, 100, 150), the search tolerance must be at least 15, or the difference between the blue values.

キャプチャした画像を再利用する

スクリプト作成において、同一画像をスイート/スクリプト内で何度も使用しなければならない場合が多く見られます。 For example, you might click the File menu repeatedly, or open a number of dialogs with OK buttons.

以前保存した画像をスクリプトへと挿入する簡単な方法は、以下の4通りです。

  • Alt+click (Option+click on Mac): In the Viewer window toolbar, Alt+click (Option+click on Mac) a command button. 画像をキャプチャする代わりに、コマンドによりUse Image(画像を使用)パネルが開きますので、既存の画像を選択できます。 The command that you click is both added to the script and performed on the SUT.

  • ポップアップメニューを挿入する:スクリプトエディタ内で、ポップアップを挿入メニューからコマンド(またはコマンドがない場合はAdditional Image(追加画像))を選択して、その後ファイルブラウザ内で画像を選択します。 The command you choose here is not performed on the SUT.

  • ドラッグ・ドロップ:スイートエディタのImage(画像)ペインからスクリプトへと画像をドラッグします。

  • Copy and paste: Copy and paste from another part of the script. You can always type an image name in quotation marks, too.

 

This topic was last updated on 2月 01, 2019, at 11:13:23 午前.

Eggplant icon Eggplant.io | Documentation Home | User Forums | Support | Copyright © 2019 Eggplant