LoginSignup
0
1

More than 3 years have passed since last update.

[RealWorld Test Automation. Day 12] correct UI test automation by Ranorex

Last updated at Posted at 2020-10-05

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. 投票方法から、”通常投票”、”ベーシック投票”を選び、設定する

操作の動画は以下の通り ↓
IMAGE ALT TEXT HERE

このサイトの特徴として

  • AJAXによる非同期で情報取得
  • CSSによるパーツの表示をコントロール

ユーザー処理場正しくないが、テスト自動化が成功する例 LOADR編

ユーザー処理場正しくないが、テスト自動化が成功する例の動画 ↓
IMAGE ALT TEXT HERE

早すぎてなぜ正しくないのかがわかりにくいかもしれません。

例えば、レース番号を選択するシーンです。
以下の図のように、まだLOADERのアイコンが表示され、マウスではクリックできない状態です。
しかし、scriptの記述の仕方によっては、directにレース番号”6R"を選択することができます。

image.png

このため、処理が正常に進んでしまいます。
ただ、もしLOADERなどの処理に問題があり、ユーザーがマウスでクリックできない状態だったら、どうでしょうか?
本来であれば、テストは失敗であるべきである。
テスト自動化のscriptが成功しても、ユーザー操作(マニュアルテスト)は失敗するからである。
正しくは、LOADERが消えるまで待つべきである。

Ranorexで記述するとき、"Wait for - Not exists"を用いる
image.png

ユーザー処理場正しくないが、テスト自動化が成功する例 CSS制御編

CSSで表示が隠れてる状態でも、テスト自動化は成功し、ユーザー操作が失敗する例もあります。
レース番号の選択のモーダルの例です
このモーダルは、CSSのstyleでdisplayを制御しています。(display; blick;でモーダルを表示)

レース番号の選択のモーダルが非表示
image.png

レース番号の選択のモーダルが表示
image.png

RanorexのSPYでXPathを確認してみると

レース番号の選択のモーダルが非表示
image.png

レース番号の選択のモーダルが非表示
image.png

SPYでも一つのXpathに対して、どちらの画面でもreporitory itemが取れていることが確認できます。
ただし、レース番号の選択のモーダルが非表示の時のXpathはグレーになっています。
これは、Xpathは存在しているが、表示されていないことを示しています。

このreporitoy itemに対して、scriptでdirectに選択する記述をすると、モーダルが表示されてなくても選択でき、処理が成功してしまいます。

Ranorexでマウスクリックさせる処理でscriptを動かした例が以下の動画です。
Ranorexは、上記のようなXpath上存在するが、表示されないreporitory itemに対して、見当違い(0.0 position)の場所をマウスクリックするようです。これにより失敗してくれます。

IMAGE ALT TEXT HERE

上記を回避させるための一つの例として、RanorexのSPYでVisibleのoptionを付けることにより、reporitory itemが表示されるまでwaitさせることができます。
当然、表示されずにtimeoutすれば、scriptは失敗します(正しい動き)。

image.png

Summary

以上のように、ユーザー視点で操作ができるかどうかでテスト自動化を記載することが、テストとして重要である。
今回のサンプル例では、Ranorexを用いた場合以下のようにする

  • LOADERといったユーザー操作を妨害する状態の時は、waitさせる
  • CSSで表示を制御するときは、visibleの確認を行う

Ranorex以外のscriptingでも同じような考えで実装すれば対応は可能である。

Finally

次は11月??日(金)頃配信予定です。
引き続き、test automationのreal worldでのtipsを考えています

back number

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1