Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for mwakizaka mwakizaka
August 25, 2023

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

Avatar for mwakizaka

mwakizaka

August 25, 2023
Tweet

More Decks by mwakizaka

Other Decks in Technology

Transcript

  1. About me • 脇坂 雅幸 (Wakizaka Masayuki) • ソフトウェアエンジニア at

    MagicPod • 経歴: iPhoneアプリ開発 -> テスト⾃動化エンジニア -> テストエンジニア -> テストマネジャー -> 現職 • OSS: Appium/Chronium/Android コントリビューター • テニス歴: 6年 (とある草⼤会でついに優勝)
  2. テスト⾃動化ピラミッド 1. テスト⾃動化ピラミッド 初めての⾃動テスト 1章 UI test Integration test Unit

    test 細かいロジックを⾼速にテスト 統合部分のチェックには不向き ユーザ操作と同じ、 End to Endのテスト スピード‧安定性に⽋ける サービス層(Web APIなど) のテスト UIテストの⽋点を補うが 詳細さには⽋ける • 異なるレベルのテストをそれぞれ適量作り込むことを推奨するモデル • Unit testを厚くすることで開発のアジリティを確保できる
  3. Flutterアプリのテスト 2. Flutterアプリのテストと課題 • ユニットテスト: 関数やメソッド、クラス単位で実施するテスト • ウィジェットテスト: ウィジェット単位で実施するテスト •

    インテグレーションテスト: 端末にアプリをインストールして実施するUIテスト ユニットテスト ウィジェットテスト インテグレーションテスト ⾃信の度合い 少ない ⾼め 最も⾼い メンテナンスコスト 少ない ⾼め 最も⾼い 依存度合い 少ない 多め 最も多い 実⾏速度 速い 速い 遅い https://docs.flutter.dev/testing/overview
  4. Flutter公式のテストパッケージ 2. Flutterアプリのテストと課題 • test: 各テストレベルで必要なコアAPIを提供 • flutter_test: ウィジェットテストに必要な APIを提供

    ファインダー(*)という仕組みでウィジェットを操作できる • flutter_driver: Flutterアプリを実機やシミュレーター/エミュレーター上 で実⾏するためのAPIを提供 • integration_test: インテグレーションテストに必要なAPIを提供 *: Flutterアプリ内のウィジェットを識別し、取得する⽅法。Selenium/Appiumでいうロケーターのようなもの
  5. 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でいうロケーターのようなもの
  6. システムのUI要素を操作可能なE2Eテストツール 1. Appium 2. Appium Flutter Driver 3. Patrol 4.

    Maestro 5. MagicPod 3. Flutterアプリ向けのE2Eテストツール5選
  7. 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
  8. 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
  9. 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選
  10. 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
  11. 5. MagicPod • FlutterアプリをE2Eテスト可能にする ための実装ガイドラインを公開 1. Flutterバージョン3以上を利⽤すること 2. テストで操作する各ウィジェットに アクセシビリティ情報を指定する

    3. テストで操作する各ウィジェットの Zオーダーを適切に設定する • AppiumやMaestroの場合にも有効 3. Flutterアプリ向けのE2Eテストツール5選
  12. ⽐較 ツール名 システムUI サポート テスト タイプ ⼿軽さ (開発者) ⼿軽さ (QA)

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

  14. 参考 • 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でいいのかもしれない