FlexアプリケーションのUIコンポーネントのテストは、自動化しないと面倒で時間のかかる作業です。Flexには、GUIレベルで動作する自動テストを作成するためのオートメーションフレームワークが組み込まれています。FlexMonkey* 1.0は、オープンソースのAIRアプリケーションであり、Flexのオートメーションフレームワークを利用して、FlexアプリケーションのGUI操作を記録して再生します。FlexMonkeyを使えば、テストによってアプリケーションビューを直接操作できるので、ビューコンポーネントとその背後のロジックを容易に検証できます。オートメーションフレームワークとの統合は裏側で実行されるので、FlexMonkeyを使用するためにアプリケーションのソースやコンパイル方法を変更する必要はありません。

この記事では、開発フローの一部としてFlexMonkeyを使用する方法を説明します。FlexMonkeyでは、必要に応じて様々な方法でFlexアプリケーションを起動できます。Flex Builderプロジェクトから直接アプリケーションを起動することも、ブラウザーで動作しているアプリケーションに接続することも、アプリケーションにリンクすることもできます。この記事では、Flex Builderプロジェクトから直接起動する方法を説明します。

必要条件

この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。

FlexMonkey 1.0 Airインストーラー

• ダウンロード*

サンプルファイル：

• flexmonkey_sample.zip*（ZIP、604K）

この記事に必要な予備知識

Adobe Flex 3の基礎知識があれば役立ちます。

初めてのFlexMonkeyプロジェクトの設定

FlexMonkeyをインストールして初めて起動すると、FlexMonkeyを開始するための指示を記した、ようこそダイアログボックスが表示されます（図1を参照）。「OK」をクリックします。

図1. FlexMonkeyのようこそ画面

初めてのFlexMonkeyプロジェクトを作成するには、この記事のサンプルファイルをダウンロードして展開し、以下の手順を実行します。

1. メニューからFile／New Projectを選択します（図2を参照）。

   

   図2. FlexMonkeyでの新規プロジェクトの作成

2. New Projectダイアログボックスで、FlexMonkeyプロジェクトファイルを置くディレクトリを選択します（図3を参照）。この例では、MonkeyContactsIntroExampleサンプルプロジェクトに対するFlex Builderプロジェクトディレクトリを選択します。

3. 「選択」をクリックすると、FlexMonkeyはテストとプロジェクトの環境設定を保持するファイルを作成します。

   

   図3. New Projectダイアログボックス

4. Project Propertiesウィンドウで、ターゲットSWF（テストするSWFファイル）を指定します。この例では、「Browse」をクリックして、プロジェクトのbin-debugディレクトリにあるMonkeyContacts.swfを選択します（図4を参照）。

   注意：テストするSWFがリモートの場合、URLを入力できます。

   

   図4. FlexMonkeyのProject Propertiesウィンドウ

5. 「Use Browser」はオフにしたまま、「Apply」をクリックします。ターゲットSWFを表示したウィンドウが開きます（図5を参照）。

   

   図5. ターゲットSWFウィンドウがデスクトップ上に開く

6. Project Propertiesの「Width」と「Height」の設定を使ってターゲットSWFウィンドウのサイズを調整し、「Apply」をクリックして結果を確認します。
7. ターゲットSWFウィンドウのサイズがよければ、「OK」をクリックします（「FlashVars」と「Generated AS3 Source Directory」の設定は現時点では空白にしておきます）。

FlexMonkeyはプロジェクトプロパティを保存し、次にFlexMonkeyを起動したときには自動的にロードします。

初めてのテストの作成

新規プロジェクトを作成すると、FlexMonkey Consoleウィンドウが開き、初めてのテストを作成できます（図6を参照）。

図6. FlexMonkey Consoleウィンドウ

NewTestSuiteを展開し（隣にある三角形をクリック）、NewTestCaseを展開して、NewTestを表示します（図7を参照）。xUnitをお使いになったことがあれば、標準の階層的テスト構成がFlexMonkeyに示されているのがわかるはずです。「NewTest」の行をクリックして選択します。まだUIコマンドを追加していないので、NewTestはEmptyです。「NewTest」を選択すると、記録ボタンが使用可能になります。記録(Record)ボタンをクリックすると、ボタンが赤く光り、記録モードに入ったことがわかります。

記録モードのFlexMonkey Consoleウィンドウ

図7. 記録モードのFlexMonkey Consoleウィンドウ

この例では、Monkey Contact Managerアプリケーションをテストします（図8を参照）。具体的には、新規連絡先の追加をテストします。記録モードの間は、アプリケーションに対するすべての操作がFlexMonkeyによって記録されます。

