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

Appiumクライアント(WebdriverIO)の構築

Appiumサーバとやりとりを行うクライアント側の構築をします。
Appiumを動かすためのテストコードなどはクライアント側で実装を行います。

WebdriverIO

WebdriverIOとは、WebDriverプロトコルに対するAppiumの拡張機能をサポートするクライアントライブラリであ流。JavaScriptを使用する場合はクライアントライブラリとしてWebdriverIOを使用します。（使用する言語ごとにクライアントライブラリが用意されている）

WebdriverIOのインストール

npmでインストールする

~/WorkSpace/appium-test $ npm install --save-dev @wdio/cli
~/WorkSpace/appium-test $ npm install --save-dev @wdio/local-runner

次にWebdriverIOの構成ファイルを作成します。
下記のコマンドを打つことで対話形式でWebdriverIOの構成を行うことが出来ます。

~/WorkSpace/appium-test $ npx wdio config

各質問に対してどのような構成にするのかを聞いてきます。

↓
質問と答え（表題の構成で行う場合）

最後に
Do you want me to run npm install (Y/n)
と聞かれるのでEnter(y)を押すとnpm installが行われます。

テストに使用するアプリファイルを準備する

apps/Androidフォルダを作成して、Androidフォルダ内にAPKファイルをセットする。
(本記事ではデモ用のアプリを使用するため、APKファイルをAppiumのGitHubから取得しておく)

~/WorkSpace/appium-test $ mkdir apps
~/WorkSpace/appium-test $ mkdir apps/Android

ファイル構成は↓

エミュレーターを準備する

AndroidStudioのAVD Managerからエミュレーターを起動し、adb devicesコマンドで起動しているエミュレーターの名前を調べる。
※この例ではAndroid12のPixel4を使用する

起動しているエミュレーター名は「emulator-5554」

先程構成をしたWebdriberIOの設定ファイル(wdio.conf.ts)を開きます。

開いたwdio.config.tsに以下の変更と追記を行なって保存する

追記するもの

import {join} from 'path'; //２行目に追記する
hostname: 'localhost',
path: 'wd/hub',

変更するもの

maxInstance: 10 -> maxInstance: 1 ※複数の端末でテストを行えるようになるまでは1で良い
capabilities: [{},], の中身を↓に変更

capabilities: [
  {
    maxInstances: 1,
    platformName: 'Android',
    automationName: 'UiAutomator2',
    app: join(
      process.cwd(),
      './apps/Android/ApiDemos-debug.apk'
      ),
    platformVersion: '12',
    deviceName: 'emulator-5554',
    newCommandTimeout: 60,
  },
],

service: ['appium'], を↓に変更

services: [
    [
      'appium',
      {
        command: 'appium',
        logPath: './config/logs/',
        logFileName: 'appium.log',
        args: {
          address: 'localhost',
          port: 4723,
      },
    },
  ],
],

(追記)
testフォルダ内にあるtsconfig.jsonファイルはappium-testフォルダに移動させる
※移動させないとコンパイルエラーが起きる

Appiumを実行してみる

実行する前にあらかじめエミュレーターを立ち上げておきます。

AndroidStudio > AVD Manager > (wdio.config.tsのcapabilitiesに記載したエミュレーターを起動する)

プロジェクトのルートディレクトリで以下のコマンドを実行する

~/WorkSpace/appium-test $ npx wdio test/wdio.conf.ts

すると、appiumが動き出して、エミュレーター上でアプリが立ち上がります。

ただ、この時点ではデフォルトのテストケースのみであるため、テストが失敗してアプリが終了してしまいますが、クライアント側の構築は完了です。

次に、テストコードを作成するためにアプリの要素がどのように定義されているかをAppiumデスクトップを利用して調べます。

↓続き