CodeceptJSでAppiumテスト環境構築メモ

# 概要
CodeceptJSでAppiumのテスト環境が簡単に開始できたのでメモ。
お題：[Selenium練習サイト](http://example.selenium.jp/reserveApp_Renewal/)
環境：
Windows10 64bit 20H2 64GByte 第10世代Core i7
Android Studio 4.1.2 デバイスはEmulatorを利用
Appium v1.21.0
手順としては、

1. webdriverioのインストール
2. CodeceptJSプロジェクト作成
3. date-fnsインストール（本プロジェクト固有）
4. codecept.config.js 修正
5. テストケース修正
6. Appium起動、Android Emulator起動
7. テスト開始

# インストールならびにCodeceptJS プロジェクト設置
設置したいフォルダで以下の操作となります。

webdriverioをインストール

```
npm install codeceptjs webdriverio --save
```
Codeceptjsプロジェクトの雛形設置

```
npx codeceptjs init
```
テストケースを格納するフォルダは一律「reserve_test」とし、後はhelperにAppiumを選ぶ、platformはAndroid、言語はja-JP（テストケースを日本語では記述していませんが）
Featureは、機種毎に異なった名称を指定します。これは、後でAllureのレポートで使われます。

```
? Feature which is being tested (ex: account, login, etc) ReserveTestByNexus6
? Filename of a test ReserveTestByNexus6_test.js

Test for ReserveTestByNexus6_test.js was created in C:\works\ReservePageTestByAppiumCodeceptJS\Nexus6\ReserveTestByNexus6_test.js
```
date-fnsインストール（このプロジェクト固有）

```
npm install date-fns
```
ここまでの作業で、プロジェクトは次のようになります。

```
Project root
+-- node_module
+-- output
+-- reserve_test
    +-- reserve_test.js
+-- codecept.config.js
+-- jsconfig.json
+-- package.json
+-- package-lock.json
+-- step_file.js
```
ここから、テストケースをreserve_test.jsに記述、カスタムステップをstep_file.jsに記述、宿泊初日と宿泊最終日をカレンダーから設定するテスト用のビジネスロジックをconnector.jsで追加
をしていきます。といっても、PCでほとんど作成済みなので、helperがplayWrightからAppiumに変わったくらいの感覚です。connecdtor.jsとstep_file.jsは、ファイルコピーだけ。
# codecept.conf.jsの修正
今回、Android Emulatorを7機種用いたテストにしましたので、機種毎にプロジェクトを設置し、テストで使うEmulatorをcodecept.conf.jsにて指定しました。
全ての機種でテストを順番に実施するのは、各機種毎のプロジェクトの1つ上のフォルダからPower Shellで実行としました。
codecept.conf.jsのhelperは次のようです。

```codeceptjs.conf.js
 output: '../output',
 helpers: {
    Appium: {
      platform: 'Android',
      desiredCapabilities: {
            automationName: 'UiAutomator2',
            udid: 'emulator-5558',
            browserName: 'Chrome'
      }

    }
  },
```
予め起動しておいたAndroid Emulatorのポート番号は、例えば次のように確認できます。
![install004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939617/013506a4-241a-df86-ee00-f2bb8d5e7567.png)
生AppiumをJavaから識別したときは、avd名（この場合は、Nexus_6_API_29）だったのですが、
CodeceptJSでは、その横のポート番号で識別できました。
このへんがいつもカット＆トライなので、苦労します。
Allureのレポートとエラー発生時のスクリーンショット保管場所は、./output から ../oputput に書き換えています。1つ上のフォルダに機種毎のテスト結果を保管することにしました。
Allureにテスト結果をレポート生成させるには、以下の追加を忘れずに。

```codeceptjs.conf.js
 allure: {
     enabled: true
 }
```
あと、タブレット端末と言っても、デバイスを縦向きから横向きにしたときにナビゲータ・ボタンが必ず非表示にならないケースも時々あって（画角とメニュー項目数の関係かな？）、一様にナビゲータ・ボタン押下にしてしまうと、テストが止まってしまった経験から、テストシナリオにデバイス別にそのあたりを記述できるのは、助かります。Gherkinではしょうがないので、デバイス名を変数として持たせて、StepDefinitionで切替えてましたから。
# テストケース修正
モバイルデバイスは、デバイスを縦にしたり横にしたりする操作がPCから追加になりますので、テストケースを修正します。
テストデータは、以下のようなPictmasterから生成して整形加工しています。
![pict001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939617/28f8de1f-8471-c647-c644-7e70abb0bebc.png)
宿泊初日だの連泊数だのテストするデバイスだの、項目を入力して実行ボタン押すと、
![pict002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939617/178a4497-2607-1727-23a1-80445a05b9f5.png)
組み合わせを生成するので、ここに宿泊料金の合計計算式を埋め込んで、テストデータの期待値とします。
テキストエディタに必要箇所をコピペして、TAB区切りになっているところを | 区切り（Gherkinの場合）に置換でテストデータできあがり。これをテストシナリオに貼り付けます。
デバイスを縦にしたり・横にしたりの操作は、CodeceptJSにはバンドル済みですね。楽ちんです。
#テスト開始
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">夏休みの宿題2<br>Appiumを使ったタブレット端末のテストをCodeceptJSでする。 <a href="https://t.co/9nL4t3iGrP">pic.twitter.com/9nL4t3iGrP</a></p>&mdash; kazuhiroYoshino (@XSyrIQwKY7Yuy6m) <a href="https://twitter.com/XSyrIQwKY7Yuy6m/status/1425970013479923712?ref_src=twsrc%5Etfw">August 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Appiumとテストデバイス（Emulator）が起動済みであることを確認してから、
npx codeceptjs run
でテストが始まる。
この調子で、複数Emulatorのテストプロジェクトを設置してはテスト実行して、Power Shellに次のように記述すれば、一気に全機種テスト実行となり、以後、回帰テストとして使い回せます。

```ReserveTest.ps1
cd C:\works\ReservePageTestByAppiumCodeceptJS\Nexus4
npx codeceptjs run
cd C:\works\ReservePageTestByAppiumCodeceptJS
cd C:\works\ReservePageTestByAppiumCodeceptJS\Nexus6
npx codeceptjs run
cd C:\works\ReservePageTestByAppiumCodeceptJS
cd C:\works\ReservePageTestByAppiumCodeceptJS\Nexus9
npx codeceptjs run
cd C:\works\ReservePageTestByAppiumCodeceptJS
cd C:\works\ReservePageTestByAppiumCodeceptJS\Nexus10
npx codeceptjs run
cd C:\works\ReservePageTestByAppiumCodeceptJS
cd C:\works\ReservePageTestByAppiumCodeceptJS\Pixel3
npx codeceptjs run
cd C:\works\ReservePageTestByAppiumCodeceptJS
cd C:\works\ReservePageTestByAppiumCodeceptJS\Pixel4
npx codeceptjs run
cd C:\works\ReservePageTestByAppiumCodeceptJS
cd C:\works\ReservePageTestByAppiumCodeceptJS\PixelC
npx codeceptjs run
cd C:\works\ReservePageTestByAppiumCodeceptJS
allure serve ./output
```
こういうのを記述して、一気に実行できました。
レポートは、スイート以下に機種毎に作成されて、
![testResult005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939617/4c509b41-c58d-53ec-cce9-10f2ab72c13b.png)
1件だけ合計金額間違いを混入させたテストも無事レポートされました。
![testResult006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939617/23bb9168-067e-f3b4-6feb-53e025f8df02.png)

# 総括
PCである程度の準備ができていたとは言え、helper乗り換える（playWrightからAppium）だけで、ここまでアッサリ動くのはちょっと驚きました。
とても単純な事例かもしれませんが、繰り返しテストができる環境が、そばに有るのと無いのとでは、ずいぶんと違うと思います。Semantic Locatorsで割と簡単にテスト環境構築できる点でCodeceptJSは、助かりますね。
今回はAndroid Studioで提供されていたEmulatorを試しましたが、Cloudのものでもできるみたいなので、調査継続。