[T-DASH + AnyTest] モバイルのWEBテストを実機でテストする

# はじめに

VALTESはモバイル端末実機を手元になくても利用できるサービスAnyTestを提供している
このサービスを使うと、複数の端末をリモートから遠隔操作して、モバイルのテストを行うことができる。

https://service.valtes.co.jp/anytest/

また、テスト自動化ツールT-DASHを提供している
T-DASHは基本的には、ローカルPCのWEBブラウザに対してテストを行うものである。
モバイルのWEBアプリケーションのテストは、単体では行うことができません。
モバイルのテストを行う場合、chromeのUser Agentを変更し、モバイルのエミュレータとして起動、操作・テストすることで、実現できる。

https://service.valtes.co.jp/t-dash/


とはいえ、やはり実機で検証したい。
また、いろんな機種でテストしたい。

など、あると思います。
今回、この課題を解決するため、T-DASHのテストをAnyTest上でテストする流れを紹介する

# AnyTest

WEB上から、使用したい端末を選ぶことができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/e952d639-37ce-581d-36c7-03bd9b8d35f0.png)

端末を選択すると、WEB上で端末を操作することができます
モバイルの基本操作に加えて、apk, ipaファイルをアップロード・インストールすることができるため、開発中のモバイルアプリケーションのテストを行うこともできる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/a96aca51-9d5e-1586-4cd0-fe2f52ecdb10.png)

# AnyTest と T-DASHの連携

## AnyTest側の設定

Profileの画面に、 「Your API Access_key」があります。
この値を取得します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/d7a44977-cc97-63a9-c130-3d5d9666dd4f.png)

## T-DASH側の設定

「設定」 -> 「AnyTest連携」を選択します。

APIユーザー名に、AnyTestのログインアカウント
APIアクセスキーに、先ほどのAccess_keyを入力します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/573fb33d-413c-40fc-c085-e4d7076c4b88.png)

# テスト対象

テスト自動化練習サイトを用いる。
こちらで、以下ユーザーでログインできることを確認するテストを作成する

| 項目 | 値 |
|:-----------|:------------|
| メールアドレス       | ichiro@example.com        | 
| パスワード       | password       | 
| 名前 | 山田一郎 |


上記ユーザーでログインする

このサイトはレスポンシブで作成されているため、基本動作はPCとモバイルで同じだが、若干UIが異なる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/9d041d46-2f71-cff2-f827-02f30b7d9c15.png)



# T-DASH 

## 画面定義

T-DASHの画面キャプチャーツールで基本的に要素は取得する。
今回のテスト対象がレスポンシブのため、画面キャプチャーツールのサイズを変更することで、モバイルにしか出てこない要素を取得することができる。

例えば、HOTEL PLANISPHEREのTOPページです。
こちら、横幅を狭めた場合、ヘッダメニューがハンバーガーメニューのなかに収められます。
モバイルのWEB表示はこちらになります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/162f5823-da10-d5c1-9eb0-599ffc584680.png)

最大化した状態では、ハンバーガーメニューはありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/790e11ae-e231-57ce-f76f-219477a7a785.png)

このように、レスポンシブでUIが見る環境（PC、モバイル）で異なる場合、画面キャプチャーツールのサイズを変更して取得を行います。


今回、画面定義で取得した要素は以下の通りです

| 画面 | 要素 | 値 |
|:-----------|:------------|:------------|
|Top|ログイン|//a[text()="ログイン"]|
|Top|ハンバーガーメニュー|//nav/button/span[@class='navbar-toggler-icon']|
|ログイン|メールアドレス|//input[@id="email"]|
|ログイン|パスワード|//input[@id="password"]|
|ログイン|ログイン|//button[@id="login-button"]|
|マイページ|氏名|//html/body/div/div[2]/div[1]/ul/li[2]/div/p|




## スクリプト作成

以下のスクリプトになる

| 動作 | 画面名（設定値１） | 要素名（設定値２） | 設定値（設定値３） | 
|:-----------|:------------|:------------|:------------|
|アプリケーションを起動する |URLをブラウザで開く | |https://hotel.testplanisphere.dev/ja/index.html |
|要素をクリックする | TOP	|ハンバーガーメニュー | |
|テキストを入力する | ログイン		|メールアドレス | ichiro@example.com|
|テキストを入力する | ログイン		|パスワード | password|
|要素をクリックする | ログイン|ログイン | |
|要素のテキストが一致するかを検証する |マイページ		 | 氏名| 山田一郎|


## テスト実行

テスト実行するときに、「テスト環境選択」で「AnyTest連携」を選びます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/b10e7c29-d721-753a-5675-e05a4f84a913.png)

端末を選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/08fe5db6-d9b6-3f24-0877-ec9025cfe8b4.png)

AnyTestにアクセスすると、現在テスト中の端末の状況をリアルタイムで確認することができる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/e2681ac6-756c-d06d-26cc-544d819b5a6c.png)

テスト結果はこのようになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/e17083ea-d903-e121-1ec4-62226640e6d1.png)