テストを書こう！

riverpod で状態管理を実装したアプリのユニットテストの続きです。今回は簡単なUIテストを実装します。

本記事ではローカル実行を原則とし、CI/CDでのリモート実行に関しては割愛します

Maestroとは？

簡単にUIテストを作成できるモバイル向けのテストフレームワーク、もしくはCLIとして提供されている同名のmaestroコマンドの名前です。Flutter以外にも以下のプラットフォームに対応しています。

iOS（simulatorのみサポート）
Android
Flutter
ReactNative

後述のFlowと呼ばれるyaml形式のファイルにテストを記述し、mastroコマンドで実行します。

Mastroの導入

公式docに従ってmaestroコマンドを導入します

基本的には以下のコマンドひとつで完結。upgradeする場合も同じです。

curl -Ls "https://get.maestro.mobile.dev" | bash

初回インストール時はパスを通すのも忘れずに

export PATH="$PATH":"$HOME/.maestro/bin"

iOSシミュレーターを使う場合は以下のツールも必要です

brew tap facebook/fb
brew install facebook/fb/idb-companion

テスト対象のアプリを用意

公式docsではCUI操作が紹介されていますが、通常の開発時のようにGUIのRunボタンからビルド＆インストールしても問題ありません。ビルドモードがDebugであり、Flowファイルで指定するappIdが合っていればOKです。

以下はCUIの操作例です。

まずAndroid, iOSそれぞれで .apk .app ファイルのビルドが必要です（fvmを使う場合は適宜読み替えてください）。

# Android
flutter build apk --debug
# iOS
flutter build ios --debug --simulator

このとき、UIテスト向けに通常とは異なるフレーバー（mockなど）を指定してビルドする場合もあります。下記は一例ですので各自の開発環境に応じてビルドしてください。

# エントリーポイントの切り替え
flutter build apk --debug -t lib/main_mock.dart
# dart-define-from-fileの使用
flutter build apk --debug --dart-define-from-file=flavor/mock.json

次にビルドしたアプリを端末にインストールして準備完了です。

# Android端末・エミュレータのシリアル名一覧を確認
adb devices
# インストール
adb -s ${デバイスのシリアル名} install build/app/outputs/flutter-apk/app-debug.apk

# iOSシミュレーターのデバイス一覧を確認
xcrun simctl list devices
# インストール
xcrun simctl install ${device} build/ios/iphonesimulator/Runner.app

テストの用意

Maestro では Flow と呼ばれるyaml形式で記述されたテストの定義ファイルを用意します。

使用できるコマンド一覧・詳細は公式リファレンスを参照してください。

（例）基本的な操作と検査コマンド

appId: ${テスト対象のappId}
----
- launchApp # アプリを起動する
- assertVisible: "text" # 指定した文字列の表示を確認する
- tapOn: "TextFiled-label" # フォーカスを当てる
- eraseText # 現在の入力を削除
- inputText: "input" # TextFiledに入力
- tapOn: "Go!" # 指定した文字列部分をタップする
- waitForAnimationToEnd # アニメーションが終わるまで待機する
- scrollUntilVisible: #　指定した文字列が表示されるまで下方向にスクロールする
    element:
      text: "target"

Flow記述のTips

いくつかハマりポイントがあったので紹介

TextFieldへの入力

最初にTextField.decoration.labelText で指定した文字列を tapOn でタップしてフォーカスを当てておく必要があります。ラベルが不在の場合は後述のSemanticsを利用します。また新しい入力で上書きする場合は eraseTextで現在の値を削除するのも忘れずに。

Semanticsの利用

Textのような目に見える文字列が不在でtapOnのターゲットを上手く指定できない場合は、Semanticsウェイジェットでラベルを指定できます。tapOn: ".*my-label.*"

Semantics(
    label: "my-label",
    child: MyWidget()
)

Androidと日本語入力

マルチバイト文字は上手く入力できません。入力値はascii文字に限定し、テスト端末のシステム言語を英語にするなどしてIMEの入力モードを英語に固定するのが無難です。

テストの実行

UIテストを実行するエミュレータ or デバッグ接続した実機（iOSは実機不可）を用意した状態で、以下のコマンドを実行します。Terminal上に現在のステップが表示されるので最後まで実行を待てば完了です🎉

maestro test ${path_to_flow.yaml}

添付動画のアプリとFlowファイルはGitHubで公開しています。

【Flutter】MaestroでUIテストに入門