try mabl UI test automation

# Outline

最近、ローコードでUIテスト自動化を実現するツールとして挙げられる、mabl。
実際使ってみて、ほかのツールとの良しあしを検証してみた。

https://www.mabl.com/ja/

# Test Envrionment Setting

Test環境はproxyで接続する環境を前提とする。
そして、その環境へは社内インフラからのみアクセスできる。

この前提では、localで実行する場合、 Proxy settingすることで、Test環境に接続することができる。
しかし、Mablクラウド上でのテスト実行はできない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/63e2cdbb-ceb3-6b11-32c9-045b80a7819d.png)

また、複雑なproxy設定を制御する、PACが使えない。


# Timeout

Web 遷移時、loadingは自動的に待つようになっている。
ページが読み切らないで次の処理をしてしまうと、テスト結果が不安定になるため有効な機能である。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/4e54a0d1-a692-8545-1eed-fdd23c068458.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/80674eac-de35-9e97-8786-01446cb99198.png)

ただし、全てのassertion が30 secになっている。変更が不可能である。
また、page loadingの場合、30 sec timeoutした場合、WARN扱いで、次のステップに進んでしまう。

Ranorexでは
- 必要に応じてpage loadingの必要性を設定可能
- assertionのtimeを個別に設定可能
- page loadingがtimeoutした場合、fail扱い可能


https://help.mabl.com/docs/element-assertions-ja


# 複雑なxpath指定

競馬は、毎日開催競馬場、レース数が異なる。
そのため、下記のような開催一覧では、表示される競馬場の有無、そして順番が異なる。
今回、テスト用に”姫路”が毎日12Rまで開催されるようにテストデータが作成されている前提とする。

このなかで、毎日テストで”姫路１１R”の投票ボタンがクリックされるようにしたい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/b4b14378-b737-bb41-618d-6e9e265c6c8a.png)

姫路のcellをまず取得し、その行（親path）を経由して、11Rの値を取得する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/6f5a4138-5fac-f67b-09dd-46343f40217f.png)


なお、Ranorexの場合、以下のようにしてxpathを指定することで特定できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/39c7901e-aab4-c69b-68db-f37ecc999c1f.png)

RanorexとMablでxpathのお作法が異なるので、苦戦した。
RanorexのSPYのように、objectのxpathを調べる機能があると助かる。


# 要素を変数で指定（データ駆動）

競馬の単勝・投票のテストを考える。
選ぶ１着の馬は1～16とある。テストとして、指定した番号の馬番を選べるようにしたい。

1.あらかじめxpathを取得
mablのレコーディングのとき、任意の番号をクリックして、該当のxpathを取得する。（ほかに、chromeのdeveloper toolで調べる等もある)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/40440d18-3081-2b92-e563-d53b57480605.png)

2.変数定義
クリックする馬番の値の変数を作成する。
今回、arrival1 ( default = 3 ) を作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/c0813e27-82c5-56e8-a9f3-cb982d0c60e9.png)

3.step追加で要素検索
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/ab8f2792-0558-448e-05e4-7efb80200080.png)

Ranorexに比べると、変数化したボタンを作成、STEPに入れるのに少し手間がかかる気がする


# Repositories

ボタン、フォームなど、テストにおいてクリック等するオブジェクトをRepositoiesと定義する。（Ranorex）

テスト作成後、シナリオをreviewするとき、MablではどのRepositoiesが使われているのかが確認できない。
下記の通り、”セット”のボタンを押すSTEPだが、どのボタンなのかがわからない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/fbe860e1-3d45-f001-0fb1-e400e0b58b1d.png)

尚、Ranorexの場合、各STEPで関連するrepositoriesがvisualでわかる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/e25b362e-2edf-1f27-e77a-08d04c10d8d4.png)


# Stepの共通化(Flow)と一部Flowのデータ駆動

ログインや、投票のstepを共通化モジュール（Flow）する。
それにより、Flowを再利用して効率化できる。

Flowに関するhelp

https://help.mabl.com/hc/ja/articles/19078188344980

共通化したFlowとデータ駆動をもちいて、いかのシナリオを実現する。

1.login 
2.単勝で1着馬を選ぶ (for loop : 1,2,4,8,16 を選ぶ)
3.投票確認→完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/4051e77f-b0c5-415b-caf9-df929b4f9e62.png)

mablは以下のようになった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/9cd4dd1f-ee85-f987-bdef-4637215ef697.png)

まず、データ駆動なしの単純に１つの単勝購入のstepを作成する。（Flowにする）
次に、2番目のFlowを任意の数字を指定してデータ駆動で動くように修正する。
このとき、JavaScript スニペットを使う。

https://help.mabl.com/hc/ja/articles/17750378384916

まず、データ駆動させるための関数を作成する

return_arrival_array : データ駆動の配列（１着馬の馬番を指定する）を返す関数
ここで、2番目のFlowで指定する、１着馬の馬番を格納する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/b55cddcb-147b-34dd-56a9-fd19fcb3fbb9.png)

return_array_length : 引数の配列の要素数を返す関数
データ駆動の配列を引数とわたし、データ駆動のループ数を返却する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/8cf80732-1ce2-0430-6da7-80ab38d9c198.png)

この関数を用いて、2番目のFlowをループ処理にする。
そのループ数に、上記関数を指定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/1c1d5b66-cd16-e541-391b-8350b885eb4a.png)

参考

https://help.mabl.com/hc/ja/articles/19078186843412


click_targe_arrival : 引数に、データ駆動の配列と、要素番号を指定する。その要素番号にあたる値の馬をクリックする関数
xpathに、変数部分にデータ駆動で指定した馬番のボタンを指定する。
そして、そのxpathをclickする関数である。

なお、現在のループ数を表す変数は、{{@run.loop_index}} である。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/d4f70cbb-7ff1-f37c-ac9e-8c0c28279f70.png)

作成後、実行して対象の馬番号のボタンがクリックされていることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/34e2b536-de46-80d9-adee-087a728c1299.png)


データ駆動で任意の値をループさせるのには結構ハードルが高い。
なお、Ranorexはcsv等で定義して、その変数をmappingさせるだけで実現可能だ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/fe688fc4-3d5f-f7d9-6aa9-93228354cd41.png)


# reporting

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/1ff402c9-9b05-be5e-e604-f9b117b68a36.png)

- test stepの実行結果詳細 （成功可否、実行時間、 screenshot） が確認可能
- 各stepのDOM, HAR fileを確認可能
- 実行結果の動画でのエビデンス機能がない（Ranorexはsupportしている）


# fee

固定費 + クラウドテスト環境の実行数 x α

である。
たぶん、ローカルで実行する分には固定費だけですむと思われる。
クラウドテストの実行数に比例して値段が決まる。



# Another no support / difficulty

現時点 ( 2024/1 ) 自分が所望しているが、サポートされていない、もしくは実現が厳しい機能は以下の通り

- Mobile Native APPのsupport 
今年2024年にサポートすると告知はされている。

https://productportal.mabl.com/c/150-native-mobile-cloud-emulators-simulators