Testing Mendix applications using Selenium IDE Selenium IDE を使って Mendixu アプリケーションをテストする 目次 1 Preparation 準備... 2 2 Install and run the Company Expenses App Company Expenses アプリをインストールおよび実行する... 2 3 Create your first automated test はじめての自動テストを作成する... 3 3.1 Use Firebug and FirePath to locate the element Firebug と FirePath を使って要素を探す... 5 3.2 Install the Selenium Mendix locator builder plugin Selenium Mendix ロケーター ビルダー プラグインをインストールする... 11 3.3 Create an automated test with the Selenium Mendix locator builder plugin Selenium Mendix ロケーター ビルダー プラグインを使って自動テストを 作成する... 13 4 Related content 関連するコンテンツ... 15 Selenium IDE とは ユーザーのブラウザ操作を記録および再生する Firefox プラグインです この章では 以下の内容を学習します Selenium IDE を使ってテスト スクリプトを記録する FirePath でユニーク CSS セレクタを発見する Testing Mendix applications using Selenium IDE 1
1 Preparation 準備 この章の学習内容に進む前に 以下の作業を行ってください Firefox をダウンロードおよびインストールする Selenium IDE をダウンロードおよびインストールする 下記の Selenium IDE の節までス クロールし 最新版をダウンロードしてください Selenium IDE をインストールすると Firefox プラグインとして使用できるようになります Firebug という Firefox のアドオンをインストールする FirePath という Firefox のアドオンをインストールする ソフトウェア この章で使用されているバージョン Firefox 37.0.2 Selenium IDE 2.9 Firebug 2.0.9 FirePath 0.9.7.1 この章で使用される画像 名前 および手順は すべて上記のバージョンに基づいています 他のバージョンをご利用の場合は 画面に表示される画像や名前がこの章に登場する内容と異 なるかもしれません 2 Install and run the Company Expenses App Company Expenses アプリをインストールおよび実行する この節では Company Expenses アプリをインストールおよび実行します 1. Mendix Business Modeler を開きます 2. App Store ボタンをクリックします 3. Company Expenses を検索します 4. Company Expenses をクリックします Testing Mendix applications using Selenium IDE 2
5. Download をクリックします 6. OK をクリックします Mendix Business Modeler で Company Expenses アプリが 開きます 7. Run Locally をクリックします F5 8. View App をクリックします F9 3 Create your first automated test はじめての自動テストを作成する この節では まず Selenium IDE の記録ボタンを使って 自動テストを作成します 1. Firefox を開きます 2. http://localhost:8080/index.html に移動します 3. Selenium IDE ボタン DEFAULT RECORDING をクリックします 4. Mendix のログイン画面で以下のログイン情報を入力します Testing Mendix applications using Selenium IDE 3
フィールド 値 User name Mxadmin Password 1 5. Sign in をクリックします 6. Sign out をクリックします 7. Selenium IDE で Record ボタンをクリックします Selenium IDE は 以下の画像のようになっているはずです Testing Mendix applications using Selenium IDE 4
8. Run current test case ボタンをクリックします 以下の画像のとおり 合格したテストステップはすべて緑色でマークされます よくできました! はじめての自動テストが出来上がりました! 3.1 Use Firebug and FirePath to locate the element (Firebug と FirePath を使って要素を探す ) Selenium IDE を使用してテスト スクリプトを記録することはできますが これらのスクリプトはほぼ必ず 使用する前に編集しなければなりません ( たとえば HTML タグ ID は動的に生成され 同じページでも記録するたびに異なります ) この節では 適切なロケーターを見つけるため Firebug と FirePath を使用し 自動生成されない一部のテストステップを編集します ロケーターは 実行が必要な GUI 要素 ( ボタン テキストボックス データグリッドなど ) を Selenium IDE に伝えます Mendix 要素のロケーターを簡単に生成できるようにするため 要素のクラスに mx-name を追加します ウィンドウ内で要素の位置が変更されている場合は スクリプトを書き直す必要はありません Testing Mendix applications using Selenium IDE 5
1. CTRL+N を押し Selenium IDE で新規テストケースを作成します 2. Record ボタンをクリックします 3. Mendix ログイン画面に以下のログイン詳細を入力します フィールド値 User name Mxadmin Password 1 4. Sign in ボタンをクリックします 5. Expense タブをクリックします 6. New Expense ボタンをクリックします 7. Amount フィールドに 1 と入力します 8. タイプ選択ボックスで Accomodation を選択します 9. Save ボタンをクリックします 10. Sign out ボタンをクリックします 11. Selenium IDE で Record ボタンをクリックし 記録操作を停止します 12. Run current test case ボタンをクリックします css=input.form-control.mx-focus をターゲットとする要素が見つからないため テ Testing Mendix applications using Selenium IDE 6
ストに失敗します 13. css=input.form-control.mx-focus をターゲットとする要素は このページに存在しません スクリプトを記録中 要素には _.mx-focus _ という CCS クラスが確かに含まれていますが テスト実行中には CSS クラスが含まれていません Firebug や FirePath を使って 同じ要素の別の CSS セレクタを探す必要があります 14. 手順 3 から 6 を繰り返します 15. Firefox ツールバーから Firebug ボタンをクリックします 16. FirePath タブをクリックします Testing Mendix applications using Selenium IDE 7
17. Inspect Element ボタンをクリックします 18. Amount フィールドを click します.form-control は ユニークな CSS セレクタではありません 一致するノードが 14 個存在します Amount フィールドでユニークなセレクタを見つける必要があります Mendix 5 では ウィジェットやポップアップなどのページ コンテンツを特定するために CSS クラスを使用しています Selenium でこれらのクラスを使用し ページの操作やデータの検証を行うことが可能です Mendix Business Modeler でウィジェットに名前を付けることができます これらの名前は HTML 文書内で mx-name-という接頭辞が付いたクラス名として表示されます たとえば EmployeeGrid というグリッド名には mx-name-employeegrid という CSS クラスが付けられます これは すべてのウィジェットで同様です 19. Mendix Business Modeler で **Desktop_Expense_NewEdit_Admin ** ページを開 きます Testing Mendix applications using Selenium IDE 8
20. Amount フィールドを選択します Amount フィールドの名前は textbox3 です すべての要素には 自動的に mx-name-[name] の CSS クラスが付けられます つまり Amount フィールドには mx-name-textbox3 という CCS クラスが付けられます 21. FirePath に.mx-name-textBox3 と入力し Enter を押します Testing Mendix applications using Selenium IDE 9
一致するノードは 1 つだけなので Amount フィールドのユニーク セレクターが見つかりました 22. Selniume で css=input.form-control.mx-focus の値を css=.mx-name-textbox3 input に変更します これは入力フィールドなので ターゲットに _input_ を追加する必要があります 23. Run current test case ボタンをクリックします css=.mx-name-textbox3 input をターゲットとする要素が見つからないため テストに失敗します この要素を持つページがまだ読み込まれていないため 要素が見つかりません 24. 速度制御を Slow に切り替えます 速度制御によって テスト スクリプトの実行速度が決まります デフォルトでは 速度制御は最速に設定されています テスト速度が早すぎると ブラウザがページを完全に読み込む前に ページ上の要素についてアサートが始まる可能性があります 25. Run current test case ボタンをクリックします css=input.form-control.mx-focus をターゲットとする要素が見つからないため テ ストに失敗します 26. Mendix Business Modeler で Desktop_Expense_NewEdit_Admin ページを開き Testing Mendix applications using Selenium IDE 10
ます 27. **Type ** 選択ボックスをクリックします **Type ** 選択ボックス名は referenceselector1 で _mx-name-_referenceselector1 の CSS クラスが付けられます 28. FilePath に._mx-name-_referenceSelector1 と入力し Enter を押します 2 つの要素が見つかります 1 つはポップアップ内に もう 1 つは背景のページで見つかります アクティブなページの要素を読み取るには ターゲットに.mx-window-active を追加する必要があります 29. FilePath に.mx-window-active._mx-name-_referenceSelector1 と入力し Enter を押します 一致するノードは 1 つなので Type 選択ボックスにユニークなセレクターが見つかりました 30. Selenium で css=select.form-control.mx-focus の値を css=.mx-window-active. mx-name-referenceselector1 select に変更します 31. これは dropdown リストなので ターゲットに _select_ を追加する必要があります 32. Run current test case ボタンをクリックします テストに成功します おめでとうございます!2 つめの自動テストが出来上がりました Grid または ListView などの一部のウィジェットは 複数の項目を表示することができます すべての項目に mx-name-index-[indexnumber] の CSS クラスが付けられます インデックス番号は 0 から始まります 3.2 Install the Selenium Mendix locator builder plugin (Selenium Mendix ロケーター ビルダー プラグインをインストールする ) Testing Mendix applications using Selenium IDE 11
数多くのテストステップをマニュアルで編集すると時間がかかります Marcel Groenweg が Mendix テストを記録するための Selenium プラグインを作成しました Selenium IDE にこのプラグインを追加すると テストステップには Selenium のデフォルト値ではなく mx-name-の CSS セレクタが付けられます また 親グリッドやリスト ビューを探し セレクタを追加してそのインデックスごとに正しい行を取得します これにより テストステップを編集する時間が削減されます 1. https://github.com/mgroeneweg/seleniummendixlocatorbuilder に移動します 2. Download ZIP をクリックします 3. SeleniumMendixLocatorBuilder-master.zip を解凍します 4. Selenium IDE を開きます 5. Options > Options に移動します 6. Browse をクリックし Selenium IDE 拡張子を選択します 7. 抽出フォルダーから MendixNameLocatorBuilder.js を選択します 8. Open をクリックします 9. OK をクリックします 10. Selenium IDE を再起動します 11. Options > Options をクリックします 12. Locator Builders タブを選択します 13. css:mendixname を一番上にドラッグします 14. Selenium IDE を再起動します これで テストステップに Selenium のデフォルト値ではなく mx-name- の CSS セレク タが付けられます Testing Mendix applications using Selenium IDE 12
3.3 Create an automated test with the Selenium Mendix locator builder plugin (Selenium Mendix ロケーター ビルダー プラグインを使って自動テストを作成する ) 1. Selenium IDE を開きます 2. Mendix のログイン画面に以下のログイン情報を入力します フィールド値 User name Mxadmin Password 1 3. Sign in ボタンをクリックします 4. **Expenses ** タブをクリックします 5. **New Expense ** ボタンをクリックします 6. Amount フィールドに 1 と入力します 7. Type 選択ボックスで Accomodation を選択します 8. Save ボタンをクリックします Testing Mendix applications using Selenium IDE 13
9. Sign out ボタンをクリックします 10. Selenium IDE で Record ボタンをクリックし 記録を停止します 11. Run current test case ボタンをクリックします css=.mx-window-active.mxname-textbox6 input をターゲットとする要素が見つからないため テストに失敗します この要素を持つページがまだ読み込まれていないため この要素が見つかりません 12. 速度制御を Slow に切り替えます 速度制御によって スクリプト実行スピードが決まります デフォルトでは 速度制御は最大スピードに設定されています テストの実行速度が速すぎると ブラウザがページを完全に読み込む前に ページ上の要素に関してアサートが始まる可能性があります テスト スクリプトは できる限り早い速度で実行してください Testing Mendix applications using Selenium IDE 14
13. Run current test case ボタンをクリックします テストに成功します 4 Related content 関連するコンテンツ 10_1TestNG を使って自動テストを作成する 10_3UnitTesting モジュールを使ってマイクロフローをテストする Find the Root Cause of Runtime Errors Clear Warning Messages Testing Mendix applications using Selenium IDE 15
10_4SoapUI を使って Web サービスをテストする Monitoring Mendix Using JMX Debug Java Actions Remotely Log Levels Debug Java Actions このトピックの詳細については 次のリンクを参考にしてください Selenium IDE Documentation This Japanese translation is provided for by Buildsystem Co. Ltd., based on Mendix copyrighted documentation and materials which can be found here as licensed under CC BY 4.0 Testing Mendix applications using Selenium IDE 16