Flutterアプリの E2Eテストツール事情 2023.08.25

About me • 脇坂 雅幸 (Wakizaka Masayuki) • ソフトウェアエンジニア at MagicPod • 経歴: iPhoneアプリ開発 -> テスト⾃動化エンジニア -> テストエンジニア -> テストマネジャー -> 現職 • OSS: Appium/Chronium/Android コントリビューター • テニス歴: 6年 (とある草⼤会でついに優勝)

MagicPod • Web & モバイルアプリのE2Eテスト⾃動化SasS • ノーコードで簡単にテスト作成 • 豊富なコマンドと柔軟性とメンテナンス性が強み @MagicPodJP

エキスパートが作ったテストツール 著者 翻訳者 コミッター

ユーザー様のブログ記事‧発表 MagicPod実⾏後の本番デプロイを ⾃動化するための⾃作GitHub Actions みてねのE2E⾃動テスト導⼊戦略 アプリのテストに MagicPodを導⼊している話 【インターンレポート】⾃動テストを 実装したら衝撃を受けた学⽣の話 Ubieのアプリ開発を⽀える MagicPodを使った⾃動テスト テスト⾃動化初⼼者がノーコードツール 「MagicPod」でテスト⾃動化に挑戦してみた

本⽇のお話 • integration_test はFlutterアプリ開発者には⼿軽に使える 選択肢ですが、システムのUI要素の操作等に苦しみます • システムのUI要素等を操作したい場合の選択肢を紹介します • MagicPodによるFlutterアプリサポートの近況もご紹介します • (なお、すみません、今回はFlutter for webは対象外です)

1. テスト⾃動化ピラミッド 2. Flutterアプリのテストと課題 3. Flutterアプリ向けの E2Eテストツール5選

1. テスト⾃動化ピラミッド 2. Flutterアプリのテストと課題 3. Flutterアプリ向けの E2Eテストツール5選

テスト⾃動化ピラミッド 1. テスト⾃動化ピラミッド 初めての⾃動テスト 1章 UI test Integration test Unit test 細かいロジックを⾼速にテスト 統合部分のチェックには不向き ユーザ操作と同じ、 End to Endのテスト スピード‧安定性に⽋ける サービス層(Web APIなど) のテスト UIテストの⽋点を補うが 詳細さには⽋ける • 異なるレベルのテストをそれぞれ適量作り込むことを推奨するモデル • Unit testを厚くすることで開発のアジリティを確保できる

テスト⾃動化ピラミッド ⾃信⼤ ⾼アジリティ • テスト⾃動化ピラミッドは⾃信とアジリティのトレードオフ 1. テスト⾃動化ピラミッド UI test Integration test Unit test

• テスト⾃動化ピラミッドは⾃信とアジリティのトレードオフ テスト⾃動化ピラミッド 今⽇のテーマは この層 1. テスト⾃動化ピラミッド ⾃信⼤ ⾼アジリティ UI test Integration test Unit test

1. テスト⾃動化ピラミッド 2. Flutterアプリのテストと課題 3. Flutterアプリ向けの E2Eテストツール5選

Flutterアプリのテスト 2. Flutterアプリのテストと課題 • ユニットテスト: 関数やメソッド、クラス単位で実施するテスト • ウィジェットテスト: ウィジェット単位で実施するテスト • インテグレーションテスト: 端末にアプリをインストールして実施するUIテスト ユニットテスト ウィジェットテスト インテグレーションテスト ⾃信の度合い 少ない ⾼め 最も⾼い メンテナンスコスト 少ない ⾼め 最も⾼い 依存度合い 少ない 多め 最も多い 実⾏速度 速い 速い 遅い https://docs.flutter.dev/testing/overview

Flutter公式のテストパッケージ 2. Flutterアプリのテストと課題 • test: 各テストレベルで必要なコアAPIを提供 • flutter_test: ウィジェットテストに必要な APIを提供 ファインダー(*)という仕組みでウィジェットを操作できる • flutter_driver: Flutterアプリを実機やシミュレーター/エミュレーター上 で実⾏するためのAPIを提供 • integration_test: インテグレーションテストに必要なAPIを提供 *: Flutterアプリ内のウィジェットを識別し、取得する⽅法。Selenium/Appiumでいうロケーターのようなもの

Flutter公式のテストパッケージ 2. Flutterアプリのテストと課題 • test: 各テストレベルで必要なコアAPIを提供 • flutter_test: ウィジェットテストに必要な APIを提供 ファインダー(*)という仕組みでウィジェットを操作できる • flutter_driver: Flutterアプリを実機やシミュレーター/エミュレーター上 で実⾏するためのAPIを提供 • integration_test: インテグレーションテストに必要なAPIを提供 • integration_test は後発のパッケージ • flutter_driver からintegration_testへの移⾏が推奨されている (Migrating from flutter_driver) *: Flutterアプリ内のウィジェットを識別し、取得する⽅法。Selenium/Appiumでいうロケーターのようなもの

Flutterアプリのテスト⾃動化ピラミッド 2. Flutterアプリのテストと課題 Integration test by integration_test Widget test by flutter_test Unit test by test

