TypeScriptを用いたAppiumクライアント実行環境を構築する

Appiumを導入したは良いものの、Python3やJavaScriptのクライアントでは、テストシナリオを記述する際の型の保証や、コード補完に辛さを感じたので、TypeScriptを導入しました。

## 前提
今回使用するiOSのサンプルアプリについてはこちらの記事をご参考ください。

https://qiita.com/5enxia/items/13cafabc8a82a21700bf

また、XCodeやnodejsがインストールされていることを前提としています。
ご了承ください。

## 環境構築
### 1. TypeScriptのインストール
```sh
npm install -g typescript
```

### 2. テスト実行用のディレクトリの作成
```sh
mkdir appium-client-ts
cd appium-client-ts
```

### 2. webdriverio(WDIO CLI)インストール
```sh
npm i @wdio/cli
```

### 3. wdioの設定
```sh
 npx wdio config
```

上記のコマンドを実行し、回答すると、以下のような出力になります。

```sh
=========================
WDIO Configuration Helper
=========================

? Where is your automation backend located? On my local machine
? Which framework do you want to use? mocha
? Do you want to use a compiler? TypeScript (https://www.typescriptlang.org/)
? Where are your test specs located? ./test/specs/**/*.ts
? Do you want WebdriverIO to autogenerate some test files? No
? Which reporter do you want to use? spec
? Do you want to add a plugin to your test setup?
? Do you want to add a service to your test setup? appium
? What is the base url? http://localhost
? Do you want me to run `npm install` Yes
```

順に解説していきます。

#### 3.1 バックエンドの実行場所について
```sh
? Where is your automation backend located? On my local machine
```
この質問では、WebDriverのサーバがどこにあるかを指定します。
今回はローカルでAppiumサーバを起動するので、`On my local machine`を選択します

#### 3.2 テストフレームワークについて
```
? Which framework do you want to use? mocha
```
この質問では、テストフレームワークを何にするかを指定します。
今回は[`mocha`](https://mochajs.org/)を選択します。

#### 3.3 コンパイラについて
```
? Do you want to use a compiler? TypeScript (https://www.typescriptlang.org/)
```
この質問では、テスト実行時に使うコンパイラを指定します。
今回はTypeScriptを使いたいので、`TypeScript`を選択します。

#### 3.4 テストシナリオを置くディレクトについて
```
? Where are your test specs located? ./test/specs/**/*.ts
```
この質問では、テストシナリオを置くディレクトリを指定します。
今回はデフォルトのディレクトリで構わないので`Y`(yes)を選択します

#### 3.5 サンプルテストコードの生成について
```
? Do you want WebdriverIO to autogenerate some test files? No
```
この質問では、サンプルテストコードを生成するかを指定します。
今回は一からテストコードを作成するので`n`(no)を選択します

#### 3.6 レポータについて
```
? Which reporter do you want to use? spec
```
この質問では、テスト実行時に使用するレポータを指定します。
今回はデフォルトで選択されている`spec`(Specification)を選択します

#### 3.7 プラグインについて
```
? Do you want to add a plugin to your test setup?
```

この質問では、テスト実行時に使用するプラグインを指定します。
今回は特に使用しないので飛ばします

#### 3.8 サービスについて
```
? Do you want to add a service to your test setup? appium
```

この質問では、テスト実行するプラットフォームを指定します。
今回はモバイルのネイティブアプリを対象にしているので、`appium`にチェックします

#### 3.9 ベースURLについて
```
? What is the base url? http://localhost
```

この質問では、テスト実行時のBase URLを指定します。
今回はデフォルトで選択されている`http:localhost`を選択します

#### 3.10 npm installについて
```
? Do you want me to run `npm install` Yes
```

この質問では、npmのインストール実行について問われます。
`Yes`を選択します

### 4. wdio.conf.tsの設定
インストールが終わると以下のようなディレクトリとファイルが生成されます。
```
.
└── test
    ├── tsconfig.json
    └── wdio.conf.ts
```

`tsconfig.json`はTypeScriptの設定ファイル、`wdio.conf.ts`はwebdriverioの設定ファイルです。

ここでは`wdio.conf.ts`を編集します。
エディタで`wdio.conf.ts`を開くと、

```ts
export const config: Options.Testrunner = {...}
```
というオブジェクトがあり、その中の`port`と`capabilities`を編集します。

`port`は下記に変更
```ts
port: 8100
```

`capabilities`は下記を追加します

```ts
capabilities: [{
...
 
        automationName: "XCUITest",
        platformName: "iOS",
        platformVersion: "15.4",
        deviceName: "iPhone 11",
        bundleId: "own.SampleApp",
}],
```

### 5. テストシナリオの作成
次はテストシナリオの作成です。
まず初めにテストシナリオを保存するディレクトを準備します

```sh
mkdir specs
```

次にテストシナリオファイルを作成します
```sh
touch specs/example.e2e.ts
```

ファイルが作成できたら、ファイルを開いて、以下のコードをコピー＆ペーストします

```ts
describe('Hello World!', () => {
    it('should display Hello, World!', async () => {
        const el = await $("~textField")
        const word = "Hello, World!"
        await el.setValue(word)
        await expect(el).toHaveText(word)
    });
});

```
テストの書き方については、[mochaの公式サイト](https://mochajs.org/)をご参考ください。

### 6. テストの実行
最後にテストを実行します

```sh
npx wdio run test/wdio.conf.ts
```

以上です

## おわりに
最近のJSのテストのトレンドはJestに移りつつあるので、Jestを用いた環境構築も試してみたいですね。

## 参考文献
- [Download TypeScript](https://www.typescriptlang.org/download)
- [testing-mocha](https://ja.javascript.info/testing-mocha)
- [Visual Regression Testing はじめました - 具体的な運用 Tips](https://blog.recruit.co.jp/rmp/front-end/visual-regression-testing/)
- [node-canvas](https://github.com/Automattic/node-canvas)
- [mocha](https://mochajs.org/)
- [WDIO CLI Options](https://webdriver.io/docs/clioptions/)