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

# 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. レース一覧から”５R"を選ぶ
6. 投票方法の変更のボタンを押す
7. 投票方法から、”通常投票”、”ベーシック投票”を選び、設定する
```

操作の動画は以下の通り　↓
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/3s6w9Lcl7ZA/0.jpg)](http://www.youtube.com/watch?v=3s6w9Lcl7ZA)

このサイトの特徴として

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


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

ユーザー処理場正しくないが、テスト自動化が成功する例の動画　↓
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YUO89lI5ETU/0.jpg)](http://www.youtube.com/watch?v=YUO89lI5ETU)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/7a2eedf4-c857-730f-43c8-a04df2eb041e.png)

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

Ranorexで記述するとき、"Wait for - Not exists"を用いる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/23e3783e-2471-a7c2-aedf-94cbab512388.png)



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

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

レース番号の選択のモーダルが非表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/e32ca9fa-b9f4-23d7-9ec4-185116897a41.png)

レース番号の選択のモーダルが表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/c7c038a6-8931-c239-6bc3-1b4d322ca1c6.png)

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

レース番号の選択のモーダルが非表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/91ee7dd4-a7de-0c7c-e90b-608d1e7798e5.png)

レース番号の選択のモーダルが非表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/5b290589-e871-d89b-b8fe-a77bd7d954b0.png)

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

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

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

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/9METPx0sJFY/0.jpg)](http://www.youtube.com/watch?v=9METPx0sJFY)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/11f751ba-7d3c-cf97-0724-2b5dde3d9934.png)

# Summary

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

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

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


# Finally


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


# back number

- <A HREF="https://qiita.com/emurin/items/af7b91b979159e27286a">[Lesson Test Automation. Day 01] What's Test Automation</A>
- <A HREF="https://qiita.com/emurin/items/750983107471386ea10a"> [Lesson Test Automation. Day 02] Test Layer and Tool</A>
- <A HREF="https://qiita.com/emurin/items/27f057b83bb2206868d3"> [Lesson Test Automation. Day 03] introduce test automation</A>
- <A HREF="https://qiita.com/emurin/items/34eea5255b414b3d1585">[Lesson Test Automation. Day 04] Test Automation Code Design vol.01</A>
- <A HREF="https://qiita.com/emurin/items/7feedeee162d205a1ed8">[Lesson Test Automation. Day 05] Test Automation Code Design vol.02</A>
- <A HREF="https://qiita.com/emurin/items/bb0e79fac43a569ad823">[Lesson Test Automation. Day 06] Test Automation Code Design vol.03</A>
- <A HREF="https://qiita.com/emurin/items/e9d7f26262eb599a2c7f">[Lesson Test Automation. Day 07] Test Automation Code Design vol.04</A>
- <A HREF="https://qiita.com/emurin/items/7aaa3f481cc57a340188">[Lesson Test Automation. Day 08] Test Automation Operation</A>
- <A HREF="https://qiita.com/emurin/items/b81241d159e69ab5c74e">[RealWorld Test Automation. Day 09] To reduce Jenkins operation set disable/enable in bulk</A>
- <A HREF="https://qiita.com/emurin/items/d4e8de6eec9f5b354548">[RealWorld Test Automation. Day 10] create test automation script for Travel booking by Ranorex</A>
- <A HREF="https://qiita.com/emurin/items/1f4fc791eb8c30c2e790">[RealWorld Test Automation. Day 11] choose nice XPath for durable and speedy test automation by Ranorex</A>