Maestro MCPとClaude Code Skillsによる自律的なE2Eテスト支援

Talked at FlutterKaigi 2026

Transcript

1. Maestro MCPとClaude Code Skills による自律的な E2Eテスト支援 asmz.beer 2026/10/29 FlutterKaigi 2026 - Material Stage Akira Shimizu (asmz)
2. 誰なのか？ • • • • Akira Shimizu / asmz (@_asmz) https://asmz.beer/ 仙台在住 モバイルアプリエンジニア ◦ Flutter / React Native / ネイティブ（iOS / Android ） • 株式会社フライヤー所属 ◦ ◦ https://www.flierinc.com/ モバイルアプリケーショングループ テックリード asmz.beer 2
3. 目次 • • • • • • • モバイルE2Eテストの課題感 Maestro MCPとClaude Code Skills SkillへのE2Eテストノウハウの実装 AIエージェントによるE2Eテストの作成 AIエージェントによるE2Eテストの修復 Skillの実装を通して得られた学び まとめ asmz.beer 3
4. 今日伝えたいこと 考え方 Maestro MCPとClaude Code Skillsを、どのような方針で 組み合わせるか 実践 E2Eテストの調査・判断・修復を、Skillにどう書くか 始め方 自分たちのチームに合わせて、Skillを育てていく進め方 asmz.beer 4
5. モバイル E2Eテストの課題感 asmz.beer 5
6. モバイルE2Eテストの課題感 少人数チームの開発サイクル • モバイルアプリチームは2名 • 2週間1スプリント ◦ 前半：案件対応 ◦ 後半：QA、審査提出 asmz.beer 6
7. モバイルE2Eテストの課題感 少人数チームの QA QAでやること • 改修した箇所の動作確認 • 既存機能のデグレ確認 少人数だと改修箇所の確認に時間を取られ、 デグレ確認が手薄 になりやすい デグレ確認を E2Eテストでカバーしたい asmz.beer 7
8. モバイルE2Eテストの課題感 Maestroとは • E2Eテストフレームワーク • YAMLで宣言的にテストシナリオ （フロー）を書ける • iOS・Androidの両方に対応 appId: com.example.app --- launchApp - tapOn: "メールアドレス " - inputText: "test@example.com" - tapOn: "パスワード" - inputText: "password" - tapOn: "ログイン" maestro.dev asmz.beer 8
9. モバイルE2Eテストの課題感 E2E整備の手間を AIに肩代わりさせたい 1. テストシナリオを考える 2. アプリを操作してテストを作る 3. 実行結果を確認する 4. アプリの変更に合わせて修正する 主要シナリオから先に進めない AIエージェントと Maestro MCPで、この整備を肩代わりできないか asmz.beer 9
10. Maestro MCPとClaude Code Skills asmz.beer 10
11. Maestro MCPとClaude Code Skills Maestro MCPとは MCP対応のAIエージェントから、Maestroを操作するためのMCPサーバ AIエージェント （Claude Code） デバイス確認 list_devices Maestro MCP スクリーンショット take_screenshot シミュレータ / 実機 画面要素の取得 Flowの実行 inspect_screen run asmz.beer 11
12. Maestro MCPとClaude Code Skills Maestro MCPだけでもある程度は動く できるようになったこと 残る課題 AIがアプリを操作し、 画面を見ながら動作確認まで 進めてくれる シナリオの品質や進め方は、指示 の内容に大きく左右される 同じ判断基準を、毎回の指示で伝 え直すことになる asmz.beer 12
13. Maestro MCPとClaude Code Skills Claude Code Skillsとは • エージェントに開発ノウハウや ワークフローを持たせる仕組み • 依頼の内容に応じて、Claudeが 自動で読み込む • 今回は公式のskill-creatorで 作成 maestro-flutter-agent/ .claude-plugin/plugin.json .mcp.json Maestro MCPを同梱 skills/maestro-flutter-agent/ SKILL.md 手順と判断基準 references/ YAMLリファレンス evals.json 評価ケース asmz.beer 13
14. Maestro MCPとClaude Code Skills MCPとSkillを組み合わせる Maestro MCPで「できること」 を増やし、 Claude Code Skillsで「どう使うか」 を与える Maestro MCP：できること 画面の観察、アプリの操作、Flowの実行 Skill：どう使うか ワークフロー、判断基準、失敗したときの進め方 asmz.beer 14
15. Maestro MCPとClaude Code Skills 今回作ったもの：業務版と汎用版 業務版Skill 汎用版Skill maestro-flow-generator maestro-flutter-agent 切り出し flierのFlutterアプリ向けに作成し、 社内で運用 プロジェクト固有のルールや既存 identifierを持つ 他のFlutterアプリでも使えるように切り 出し、OSSで公開 今日のデモはこちらを使用 https://github.com/asmz/asmz-agent-plugins asmz.beer 15
16. デモアプリ • Flutter製のポートフォリオアプリ • Profile / Blog / Slide のボトムタブ構成 github.com/asmz/portfolio-app-flutter asmz.beer 16
17. このSkillで作ったテスト（動画） Maestro MCPとClaude Code Skills asmz.beer 17
18. SkillへのE2Eテストノウハウの実装 asmz.beer 18
19. SkillへのE2Eテストノウハウの実装 ワークフローの全体像 0 1 2 3 MCP接続チェック シナリオ理解 UIコード調査 セレクタ決定 4 5 6 7 フロー生成 identifier追加 再ビルド MCPで実行確認 Step 7で失敗したら、フィードバックループで調査と修正を繰り返す asmz.beer 19
20. SkillへのE2Eテストノウハウの実装 最初にMaestro MCPの接続を確認させる • 最初のツール呼び出しで list_devices を実行する • Maestro MCPが使えなければ、再接続を待つ • CLIでの代替実行は案内しない 理由： - 同じようなテストを繰り返すため、実行結果を安定させたい - Maestro MCPのツール内でクイックにフィードバックループさせたい asmz.beer 0 接続 1 理解 2 調査 3 選定 4 生成 5 ID追加 6 ビルド 7 実行 20
21. SkillへのE2Eテストノウハウの実装 セレクタの優先順位 1. Semantics identifier id: ◦ テスト用の識別子。言語やテキストの変更に影響されない 2. 表示テキスト text: ◦ identifierがない場合のフォールバック 3. 正規表現テキスト ◦ text: "Profile.*" 改行を含むa11yテキストなど（次で説明） 4. 座標 point: ◦ 最終手段 asmz.beer 0 接続 1 理解 2 調査 3 選定 4 生成 5 ID追加 6 ビルド 7 実行 21
22. SkillへのE2Eテストノウハウの実装 Flutterの落とし穴：タブの a11yテキスト • • TabBarやBottomNavigationBarのa11yテキストには、Flutterが「Tab 1 of 3」などの補足を 付け足す 言語設定やタブの数・順番で変わるため、セレクタとしては不安定 悪い例 良い例 - tapOn: text: "Profile\nTab 1 of 3" - tapOn: id: "nav_profile_tab" # identifierがなければ - tapOn: text: "Profile.*" asmz.beer 0 接続 1 理解 2 調査 3 選定 4 生成 5 ID追加 6 ビルド 7 実行 22
23. SkillへのE2Eテストノウハウの実装 フロー生成のルール appId: ${APP_ID} --- startRecording: path: e2e/screenshots/... - launchApp - tapOn: id: "nav_blog_tab" - assertVisible: text: "Blog.*" # ... 開始時の画面に戻る - stopRecording asmz.beer 0 接続 • appIdは環境変数で渡す • 録画で前後を囲む • 画面遷移のたびにassertVisible で検証する 終了時は開始時と同じ画面に戻す 画面状態を揃えておくと、 複数のフローを連続実行できる 1 理解 2 調査 3 選定 4 生成 5 ID追加 6 ビルド 7 実行 23
24. SkillへのE2Eテストノウハウの実装 Semantics(identifier)の追加を提案する // 追加前 InkWell( onTap: () => ..., child: Text('送信'), ) 命名は [feature]_[element_type] • テストで操作する要素だけに、 最小限で追加 • 0 接続 1 理解 コードの変更はユーザーの確認を 得てから // 追加後 Semantics( identifier: 'form_submit_button', child: InkWell(...), ) asmz.beer • • 2 調査 追加後は再ビルド・インストール 3 選定 4 生成 5 ID追加 6 ビルド 7 実行 24
25. SkillへのE2Eテストノウハウの実装 フィードバックループ：失敗時の調査と修正 take_screenshot inspect_screen run（yaml） cheat_sheet run 画面を見る 要素を調べる 小さく再現 構文を確認 直して再実行 通るまで繰り返す 3回で止める 直らなければ、試した内容を添えて人に報告 asmz.beer 0 接続 1 理解 2 調査 3 選定 4 生成 5 ID追加 6 ビルド 7 実行 25
26. AIエージェントによる E2Eテストの作成 asmz.beer 26
27. AIエージェントによるE2Eテストの作成 デモアプリの E2Eテスト作成指示 「このアプリのボトムタブを全てタップし、各画面が正常に表示されることを確認するE2Eテストを 作成して。各画面ではリストを一つタップしてそのアイテムへ画面遷移することを確認して」 asmz.beer 27
28. テスト作成の様子（動画） AIエージェントによるE2Eテストの作成 asmz.beer 28
29. AIエージェントによるE2Eテストの作成 エージェントがやったこと 1. Maestro MCPの接続を確認 2. Flutterコードと既存フローを調査 3. 画面要素を取得 4. identifierの追加を選択肢つきで確認 5. 追加して再ビルド 6. 遷移先を小さなYAMLで確認 7. フローを作成し、1回目で成功 asmz.beer 29
30. AIエージェントによる E2Eテストの修復 asmz.beer 30
31. AIエージェントによるE2Eテストの修復 わざとE2Eテストを失敗させる • • • 起動時：アップデートのお知らせ（全画面） Blogタブ：新機能のお知らせ（ボトムシート） Slideタブ：アプリ評価のお願い（OS標準） [OK] Launch app [OK] Wait for animation to end [OK] Tap on id: nav_profile_tab [OK] Wait for animation to end [FAIL] Assert that "Profile.*", selected is visible asmz.beer 31
32. AIエージェントによるE2Eテストの修復 E2Eテスト修復を指示 「アプリの変更によりE2Eテストが失敗するようになってしまったので、テストシナリオを修復 して」 asmz.beer 32
33. テスト修復の様子（動画） AIエージェントによるE2Eテストの修復 asmz.beer 33
34. AIエージェントによるE2Eテストの修復 エージェントがやったこと 1. 既存のフローを実行し、失敗を再現 2. 全画面モーダルが原因と特定 3. UIコードから残り 2つも発見 4. 閉じるボタンへの identifier追加を確認 5. 3か所に閉じるステップを追加 6. 2回目の失敗：閉じるタップが空振り 7. アニメーション待ちを追加 8. フロー再実行で成功 + # 起動時：アップデートのお知らせ + - extendedWaitUntil: ... + - waitForAnimationToEnd # 追加 + # 追加したidentifierで閉じる操作 + - tapOn: + id: "update_notice_later_button" + # OSネイティブアラートは identifier追加 できないため textセレクタで対応 + - tapOn: + text: "今はしない " + : 空振りの原因を切り分け、 同じくせり上がるボトムシートにもアニメーション待ちを先回りで追加 asmz.beer 34
35. AIエージェントによるE2Eテストの修復 フロー整備にかかる時間 手作業の場合 1フロー このSkillで 約2〜3時間 約5〜10分 シナリオを考える／操作して作る 結果を確認する／直す ベースになるフローは自動作成し 手動で確認や調整 手が回らなかったデグレ確認の E2E整備が進めやすく asmz.beer 35
36. Skillの実装を通して得られた学び asmz.beer 36
37. Skillの実装を通して得られた学び 学び① MCPとSkillの組み合わせが有効 Maestro MCPだけのとき Skillを加えたとき アプリの操作と動作確認はできる ただし進め方や品質は指示次第 一文の依頼で、調査から修正まで 同じ手順で進む 作成でも修復でも同じワークフローが回った 毎回の指示で判断基準を伝え直さなくても 同じ基準でテストを作れる asmz.beer 37
38. Skillの実装を通して得られた学び 学び② テストを「完成」まで任せられる 作成のデモ 修復のデモ identifierの追加提案から実行まで進み、修 正なしで成功 失敗の再現、原因の特定、修正、再 実行までを自律で完了 フィードバックループまで定義したことで、 AIの作業範囲が「書く」から「直して通す」まで広がった asmz.beer 38
39. Skillの実装を通して得られた学び 学び③ Skillは命令ではなくガイドライン Skillが与えたもの AIが状況から補ったもの 失敗したら、画面を見て、要素を調べ、小さ く再現して直す、という進め方 「アニメーション中に押してずれた」という仮説を 立てて検証し、同じ構造のボトムシートにも当て はめた Skillで進め方のガイドラインを示し あとはAIの状況判断に任せる asmz.beer 39
40. Skillの実装を通して得られた学び 学び④ Skillは育てるもの 踏んだ問題をルールにする iOSでback_buttonのタップが空振りする 場合がある → スワイプで戻るサブフローを用意 存在しないMaestro MCPのツールを呼ぼ うとする → 実在する9種類を明記 asmz.beer チームのルールや前提を教える E2Eで見る範囲をAIに任せない → チームで決めたテスト対象範囲を明記 既存のidentifierを毎回探させない → 命名済みのidentifierの一覧を持たせ る 運用で踏んだ問題とチームの開発ルール 両方を取り込みながら育てていく 40
41. まとめ asmz.beer 41
42. まとめ まとめ 考え方 Maestro MCPで「できること」 を増やし、 Claude Code Skillsで「どう使うか」 を与える 実践 Semantics identifierの優先、全文一致の回避、失敗時の調 査手順など、人の判断をそのまま Skillに書き起こす 始め方 汎用版を土台に、チームの前提と運用で踏んだ問題を少しず つ足していくことで自分たち専用の Skillに育てる asmz.beer 42
43. まとめ リンク 今回作成したSkill（GitHub） github.com/asmz/asmz-agent-plugins 関連記事（Zenn） Maestro MCPとClaude Code Skillsによる自律的なE2Eテスト作成 asmz.beer 43
44. Enjoy! Engineering! 本日の発表スライド → asmz.beer 2026/10/29 FlutterKaigi 2026 - Material Stage Akira Shimizu (asmz)