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

前提

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

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

環境構築

1. TypeScriptのインストール

npm install -g typescript

2. テスト実行用のディレクトリの作成

mkdir appium-client-ts
cd appium-client-ts

2. webdriverio(WDIO CLI)インストール

npm i @wdio/cli

3. wdioの設定

 npx wdio config

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

=========================
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 バックエンドの実行場所について

? 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を選択します。

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を開くと、

export const config: Options.Testrunner = {...}

というオブジェクトがあり、その中のportとcapabilitiesを編集します。

portは下記に変更

port: 8100

capabilitiesは下記を追加します

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

5. テストシナリオの作成

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

mkdir specs

次にテストシナリオファイルを作成します

touch specs/example.e2e.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の公式サイトをご参考ください。

6. テストの実行

最後にテストを実行します

npx wdio run test/wdio.conf.ts

以上です

おわりに

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

参考文献