3. • Eggplant Functional のスクリプトまたはスクリプト内のハンドラー
• 対話型コードまたは非対話型コード
• 1行のコード、または必要な長さのコード
• フュージョン自動化エンジン
© Copyright 2018 Eggplant 3
What Are Snippets?
5. • Autoscan と Autosnippetsで作成する。
• 臨機応変(特別な方法)に作成する。
• すべてのSnippetsをカスタマイズする。
© Copyright 2018 Eggplant 5
Snippet Creation
7. Using Autoscan and Autosnippets
• 1つのアプリケーション画面または画面セク
ションは1つのEggplant Functional
Autoscanセッションと関連している。
• Eggplant Functional Viewer ウィンド
ウに画面を表示する。
© Copyright 2018 Eggplant 7
8. Using Autoscan and Autosnippets
• Autoscan Entire Screen と
Autoscan Capture Area
8© Copyright 2018 Eggplant
9. © Copyright 2018 Eggplant 9
Using Autoscan and Autosnippets
Delete
Slider Delete
Editor's Notes Eggplant AIトレーニングコースのレッスン3では、Snippetについて説明します。Eggplant AIModelがアプリケーションをテストするためのEggplant Functionalコードのことです。このレッスンでは、有用なEggplant機能のSnippetを作成する方法について説明しますが、このトレーニングコースではEggplant機能についての説明は最小限にとどめています。Eggplant AIを最大限に活用するためには、Eggplant Functionalをしっかりと理解しておくことが重要です。Eggplant FunctionalのドキュメントとEggplant Functionalトレーニングコースへのリンクは、このレッスンの「リソース」セクションにあります。
新しいModelを作成する際に、ModelにSnippetをアタッチすると、Modelをデバッグしたり、テスト中のアプリケーションを意味のある方法で表現したりするのに役立ちます。レッスン3では、Snippetを作成してModelにアタッチすることで、レッスン2で開始したModelを拡張します。 では、Snippetとは何でしょうか？Snippetとは、Eggplant Functionalスクリプトとして、またはスクリプト内のカスタムコマンドなどのハンドラとして存在するコードのことです。Snippetは、Eggplant AIがModel内で特定のStateやActionを実行したときに、テスト対象のシステム上で何が起こるかを指定します。
Snippetには、ボタンをクリックしたりフィールドに入力したりするコードなどのインタラクティブなコードや、検証などの非インタラクティブなコードを含めることができます。Snippetは、1 行のように短くすることも、必要に応じて何行ものコードを持つこともできます。一般的に、Snippetの長さは、関連するModelのGranularityと相関があります。非常にGranularityの高い Eggplant AI Modelは、StateやActionに比較的短いSnippetを使用します。
レッスン 1 で、Eggplant Functional がフュージョン自動化エンジンであることを思い出していただけると思います。つまり、Eggplant Functionalは、ユーザー・インターフェースからデータベースやAPIコールに至るまで、様々なレベルのアプリケーションを自動化することができます。Eggplant Functionalはこれらの異なる自動化アプローチをサポートしているため、Eggplant AIはこれらのアプローチを使用したModelベースの自動化のフレームワークとして機能します。このトレーニング・コースでは、Eggplant AI を使用してアプリケーションのGUIをテストすることに焦点を当てています。 Eggplant FunctionalでのSnippetの作成には主に2つの方法があります。
Autoscan機能とAutosnippets機能は、アプリケーションの画面または画面のセクションに属するSnippetのセットを高速に作成することができる方法の1つです。このようなアプリケーション画面との関連性のため、Autosnippetsは、アプリケーション・インターフェースをマップするModelに特に適しています。しかし、ビヘイビア・ベースのアプローチを使用するModelでもAutoscanを使用することができます。
Autosnippetsを使用するだけでなく、必要に応じて、または高度にカスタマイズされたコードを使用してSnippetを作成するなど、よりアドホックな方法でSnippetを構築することもできます。
Eggplant Functionalでは、どのようにSnippetを作成しても、テスト要件に合わせてカスタマイズすることができます。 ここでは、このコースのレッスン２の演習で使用したモバイルバンキングアプリをマッピングしたModelの例を紹介します。もしあなたがレッスン２のエクササイズを行っていない場合は、レッスン３に進む前にもう一度戻ってエクササイズを完了させることをお勧めします。
レッスン２の練習でモバイルバンキングアプリを使ったのに、あなたのModelがここに写っているものと違っていた場合は、全く問題ありません。しかし、ほとんどの場合、アプリケーションのログインプロセスがModelのどこかで表現されています。
[Login Page]のStateには、バンキング・アプリのインターフェイス上の要素に関連するActionが含まれているので、AutoscanとAutosnippetsを使って[Login Page]のState用のSnippetを簡単に生成することができます。 一般的には、1つのアプリケーション画面または画面のセクションは、Eggplant Functional Autoscanセッションと呼ばれるものに関連しています。Autoscanセッションでは、テスト対象のアプリケーションの画面に表示される要素から画像をすばやくキャプチャし、Snippetのセットを作成することができます。
Autoscanの準備をするには、Eggplant Functional Viewerウィンドウでテスト対象のシステムを手動で操作し、目的の画面（ログイン画面）が表示されるようにします。 Autoscanは、Viewerウィンドウのツールバーの[Start Session]ボタンから利用できます。AutoscanにアクセスするときにViewerウィンドウでライブモードを使用している場合、Autoscanには、ブラウザやシステムインターフェイス要素を含む、テスト対象のシステムの表示全体が含まれます。おそらく、画面の特定のセクションにAutoscanを集中して実行したい場合が多いでしょう。画面の特定のセクションをAutoscanするには、キャプチャモードに入り、スクリーンショットに示されているように、目的の領域の上にキャプチャ領域を移動します。その後、[Start Session] ボタンを使用して、キャプチャ領域のAutoscanにアクセスします。
[Open Session] をクリックする前に、Autoscanセッションに名前を付けることをお勧めします。セッション名は、Autosnippetsによって生成されたスクリプトの名前を決定します。 Autoscanは、フィールドやボタンなどの画面上の各要素を個別に識別し、Autosnippetsは各要素のSnippetを生成します。つまり、AutonsnippetsはGranularityが高いということです。ModelのGranularityの低いアプローチを使用している場合は、Autosnippetsによって生成された複数のSnippetをステートやアクションにアタッチしたり、アドホックなSnippet作成を使用して1つの長いSnippetを作成したりすることができます。
Autoscanセッションでは、主に2つのことを考慮する必要があります。1つ目は、どの要素にキャプチャ画像を持たせるか、2つ目はどの要素にAutosnippetsを持たせるかです。オートメーションで重要な要素の中には、キャプチャ画像を必要とするものがありますが、それらは独自のSnippetを持っていないかもしれません。Autosnippetsには、画像検索ではなく光学的な文字認識に基づいてSnippetを作成するオプションがありますので、キャプチャ画像を持たない要素にAutosnippetsを持たせることができます。
[Slider]を使用して、要素を識別する際のAutoscanの感度を調整することができます。
Autoscanセッションから、キャプチャ画像やAutosnippetsがないはずの要素を削除するには、ハイライトされた要素の[Delete]アイコンをクリックするか、右下の[Delete unnamed images]ボタンを使用します。テスト対象のシステムのスクリーンショット上でマウスを使ってドラッグすることで、Autoscanセッションに新しい要素を追加できます。 どの要素にAutosnippetを生成するかは、［Element Type］のドロップダウンリストから要素の種類を選択することができます。
Element Typeは、AutosnippetsがSnippetテンプレートを使用してどの要素のSnippetを生成するかを決定します。Eggplant Functionalには、Element Typeのデフォルトセットと、各Element Typeに対応するAutosnippetテンプレートのデフォルトセットが付属しています。しかし、Eggplant FunctionalのPreferencesでElement TypeとAutosnippetテンプレートの両方をカスタマイズすることができます。
Checkpoint Element Typeを例に考えてみましょう。Checkpoint には、2つのデフォルトのAutosnippetテンプレートがあります。このテンプレートでは、画面上に要素があるかどうかをチェックするハンドラが生成され、要素が見つかったかどうかに応じてハンドラの1つが true または false を返します。ハンドラはテスト対象のシステムとの相互作用を行わないため、Checkpoint要素は主に検証に役立ちます。
他のElement Typeは、ボタンをクリックしたり、フィールドに入力したりするなど、テスト対象のシステムと相互作用するSnippetを生成しますが、一部の要素は検証テンプレートも持っています。
各Element Typeには、独自のテンプレートがありますが、カスタマイズ可能です。
AutoscanセッションでAutosnippetsを持つべき各要素に適切なElement Typeを選択したら、[Generate]ボタンをクリックして、要素のキャプチャ画像と Autosnippets を生成します。 このスクリーンショットは、Autoscanセッションから画像とSnippetを生成した後のEggplant Functional Suiteを示しています。
このSuiteには、Autoscanセッションの名前を継承したスクリプトが1つあります。スクリプトの内部には、各要素の選択されたElement Typeに属するAutosnippetテンプレートから作成された汎用ハンドラのセットがあります。各Autoscanセッションは、Snippetを生成する際に、この組織的なスキームに従います。 ビデオを見て、Autoscan と Autosnippet のワークフローを実際に見てみましょう。
Autosnippetsのカスタマイズは一般的です。モバイルバンキングアプリの[Accounts Page]のStateは、Snippetのカスタマイズについて議論する機会を提供します。
モバイルバンキングアプリの口座ページの主な機能は、口座への振込や口座からの支払いを行うことです。このページに1つのアカウントしか表示されていない場合、「Transfer」ボタンと「Make Payment」ボタン用のAutosnippetsを作成して、カスタマイズせずにそれらのAutosnippetsを使用することができます。しかし、「Transfer」と「Make Payment」はUI上で重複したボタンであり、ページの下の方にあるアカウントの「Transfer」と「Make Payment」ボタンを表示するにはスワイプが必要です。
Button Element TypeのデフォルトのAutosnippetテンプレートは、スワイプや重複したボタンを扱うにはシンプルすぎます。 Autoscanを使用して、[Transfer]ボタンと[Make Payment]ボタンにElement Typeを割り当てると、キャプチャ画像とAutosnippetsの両方が生成されます。Autoscanに各アカウント名を含めることで、アカウント名の画像をキャプチャしてSnippetの searchRectangles を設定することができますが、アカウント名は独自のSnippetを必要としないため、Element Typeを割り当てません。
Autosnippetsを生成した後、カスタマイズすることができます。Snippetをパラメータ化し、Transfer ClickハンドラにsearchRectangleを追加して、Snippetが[Transfer]ボタンの正しいインスタンスをクリックするようにしました。カスタムSnippetの書き方については、このレッスンの「リソース」セクションのリンクを参照してください。
このコースのレッスン4では、Eggplant AIが変数を使用してパラメータ化されたEggplant Functional Snippetに値を渡す方法について説明します。
頻繁にSnippetをカスタマイズする必要がある場合は、既に生成されたSnippetを編集するのではなく、Autosnippetテンプレートをカスタマイズすることを検討してみてください。
Autosnippetsテンプレートファイルをカスタマイズするには、Eggplant Functionalの[Script Preferences]タブを開きます。
Autosnippetsを使用するだけでなく、Ad-hoc Snippet（Autosnippetsのワークフローの外で作成されたSnippet）を作成することもできます。Eggplant AIは、スクリーンショットのように個別のスクリプトの形でSnippetを作成することもできますし、Autosnippetsが作成するようにスクリプト内のハンドラとして作成することもできます。
アドホックなSnippetの作成についての詳細は、このレッスンの「リソース」セクションの「スクリプトとハンドラの作成」リンクを参照してください。 Snippetを作成したら、それをModelのStateやActionにアタッチすることができます。
Eggplant AIインターフェースの左側にあるSnippetタブには、Modelで利用可能なSnippetのツリーが表示されます。Snippetタブのラベルの横に緑色の点があることに注意してください。緑色のドットは、Eggplant AIエージェントが実行されており、Eggplant AIサーバーとの通信に成功していることを示しています。しかし、このスクリーンショットでは、ModelがまだSnippetを含むSuiteにリンクされていないため、Snippetが表示されていません。
Snippetタブに赤い点が表示されている場合は、Eggplant AIエージェントがまったく動作していないか、Eggplant AIサーバーがエージェントと通信できていないことを示しています。
ModelにStateやActionに追加できるSnippetのリストを用意するには、ModelをEggplant機能Suiteにリンクする必要があります。
Model設定ダイアログのEggplant機能Suiteの場所フィールドを使用して、Eggplant Functional SuiteをModelにリンクする方法については、ビデオを参照してください。このシナリオでは、Snippetタブの緑色の点で示されているように、Eggplant AIエージェントはすでに実行されています。Eggplant Functional Suiteの作成とModelへのリンクについての詳細は、このレッスンの「リソース」のセクションを参照してください。 Snippetタブには、ツリーのトップレベルにある機能的なスクリプトが表示されます。スクリプトのノードを展開すると、スクリプト内のハンドラが表示されます。 SnippetタブにSnippetのセットが用意されたので、それらをEggplant AIのStateやActionにアタッチしてみましょう。
SnippetをStateやActionにアタッチするには、まずSnippetをアタッチするStateやActionを選択します。後者は、ErrorやClearnupなど、Model Treeにしか表示されないStateを選択するのに便利です。StateまたはActionを選択したら、Snippetタブを開き、ツリーで目的のSnippetを右クリックして、選択したSnippetに追加 を選択します。
C [State Properties]/[Action Properties]タブには、StateまたはActionにアタッチされたSnippetが表示されます。また、[Properties]タブの[New]ボタンを使用して、[ScriptPath]列にSnippet名を指定することにより、SnippetをStateまたはActionに追加することもできます。
StateやActionに複数のSnippetがリンクされている場合、Eggplant AIは、[Properties]タブの[Snippets Called by]セクションに表示されているトップダウン順にすべてのSnippetを実行します。
[Snippets Called by]セクションには、特定のSnippetを無効にするチェックボックスもあり、Model実行中にModelがSnippetを呼び出さないようにすることができます。
[Snippets Called by]セクションには、Snippetの入出力を指定する欄があります。これらの入出力は、パラメータ化されたSnippetを使用したり、Eggplant Functionalからデータを取得したりするために必要不可欠なものです。レッスン4では、変数を使用して入出力を指定する方法について説明します。 ModelにSnippetをアタッチする方法をビデオでご覧ください。Snippetをアタッチすると、StateやActionの左上隅にある小さなグレーのドットが緑色に変わります。このため、どのStateとActionがSnippetをアタッチしているかを簡単に判断することができます。 これでレッスン3は終了です。必要に応じて、レッスン内容とリソースを確認してください。準備ができたら、レッスン4に進みます。
