Appium Studioの環境構築をしてキャプチャ・リプレイをする手順

モバイルのテスト自動化ができるAppiumに関連して、AppiumStudioというツールがあります。

似た名前のものにAppium Desktopもあるのですが、それぞれの違いとしては

- Appium : モバイルの自動化をするためのテスト自動化フレームワーク
- Appium Desktop : Appiumを使って自動化するときの設定などをGUIでできるようにしてくれるツール
- Appium Studio : Appiumを使って自動テストを開発するために使えるIDE

です。

Appium Studioだけは[Experitest](https://experitest.com/)が出しているツールです。

なのでモバイルの自動化をするだけであればAppiumがあれば良いのですが、APpium Studioを使うとどれだけ楽にor初心者に優しくなるんだろうと興味があり、使ってみます。

## Appium Studioのインストール

[How Appium Works & Getting Started Easily with Appium Desktop](https://experitest.com/mobile-test-automation/appium-studio/)の中ほどにあるダウンロードリンクから。

<img width="1040" alt="スクリーンショット 2020-06-26 15.27.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/ab691b86-9816-3261-75de-a82d7ca0f345.png">

Appium Studio自体はWinでもiOSの自動化ができるのがウリのようですが、私はMacを使っているのでMac版をダウンロードします。

<img width="1193" alt="スクリーンショット 2020-06-26 15.28.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/b77e76f9-46c8-5ea7-87dc-42fb6cde00d7.png">

会社名などが必要なので、入れたうえでDownload Now。

少し待つとメールでダウンロードリンクが送られてきますので、クリックしてDownload.

<img width="480" alt="スクリーンショット 2020-06-26 15.31.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/5642570c-db9c-f5b3-a6e7-a5dfe5d3686a.png">

880MBありました。

<img width="300" alt="スクリーンショット 2020-06-26 15.32.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/af95f732-d5cd-7697-4e23-7bac89d08bfb.png">

<img width="631" alt="スクリーンショット 2020-06-26 15.39.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/68d6cc26-2ff9-6ba4-b8aa-9b1f97323f1a.png">

インストーラの画面はイマドキのアプリにしてはちょっと不親切・・・ですが、アイコンをダブルクリック。

インストーラでは基本同意してNextで進んでいけばOKです。

インストールが終わると無事起動。
<img width="1726" alt="スクリーンショット 2020-06-26 15.42.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/a053d7eb-2ab2-cbe8-0885-a6a430d163d7.png">

## 自動テストを作成する

### デバイスの追加

AndroidのシミュレータをAppium Studioから動かします。

まず、AVDマネージャからAndroidのシミュレータを起動しておきます。起動した状態で、画面左上のAdd new device to get started...の少し上、スマホの右下に＋がついたアイコンをクリック。Android Deviceを選択します。<img width="525" alt="スクリーンショット 2020-06-26 16.26.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/61dcc84f-7cde-fc04-8725-65b03ef71b77.png">


<img width="525" alt="スクリーンショット 2020-06-26 16.25.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/9a66c8a2-e58e-81cd-3c83-3c62fefad526.png">

起動中のシミュレータの情報が自動で補完された状態でデバイス追加ダイアログが出ます。このままOKをクリック。

<img width="1726" alt="スクリーンショット 2020-06-26 15.51.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/612e564b-8620-ad9e-494b-ef56deed4dd3.png">

デバイスが追加されました。

### アプリのインストール

シミュレータに対して、テスト対象アプリのインストールを行います。

Application欄のアイコンをクリック。

<img width="420" alt="スクリーンショット 2020-06-26 15.53.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/d24e056b-8c40-36b1-bd4a-8793abeee421.png">

今回はLocal diskから。

<img width="325" alt="スクリーンショット 2020-06-26 15.54.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/b805dcdf-067b-6f3e-fccc-902403cd4020.png">

apkファイルを選択してimport.

<img width="525" alt="スクリーンショット 2020-06-26 16.27.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/92fe6094-0d6f-8784-3e59-d146e7718dde.png">

無事インストールできました。

<img width="400" alt="スクリーンショット 2020-06-26 16.29.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/168fa67c-e2e0-3dd8-0298-386b0b6ce4b6.png">

### 操作の記録

インストールしたアプリに対する操作の記録をしてみましょう。

画面左のApplicationの部分で対象アプリを選択した状態で、赤丸のStart Recordボタンを選択。

<img width="1164" alt="スクリーンショット 2020-06-26 16.30.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/56668efc-d536-887f-5e41-08aebb0b0c90.png">

AVDとは別にAppium Studioでもスマホシミュレータ風のものが立ち上がります。

<img width="1676" alt="スクリーンショット 2020-06-26 16.32.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/c9e9bc93-4012-15ea-fb7b-3ca736bdf117.png">

これは独立したシミュレータではなく、AVDの画面を投影しています。実際操作を記録するときには、Appium Studioが表示している方の画面を操作していきます。

記録停止ボタンを押すと操作した内容が画面に出てきます。上ではSeleniumIDEのような形で、下には実際のプログラムとして出力されます。

<img width="754" alt="スクリーンショット 2020-06-26 16.40.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/d16e4f68-d86e-760b-9ac6-1b66f9e219a3.png">

プルダウンで言語（Javaに関してはテスティングフレームワークとAppiumClientの組合せまで）が選ぶことができます。

これは普通にコードをイチから書くのに比べると、だいぶユーザの幅を広げてくれますね。

自動記録したコードなので、xpathをごりごり使っているのは仕方ないかなと思います。

### 記録したテストの実行と結果確認

再生ボタンを押すだけで実行が始まります。

実行が終わるとブラウザでレポートが表示されます。

<img width="1666" alt="スクリーンショット 2020-06-26 16.43.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/4bb43cec-cb0c-aab6-4400-40ed87b92eeb.png">

クリックなどは操作前後のスクリーンショットも出てくるので、内容確認するには非常に良さそうです。

今回はエミュレータがもっさりしたままテスト実行させたので、ちゃんと画面遷移する前にスクショを撮ってしまっています。
この辺は要調整ですが、これはAppium Studioがなにか悪いわけではないので、やむなしです。

## まとめ

普通にAppium動かすのに比べるとだいぶ簡単にモバイルの自動操作ができました。

コードも出力されるので、一旦キャプチャリプレイでテストを実行しつつ、ゆくゆくは他のIDEで自分でコード書いて、という際にもテストが無駄にならずに良さそうです。

iOSのシミュレータや実機の自動操作や、キャプチャリプレイでなく自分でテスト手順を実装する流れもこのあと書きたいと思います。