FlutterのE2Eテスト導入に向けての検討（Maestro編）

Transcript

1. Confidential © ENECHANGE Ltd. FlutterのE2Eテスト導入に向けての検討（Maestro編） FlutterのE2Eテスト作ってみた（Maestro編） 2024.05.29 Yuta KATADA 1
2. INDEX 目次 Confidential 目次 自己紹介 Flutterのテストについて Maestroでの実装 MaestroのTips Maestroを使ってみて、まとめ 01 02 03 04 05 06 2
3. Confidential 3 About Me Yuta Katada ENECHANGE株式会社 • 2023/12〜 FlutterエンジニアとしてENECHANGEにジョイン ◦ エネルギークラウド事業部/EVユニット • 2022/03〜 Flutterからモバイル開発をスタート • Swift/Kotlin修行中 • 🎮📕🎾󰝱🍺 @ktd_yuta GitHub: Yuta-KTD
4. Confidential 4 Flutterのテストについて
5. Confidential 5 Flutterのテストについて 引用元: https://docs.flutter.dev/testing/overview Flutterのテストには、以下のように階層分けされてます • Unit Test: 単一の関数/メソッド/クラスのテスト • Widget Test: 単一のウィジェット(コンポーネント)のテスト • Integration Test: アプリ全体や複数機能を結合した状態のテスト 👈今回はこれ
6. Confidential 6 Flutterのテストについて 今回のPJでは、やりたいことや、メンバー特性、コストなどを考えた結果 • integration_test • Maestro を候補として、検証を行いました 私はMaestro検証を多めに行ったので、Maestroを触った所感や実装コストなどを考えてみました Flutterのintegration_testの選択肢はいくつかあります • integration_test • Maestro • MagicPod • Autify etc….
7. Confidential 7 Flutterのテストについて “Maestro is the simplest and most effective mobile UI testing framework.” Maestroは、最もシンプルで効果的なモバイルUIテストフレームワークです。 • Flowsと呼ばれるyamlファイル形式で記述を行う ◦ 宣言的にケースをかけて直感的で簡単 ◦ 対象のWidgetの選択は表示文字もしくはSemantic Labelで行う • OS表示のUI（権限確認ダイアログ等）も操作できる • Maestro Cloud を使うことでCI上での実行が可能 • 遅延を考慮しているので、基本的に sleep() を入れる必要はない https://maestro.mobile.dev/ https://blog.mobile.dev/introducing-maestro-painless-mobile-ui-automation-bee4992d13c1 Maestroの特徴は以下のとおりです
8. Confidential Maestroでの実装 8
9. Confidential 9 Maestroでの実装 プロダクトに落とし込む前にサンプルアプリで使い勝手を試しました 今回のプロダクトの特徴に合わせて以下機能を備えたアプリにしています • 位置情報の権限確認 • 擬似的なログインフォーム • GoogleMapの表示 ローカルとGitHub Actionsでテストしました
10. Confidential 10 Maestroでの実装 • こんな感じで実装しました（部分的 & Androidのみ掲載） • API REFERENCEがあれば基本的な実装は一通り可能です ◦ tapOn ◦ inputText ◦ assert(Not)Visible
11. Confidential 11 Maestroでの実装
12. Confidential MaestroのTips 12
13. Confidential 13 MaestroのTips 1⃣ maestro hierarchy を使って実装外のLabelを特定する
14. Confidential 14 MaestroのTips 1⃣ maestro hierarchy を使って実装外 のLabelを特定する • maestro hierarchy は表示中の画面要素を階層構造で表示 します • maestro hierarchy を使うことでOS標準のUI要素の semantic labelを特定することができる場合があります • 端末の言語やOSバージョン考慮不足の失敗を減らせる ◦ もちろんiOS/Androidごとに設定は必要なので注意 例: Androidの位置情報 com.android.permissioncontroller:id/permission_allow_foregrou nd_only_button
15. Confidential 15 MaestroのTips 2⃣ runFlow でFlowをまとめてコストを削減する
16. Confidential 16 MaestroのTips 2⃣ runFlow でFlowをまとめてコスト を削減する • runFlow はFlowの中で別のFlowを呼び出し実行するコマンド • 連続したFlow実行は、runFlow以外に別ファイルのFlowをその まま実行する、2つの選択肢がある • Maestro CloudはFlowごとに 0.1$/回 という課金システム • runFlow で呼び出されたFlowはコストにカウントされない ◦ コスト削減が可能 • ただし1Flow実行は7分以内という制限があるので注意
17. Confidential 17 MaestroのTips 3⃣ takeScreenshot でエビデンスを取得する
18. Confidential 18 MaestroのTips 3⃣ takeScreenshot でエビデンスを取 得する • Flowコマンドの takeScreenshot で指定したタイミングで スクショを撮影し、出力できる ◦ ローカル実行: 実行したディレクトリのルート ◦ Maestro Cloud: クラウドコンソール上 • テストエビデンスを残したい時に便利
19. Confidential 19 その他 • OSは Device Configuration 記載のバージョンであれば、Actionsのyamlで android-api-level、ios-versionで 指定可能 • 公式からWidget実装のTipsも提供されている ◦ Semanticsでラップしたボタンウィジェットを作り、leancode_lintライブラリで標準ボタン作成を抑制 するもの • 課金にはサブスク形式とクレジット購入形式がある • （気になったこと/ローカル限定）iOSで permissions: { all: unset } にしても通知権限がONのままだった ◦ 設定変更や再インストールで解決 ◦ （同じ現象にあった人いたらぜひ教えて欲しいです！）
20. Confidential Maestroを使ってみて、まとめ 20
21. Confidential 21 試してみた感想 https://patrol.leancode.co/ • かなり簡単にフロー作成ができる！ ◦ 実行環境さえ作れば専門知識はほぼ不要 ◦ 事前キャッチアップが難しいPJなどに最適 • ローカル、CI環境ともに環境構築が簡単！ • 「工夫次第」で変更に（ある程度）強いテストも作れる！ • 変更に強いフロー作成を行うには、 階層構造でのFlow作成や maestro hierarchy を活用する必要がある • integration_testでもpatrolを使うことでOS由来のUIを触ることができるが、Maestroの方が環境構築や実際のテスト 記述のハードルが低い • 一方で、いくらSemantic Labelを指定してもintegration_testと比べると変更に弱かったり、設計手法も限られるので 一概にMaestroがいい！とは言えない • コスト面でもどうしても 0.1$/Flow は integration_test より高くつく...💸
22. Confidential 22 まとめ Maestroは実装・環境構築含めて簡単！ プロジェクトのテスト要件にもよります が、ぜひ選択肢に加えてみるのはいかが でしょうか？
23. Confidential © ENECHANGE Ltd.