Outline
今回は、Ranorexを使ってWEBのE2E testを作成するときに、UIのテストを正しくすることに関して記述する。
これはRanorexに限らない。とくにWebDriverでjavaなどで作成するときに、陥りることがある。
UIのテストでマウスクリックによる処理を、ユーザー目線でtest automationのscriptが書けていますか?
ユーザーの操作ではできてないことが、test automationのscriptではできてしまうことがあります。
そのため、ユーザーの処理ではNGであるのに、test automationではOKになってしまう。
Example
https://keirin.kdreams.jp/
サンプルサイトとして、Kドリームスのサイトを用いる。
scenarioは以下の通り
1. 投票ボタンを押す
2. 競輪場一覧のボタンを押す
3. 競輪場一覧から”宇都宮”を選ぶ
4. レース番号の変更のボタンを押す
5. レース一覧から”5R"を選ぶ
6. 投票方法の変更のボタンを押す
7. 投票方法から、”通常投票”、”ベーシック投票”を選び、設定する
このサイトの特徴として
- AJAXによる非同期で情報取得
- CSSによるパーツの表示をコントロール
ユーザー処理場正しくないが、テスト自動化が成功する例 LOADR編
ユーザー処理場正しくないが、テスト自動化が成功する例の動画 ↓
早すぎてなぜ正しくないのかがわかりにくいかもしれません。
例えば、レース番号を選択するシーンです。
以下の図のように、まだLOADERのアイコンが表示され、マウスではクリックできない状態です。
しかし、scriptの記述の仕方によっては、directにレース番号”6R"を選択することができます。
このため、処理が正常に進んでしまいます。
ただ、もしLOADERなどの処理に問題があり、ユーザーがマウスでクリックできない状態だったら、どうでしょうか?
本来であれば、テストは失敗であるべきである。
テスト自動化のscriptが成功しても、ユーザー操作(マニュアルテスト)は失敗するからである。
正しくは、LOADERが消えるまで待つべきである。
Ranorexで記述するとき、"Wait for - Not exists"を用いる
ユーザー処理場正しくないが、テスト自動化が成功する例 CSS制御編
CSSで表示が隠れてる状態でも、テスト自動化は成功し、ユーザー操作が失敗する例もあります。
レース番号の選択のモーダルの例です
このモーダルは、CSSのstyleでdisplayを制御しています。(display; blick;でモーダルを表示)
RanorexのSPYでXPathを確認してみると
SPYでも一つのXpathに対して、どちらの画面でもreporitory itemが取れていることが確認できます。
ただし、レース番号の選択のモーダルが非表示の時のXpathはグレーになっています。
これは、Xpathは存在しているが、表示されていないことを示しています。
このreporitoy itemに対して、scriptでdirectに選択する記述をすると、モーダルが表示されてなくても選択でき、処理が成功してしまいます。
Ranorexでマウスクリックさせる処理でscriptを動かした例が以下の動画です。
Ranorexは、上記のようなXpath上存在するが、表示されないreporitory itemに対して、見当違い(0.0 position)の場所をマウスクリックするようです。これにより失敗してくれます。
上記を回避させるための一つの例として、RanorexのSPYでVisibleのoptionを付けることにより、reporitory itemが表示されるまでwaitさせることができます。
当然、表示されずにtimeoutすれば、scriptは失敗します(正しい動き)。
Summary
以上のように、ユーザー視点で操作ができるかどうかでテスト自動化を記載することが、テストとして重要である。
今回のサンプル例では、Ranorexを用いた場合以下のようにする
- LOADERといったユーザー操作を妨害する状態の時は、waitさせる
- CSSで表示を制御するときは、visibleの確認を行う
Ranorex以外のscriptingでも同じような考えで実装すれば対応は可能である。
Finally
次は11月??日(金)頃配信予定です。
引き続き、test automationのreal worldでのtipsを考えています
back number
- [Lesson Test Automation. Day 01] What's Test Automation
- [Lesson Test Automation. Day 02] Test Layer and Tool
- [Lesson Test Automation. Day 03] introduce test automation
- [Lesson Test Automation. Day 04] Test Automation Code Design vol.01
- [Lesson Test Automation. Day 05] Test Automation Code Design vol.02
- [Lesson Test Automation. Day 06] Test Automation Code Design vol.03
- [Lesson Test Automation. Day 07] Test Automation Code Design vol.04
- [Lesson Test Automation. Day 08] Test Automation Operation
- [RealWorld Test Automation. Day 09] To reduce Jenkins operation set disable/enable in bulk
- [RealWorld Test Automation. Day 10] create test automation script for Travel booking by Ranorex
- [RealWorld Test Automation. Day 11] choose nice XPath for durable and speedy test automation by Ranorex