Testing Mendix applications using Selenium IDE

Size: px

Start display at page:

Download "Testing Mendix applications using Selenium IDE"

くうしょうかがんじ
5 years ago
Views:

1 Testing Mendix applications using Selenium IDE Selenium IDE を使って Mendixu アプリケーションをテストする目次 1 Preparation 準備 Install and run the Company Expenses App Company Expenses アプリをインストールおよび実行する Create your first automated test はじめての自動テストを作成する Use Firebug and FirePath to locate the element Firebug と FirePath を使って要素を探す Install the Selenium Mendix locator builder plugin Selenium Mendix ロケータービルダープラグインをインストールする Create an automated test with the Selenium Mendix locator builder plugin Selenium Mendix ロケータービルダープラグインを使って自動テストを作成する Related content 関連するコンテンツ Selenium IDE とはユーザーのブラウザ操作を記録および再生する Firefox プラグインですこの章では以下の内容を学習します Selenium IDE を使ってテストスクリプトを記録する FirePath でユニーク CSS セレクタを発見する Testing Mendix applications using Selenium IDE 1

2 1 Preparation 準備この章の学習内容に進む前に以下の作業を行ってください Firefox をダウンロードおよびインストールする Selenium IDE をダウンロードおよびインストールする下記の Selenium IDE の節までスクロールし最新版をダウンロードしてください Selenium IDE をインストールすると Firefox プラグインとして使用できるようになります Firebug という Firefox のアドオンをインストールする FirePath という Firefox のアドオンをインストールするソフトウェアこの章で使用されているバージョン Firefox Selenium IDE 2.9 Firebug FirePath この章で使用される画像名前および手順はすべて上記のバージョンに基づいています他のバージョンをご利用の場合は画面に表示される画像や名前がこの章に登場する内容と異なるかもしれません 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

3 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. に移動します 3. Selenium IDE ボタン DEFAULT RECORDING をクリックします 4. Mendix のログイン画面で以下のログイン情報を入力します Testing Mendix applications using Selenium IDE 3

4 フィールド値 User name Mxadmin Password 1 5. Sign in をクリックします 6. Sign out をクリックします 7. Selenium IDE で Record ボタンをクリックします Selenium IDE は以下の画像のようになっているはずです Testing Mendix applications using Selenium IDE 4

5 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

6 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

7 ストに失敗します 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

8 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

9 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

mx-name-textbox3 input をターゲットとする要素が見つからないためテストに失敗しますこの要素を持つページがまだ読み込まれていないため要素が見つかりません 24.

10 一致するノードは 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

11 ます 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 セレクタが付けられますまた親グリッドやリストビューを探し

12 数多くのテストステップをマニュアルで編集すると時間がかかります Marcel Groenweg が Mendix テストを記録するための Selenium プラグインを作成しました Selenium IDE にこのプラグインを追加するとテストステップには Selenium のデフォルト値ではなく mx-name-の CSS セレクタが付けられますまた親グリッドやリストビューを探しセレクタを追加してそのインデックスごとに正しい行を取得しますこれによりテストステップを編集する時間が削減されます 1. に移動します 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

13 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

14 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

15 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

16 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

Creating automated tests with TestNG

Creating automated tests with TestNG Create Automated Tests with TestNG TestNG を使って自動テストを作成する目次 1 Introduction はじめに... 2 2 Prerequisites 準備... 2 3 Creating a Java Project Java プロジェクトを作成する... 3 4 Create a TestNG File TestNG ファイルを作成する... 6