Flutterアプリにおけるインテグレーションテストの課題 • Flutterのintegration_test パッケージは システムのUI要素を操作することができない(*) - 例えば、位置情報取得ダイアログやプッシュ通知 の許可ダイアログ • WebView要素も同様に操作することができない 2. Flutterアプリのテストと課題 *: https://github.com/flutter/flutter/issues/86295

1. テスト⾃動化ピラミッド 2. Flutterアプリのテストと課題 3. Flutterアプリ向けの E2Eテストツール5選

システムのUI要素を操作可能なE2Eテストツール 1. Appium 2. Appium Flutter Driver 3. Patrol 4. Maestro 5. MagicPod 3. Flutterアプリ向けのE2Eテストツール5選

1. Appium • モバイル向けではお馴染みのテスト⾃動化フレームワーク • クライアントサーバモデルで動作する • 初期のFlutterのUIはAppiumとの相性が悪かったらしく(*) 、 敬遠されがちであった • 最近はFlutter側の改善(**) により、実⽤性が向上している 3. Flutterアプリ向けのE2Eテストツール5選 *: 例えば、画⾯のUI要素が取得できなかったり、⽂字⼊⼒ができなかったりした https://github.com/flutter/flutter/issues/17988, https://github.com/flutter/flutter/issues/18060, https://github.com/appium/appium/issues/14713 **: Flutter 3.0から iOS実機でUI要素を取得できるようになった: https://github.com/flutter/flutter/issues/17988#issuecomment-1251741499

2. Appium Flutter Driver • Flutterアプリ側の flutter_driver パッケージを利⽤する - FlutterのUIはDart VM経由で操作する - システムのUIは従来のAppiumの仕組みで操作する • デバッグビルドかプロファイルビルドのアプリのみサポート • integration_test の登場により、先⾏きにやや不透明感がある (*) 3. Flutterアプリ向けのE2Eテストツール5選 *: https://github.com/appium/appium-flutter-driver/issues/210, https://github.com/appium/appium-flutter-driver/issues/150

3. Patrol • Flutterアプリ向け、DartのE2Eテストフレームワーク • 最新の2.0では integration_test の諸問題を解決 (*) - テスト実⾏のたびに不必要なビルドが発⽣する - テストの並列実⾏ができない - アプリのクラッシュ時に、後続のテストに影響を与えてしまう • ただし、WebViewを操作できなかったり(**)、setUp, tearDown といったテストフックが動作しない問題(***)がある模様 *: https://leancode.co/blog/patrol-2-0-improved-flutter-ui-testing **: https://github.com/leancodepl/patrol/issues/1139 ***: https://github.com/leancodepl/patrol/issues/1501 3. Flutterアプリ向けのE2Eテストツール5選

4. Maestro • 最もシンプルで効果的な UIテストフレームワーク • YAML形式で対話的に記述可能 • iOS実機は未対応(*) • Androidはunicodeの⽂字⼊⼒が 未対応 (**) 3. Flutterアプリ向けのE2Eテストツール5選 *: https://github.com/mobile-dev-inc/maestro/issues/686 **: https://github.com/mobile-dev-inc/maestro/issues/146

5. MagicPod • FlutterアプリをE2Eテスト可能にする ための実装ガイドラインを公開 1. Flutterバージョン3以上を利⽤すること 2. テストで操作する各ウィジェットに アクセシビリティ情報を指定する 3. テストで操作する各ウィジェットの Zオーダーを適切に設定する • AppiumやMaestroの場合にも有効 3. Flutterアプリ向けのE2Eテストツール5選

5. MagicPod • Flutterアプリを正式にサポートを開始 • 各コマンドの動作確認状況やテスト作成のコツも公開 3. Flutterアプリ向けのE2Eテストツール5選

⽐較 ツール名 システムUI サポート テスト タイプ ⼿軽さ (開発者) ⼿軽さ (QA) 理由など integration_test no ホワイト ボックス的 ⭐⭐⭐⭐⭐ ⭐ ウィジェットテストの延⻑で作れ る Patrol yes ホワイト ボックス的 ⭐⭐⭐⭐ ⭐ セットアップに少し⼿間がかかる Appium Flutter Driver yes ブラック ボックス ⭐⭐ ⭐ いくつか制約があるのと将来性に やや不安あり Appium yes ブラック ボックス ⭐⭐⭐ ⭐ サーバ‧クライアントのセットア ップが必要 Maestro yes ブラック ボックス ⭐⭐⭐⭐ ⭐⭐⭐ yamlで直感的に書け、作る⼿間も 少ない MagicPod yes ブラック ボックス ⭐⭐⭐⭐ ⭐⭐⭐⭐ SaaS。ノーコードで書ける 3. Flutterアプリ向けのE2Eテストツール5選

まとめ • integration_test はシステムのUI要素を操作できない • FlutterアプリをE2Eテストするにあたり、Appium以外の 選択肢が増えてきた • テストツールの得意不得意や要件に沿って、ツールを選ぶ 必要がありそう • AppiumやMaestroの場合は、 FlutterアプリをE2Eテスト 可能にするための実装ガイドライン も参考に！

EOF

参考 • Deep Dive into Appium for Flutter App • Flutter Testing Guide - Everything You Need to Know • Dartソースコードが実⾏されるまでの構造を理解する • REIMAGINING FLUTTER UI TESTS WITH PATROL • MaestroをGitHub Actions上で動かす ~Android編~ • UI テストはもうMaestroでいいのかもしれない