Appiumデスクトップのインストールとテストコードの作成

本記事はこちらの記事の続きとなっています。

https://qiita.com/ys-sgn/items/a512ac5d99db35bbde0d

## Appiumデスクトップを起動する
以下の公式からインストールする（READMEの記載をよく読んで行なってください）

https://github.com/appium/appium-desktop

起動する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/48cdb368-a3b1-2f79-a8b4-31b8753e75b4.png)

Edit Configurationsを開いて各自の環境に合わせて入力を行い、Save and Restartを押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/b9274739-f737-6339-e840-193615530c42.png)

Start Serverを押すとAppiumサーバーが起動するので右上の虫眼鏡を押してDesired Capabilitiesの設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/e1004d59-7f95-f2ea-0a63-f323cab9b9a5.png)

先程wdio.conf.tsに記載したようにCapabilitiesを入力し、右下のStart Sessionを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/ac169a1e-7e42-4fb1-769b-8665eff3084c.png)

するとエミュレーター上でAPI Demosのアプリが起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/1a5863a6-0364-a9fa-99bc-f98bf530c1ee.png)

Appiumではアプリの画面上で各要素を見つけ出しその要素に対して何らかの操作をさせることが可能です。
例えば、最初に開いているこのページをホーム画面だとして、ホーム画面内の「Veiws」の項目をタップするとします。
その場合、
* 「Views」の要素を探す
* 「Views」の要素をタップする
というようにテストコードによって操作を行わせることが出来ます。

要素を見つけるための手段については、公式に記載の[セレクターストラテジー]をご覧ください。(https://appium.io/docs/en/commands/element/find-elements/)

Appiumのデモアプリでは全ての要素にcontent-descやresource-idが定義されているため、これを使用してテストコードを書いていこうと思います。

テスト手順としては以下です。
* アプリ起動
* 「Views」をタップ
* スクロールダウンする
* 「TextFields」をタップする
* テキストボックスに「Hello World!」を入力する

この時に必要な要素は、「Views」、「TextFields」、テキストボックスになるので事前に各要素のIDを取得しておきます。

**「Views」のcontent-descは「Views」**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/687af1ec-bf2b-21f7-96b2-1012c217905b.png)

**「TextFields」のcontent-descは「TextFields」**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/e67f2527-d919-094d-e622-8af1b6087bbb.png)

**テキストフィールドのresource-idは「io.appium.android.apis:id/edit2」**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/1c65f213-e09b-5f2e-2c18-3171a9d7b09a.png)


ページの種類としては、以下の３つとなる。
* アプリ起動時に表示されるHome画面
* Viewsをタップしたときに表示されるViews画面
* TextFieldsをタップしたときに表示されるTextFields画面

## テストコードの作成

上記までの手順では、Appium(サーバー)とWebdriverIO（クライアント）の環境構築 +　CucumberとPageObjectデザインパターンの基盤作りを行なってきましたが、実際にテストコードを書いてテストを実行していきます。

npx wdio configのコマンドでWebdriverIOの構成ファイルを作成した際の以下の質問で、既にCucumberとPageObjectデザインパターンの導入が完了しています。
```
? Which framework do you want to use? cucumber
? Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? Yes
```
appium-testプロジェクト内にはすでにfeaturesフォルダが作成されており、
その中にはいくつかのファイルがあり、それぞれの用途は以下になります。

* login.feature　　　　　・・・Gherkin記法でテストシナリオを記載する
* pageobjects/~.page.ts　・・・アプリケーションのページの要素や処理を定義する
* step-definitions/steps.ts　・・・テストシナリオに基づいた処理を実装する

#### 各Pageを定義する

各ページに存在する要素をGetterで定義する。（返す値は使用するセレクターによって変える必要がある）

page.ts ・・・各ページの親クラス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/ead51181-9cf7-ab68-74fc-b4428251bb6d.png)

Home.page.ts ・・・ホーム画面(ApiDemosアプリの最初の画面)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/b339e13d-c262-a7f6-40c1-e719dbff060b.png)
Views.page.ts ・・・Views画面(ホーム画面で「Views」をタップした時に表示される画面)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/39224d75-0dd4-aef9-7226-7f3ee7682df0.png)
TextFields.page.ts
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/c44117f1-cb17-12c7-1369-3fe5914c5d93.png)




#### Featureファイルにテストシナリオを書く

InputText.featureファイルを作成し以下を記述する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/e5ea038f-b6f4-761c-bd62-b76aa9ba872c.png)

#### Stepsを実装する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/d23c3227-4fb8-54a2-d283-bdc8f2bcc995.png)


構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/03cb5d03-8ef6-9704-252b-4899a4df2ad6.png)



#### テストを走らせる
```
~/WorkSpace/appium-test $ npx wdio test/wdio.conf.ts
```
全て成功すればこのようなログが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/63d74a28-6290-d630-1d98-75d47ef04988.png)

![ApiDemos(8-5).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2759762/555ff22e-7dfa-bc4f-d5a6-0803ac2bfa28.gif)