文系プログラマの勉強ノート

スマホアプリ開発やデザインなどについて勉強したことをまとめています

【Xcode】XCUITest + fastlane/snapshotで始めるUIテスト(前編)

前編では、XCUITestを導入してUITestを実行してみます。

XCUITestとは

Xcode7から追加されたUIテスト機能です。
UIテストをするためのフレームワークはEarlGreyやappiumなどもありますが、
iOS8以降対応で問題なければ、XCUITestが扱いやすいと思います。

特徴

  • Xcodeに統合されている
  • アプリケーションと同じ言語で記述できる(Swift/Objective-C)
  • テストステップ毎に自動でスクリーンショットが取得される
  • アプリを操作してテストコードを作成するRecording機能がある
  • wait/sleepを入れなくても、アニメーションの待ち時間などのタイムラグをある程度上手く処理してくれる

開発環境

  • Mac OS Sierra
  • Xcode8.3
  • Swift3

導入手順

1. UI Testing Bundleを追加する

UITestを追加したいプロジェクトを開き、メニューの File > New > Target... を選択します。

iOS > Test > "iOS UI Testing Bundle" を選択して Next を押します。
f:id:an3714106:20170606221031p:plain:w500

Product Name を入力して Finish を押します。

(新規プロジェクトの場合は、作成時にプロジェクト名などを入力する画面で "Inclure UI Tests" にチェックを入れればOK)

2. テスト対象となる機能を作成する(すでにある場合は次へ)

今回はテスト用なので、テキストフィールドに文字を入力して決定ボタンを押すと
入力内容がアラートで表示される機能にしました。
f:id:an3714106:20170611111252p:plain:w250

3. Accessibility identiferを設定する(すでにある場合は次へ)

テストコードからコントロールにアクセスするために、Accessibility identiferを設定します。
コードから追加する方法もありますが、ここではIBを開いてコントロールを選び、右側のペインの
Identity inspector(左から3番目) > Accessibility > identifer
に一意の文字列を設定します。
f:id:an3714106:20170611112328p:plain

※Accessibility identiferが保存されない場合※
稀にAccessibility identiferを設定しても、実行時に保存されていないことがあります。
その場合、Accessibility identifer設定後に、座標やサイズなどレイアウト情報を変更すると保存されました。
(おそらくXcodeのバグ。保存されたあとはレイアウト情報は戻して大丈夫です。)

4. テストコードを作成する

先程追加したUITestTarget内のswiftファイルにテストコードを書きます。
(デフォルトでは"[ProjectName]UITests.swift"というファイル名になっていると思います。)

初期状態で「testExample()」というメソッドが作成されていますが、
このように「test〜」で始まるメソッドがテスト時に実行されるコードになります。
f:id:an3714106:20170611113555p:plain

testExample()内にテストコードを作成します。
"textField"、"decisionButton"は先程設定したAccessibility identiferです。

func testExample() {

    let app = XCUIApplication()

    // 文字を入力
    let textField = app.textFields["textField"]
    textField.tap()
    textField.typeText("UIテストを実行")

    // 決定ボタンをタップ
    let button = app.buttons["decisionButton"]
    button.tap()

    // 入力内容がアラートに表示される
}
5. テストを実行する

メニューの Product > Test を選択するか、テストメソッド名の左側の◇ボタンを押してテストを実行します。
◇ボタンが緑色になれば成功、赤くなれば失敗です。
f:id:an3714106:20170611121054p:plain:w400

6. テスト結果を確認する

左側のペインの Report navigator(一番右) から実行したテストを選ぶと、テスト結果の詳細が表示されます。
f:id:an3714106:20170611124452p:plain

XCUITestは自動でスクリーンショットを生成してくれます。
▼ボタンを押してツリーを開き、目のアイコンを押すとスクリーンショットを確認できます。
f:id:an3714106:20170611124939p:plain
f:id:an3714106:20170611124950p:plain:w500

もし任意のタイミングでスクリーンショットを取得したい、スクリーンショットをまとめて見たいという場合は
fastlane/snapshotを併用することで実現できます。

というわけで、後編ではfastlane/snapshotを導入していきます。