MagicPodでFlutter アプリをテストする 2023.07.14

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

本⽇のお話 • 最近お問い合わせの多いFlutterアプリのテスト • 正式な公開には⾄っていないものの Flutterアプリ向けのガイドラインを作りました (近⽇公開予定) • そこからお話をします

1. MagicPodとFlutterアプリ 2. テストしてみた

1. MagicPodとFlutterアプリ 2. テストしてみた

Flutterとは • Googleが2017年に発表したオープンソースのマルチプ ラットフォームの開発フレームワーク • Android / iOS / Web / Windows / macOS / Linuxの6つの アプリを全く同じソースコードで開発可能 • Flutterのプログラミング⾔語にはDartというコンパイル型 ⾔語が採⽤されている https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/03_chapter1_introduction 1. MagicPodとFlutterアプリ

Flutterアプリのサポート状況 • 2020年11⽉に問い合わせを頂いて以来、積年の課題 https://github.com/Magic-Pod/japanese-issue-and-doc/issues/242 1. MagicPodとFlutterアプリ

Flutterアプリテストにおける課題 • Androidで⽂字⼊⼒ができない • iOS実機でページソースがとれない 1. MagicPodとFlutterアプリ

Flutter 3.0 で潮⽬が変わった? https://github.com/flutter/flutter/issues/18060#issuecomment-1251740879 1. MagicPodとFlutterアプリ Flutter 3.0からiOS実機でテストできるようになった！ (脇坂による超要約)

実は既に事例もある ⾮エンジニアでもできる！FlutterアプリでMagicPodの⾃動テスト実⾏ 1. MagicPodとFlutterアプリ

લճ ͷϛʔτΞοϓ https://speakerdeck.com/nozomiito/zui-jin-nomagicpodmatome?slide=38 1. MagicPodとFlutterアプリ

1. MagicPodとFlutterアプリ 2. テストしてみた

テスト条件 • テスト対象アプリ - Flutter Catalog (Google Play Store、iOS App Store) - Flutter Gallery (Google Play Store) • 環境 - クラウド端末: iPhone 12 (iOS 16.1), Pixel 3 (Android 12) - SauceLabs: iPhone 11 Pro (iOS 16), Google Pixel 6 or 7 (Android 13.0) - Browserstack: iPhone 14 (iOS 16), Google Pixel 7 (Android 13.0) 2. テストしてみた

動作確認済のコマンド • 画⾯操作: タップ、フリック、スワイプ、 フリーハンドで図形を描画、 表⽰されるまでスワイプ、位置指定タップ • 画⾯⼊⼒: テキスト⼊⼒、キーボードキー⼊⼒、スイッチ操作 2. テストしてみた

問題ありコマンド MagicPod Browserstack SauceLabs Android iOS Android iOS Android iOS ダブルタップ ✅ ⚠ ✅ ⚠ ✅ ✅ ドラッグ & ドロップ ✅ ⚠ ✅ ⚠ ✅ ⚠ ⻑押し & 移動 ✅ ✅ ✅ ✅ ✅ ⚠ ピンチアウト ✅ ✅ ✅ ✅ ✅ ⚠ ピンチイン ✅ ✅ ✅ ✅ ✅ ⚠ ⻑押し ✅ ⚠ ✅ ⚠ ✅ ⚠ 画⾯中央をマルチタップ操作 ❌ ✅ ❌ ✅ ❌ ⚠ ピッカー値⼊⼒ ❌ ❌ ❌ ❌ ❌ ❌ UI要素の値を取得 ⚠ ✅ ⚠ ✅ ⚠ ✅ WebViewテスト ✅ ✅ ⚠ ⚠ ⚠ ⚠ ✅: 動作確認済み ⚠: ⼀部問題あり ❌: 動作未検証 2. テストしてみた

Flutter 3.0はすべてを解決する？ そうとも⾔えない 2. テストしてみた

Flutterアプリテストにおける課題 (再掲) • Androidで⽂字⼊⼒ができない -> 解決 • iOS実機でページソースがとれない -> 解決 2. テストしてみた

Flutterアプリテストにおける新しい課題 • テストケース側で対応が必要 - iOS/Androidでテキスト⼊⼒に失敗する場合がある - iOSでタップに失敗する場合がある - AndroidでUI要素の値が取れない • アプリ側で対応が必要 - UI要素の座標が⼤きくとれる場合がある - ⼀部のUI要素が認識できない 2. テストしてみた

まとめ • Flutter 3.0により、Flutterアプリのテストが実施しやすくなった • ごく基本的なコマンドは⼀通り動作する ただし、 • テストケースの作り⽅に⼀部コツが必要 • Flutterアプリ側で対応が必要な部分もある • FlutterアプリをMagicPodでテストしてみたい⽅にはFlutterアプリ向 けのガイドラインをお配りしております！ • ご希望の⽅はMagicPodのCSチームにお問い合わせください！！

EOF

今後も継続的に 改善を進めていきます！