MonkeyContacts.swfウィンドウで、新しい名前を入力し、コンボボックスから電話の種類を選択し、電話番号を入力し、誕生日のフィールドは空白のままにして、「Add」をクリックします。

図8. テストするContact Managerアプリケーション

MonkeyContacts.swfウィンドウで連絡先を追加したら、記録ボタンをもう一度クリックして、記録モードをオフにします。図9は、新しいテストを記録した後のFlexMonkey Consoleウィンドウを示します。

図9. 記録されたUIコマンドがConsoleウィンドウに表示される

図からわかるように、FlexMonkeyはUIコマンドのシーケンスをNewTestに挿入しています。2列目には、OpenおよびSelectイベント、キーボード入力、マウスクリックに対するエントリがあります。3列目には、UIコマンドのターゲットコンポーネントのidが示されます。

Contact Managerアプリケーションで、NameフィールドのidプロパティはinName、Phone TypeフィールドのidプロパティはinType、PhoneフィールドのidプロパティはinPhoneです。

アサーションの追加

次は、テストにアサーションを追加します。テストの最後のコマンド（Click Add）が選択された状態で、検証追加(Add Verify)ボタン（ツールバーの緑のチェックマーク）をクリックします。FlexMonkey Consoleウィンドウの上にTake Snapshotダイアログボックスが現れ、FlexMonkeyがスナップショットモードになったことを示します（図10を参照）。

図10. スナップショットモードのFlexMonkey

スナップショットモードで、マウスカーソルをターゲットSWFウィンドウに移動します。FlexMonkeyは、表示されるFlexコンポーネントを赤でハイライト表示して、選択しやすいようにします。赤でハイライト表示されたコンポーネントをクリックすると、アサーションのターゲットになります。この例では、データグリッドをクリックします（図11を参照）。

図11. Contact Managerアプリケーションのデータグリッドがスナップショットモードでハイライト表示される

アサーションのターゲットコンポーネントを選択すると、FlexMonkeyはSpyウィンドウを表示します。これにはターゲットコンポーネント現在のプロパティとスタイルが表示されます。selectedIndexプロパティをクリックします。これは現在0 に設定されています（図12を参照）。「OK」をクリックすると、FlexMonkeyは、Verifyコマンドが実行されたときにデータグリッドのselectedIndexプロパティが0であるというアサーションを追加します。

図12. FlexMonkey Spyウィンドウ

FlexMonkey Consoleウィンドウに戻ると、追加されたアサーションが右側に表示されています。「Verify」コマンドの詳細ビューには、コマンドが実行されたときにselectedIndexプロパティが0であると期待されることが示されています（図13を参照）。

図13. 「Verify」コマンドの詳細ビュー

テストの実行

それでは、FlexMonkeyにテストを再生させてみましょう。まず、図14に示すようにNewTestを選択します。再生(Play)ボタン（記録ボタンの右隣）をクリックすると、FlexMonkeyはNewTestのすべてのUIコマンドを実行します。

図14. NewTestを選択し、再生をクリックしてテストを実行

FlexMonkeyが再生を実行している間は、再生ボタンが図15のように緑に光ります。FlexMonkeyは再生中に、実行しているUIコマンドをコンソールウィンドウでハイライト表示します。もちろん、コマンドが実行される様子はターゲットSWFウィンドウでも見ることができます。

図15. 実行中のUIコマンドがハイライト表示される

FlexMonkeyが最後のコマンドの再生を終えると、再生ボタンの緑の光が消え、テストの結果が更新されます。

図16. FlexMonkeyによるNewTestの結果の表示

作業の保存と終了

保存(Save)ボタン（ツールバーの右端の青いディスクアイコン）を押すことにより、いつでも作業を保存できます。保存していない場合、FlexMonkeyを終了する際に、作業の保存を促すメッセージが表示されます（図17を参照）。

図17. 作業の保存を促すFlexMonkeyのメッセージ

次にFlexMonkeyを開いたときには、このプロジェクトが再び開かれ、テストファイルとターゲットSWFがロードされます。

次のステップ

この記事では、FlexMonkeyプロジェクトの設定、テストの作成、アサーションの追加、テストの実行について説明しました。

サンプルアプリケーションや自作のFlexアプリケーションに対してFlexMonkeyを使用して、UIテストの記録と再生を試してみてください。

FlexMonkeyの詳細を知るには、次のリンクとリソースを参照してください。

• http://flexmonkey.gorillalogic.com*
• gorillalogic.com*

この記事は、Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported Licenseのもと提供しています。

著者について