AIともっと楽するE2Eテスト

Transcript

1. AIともっと楽するE2Eテスト 〜未来の「当たり前」を今、試してみる〜 2025/07/08 yohei
2. アジェンダ 自己紹介 なぜ今、AIとテストの話をするのか？ AIとの協業に向けたアーキテクチャの試み AIと目指すテスト自動化への挑戦 我々の現在地と、これからの話
3. yohei © LayerX Inc. $ whoami LayerX バクラク事業部 (2023-09 -) Software Engineer バクラク申請経費精算 エンジニアリングマネー ジャー ラジオとお酒が好き 最近の悩み 夜になると疲れ目でコードレビューができない
4. 時代の変化 Agentic Coding コードは 「書く」 から 「生成・レビューする」 時代へ © LayerX Inc. なぜ今、AIとテストの話をするのか？ Cursor, Claude CodeなどのAIツールが急速に普及 コード生成の効率は大幅に向上 テストの重要性が高まり、QA(品質)がボトルネックに 4
5. 新たな課題 開発速度の爆発的な向上 AIツールの普及により、機能開発・コード生成が 大幅に高速化 、多くの人が書ける時代に ↓ 品質保証のボトルネック化 © LayerX Inc. なぜ今、AIとテストの話をするのか？ E2Eテスト作成: 依然として時間がかかる 手動テスト実行: 人的リソースに依存 品質と速度のトレードオフが顕在化 5
6. 我々の視点 AI時代のテスト戦略の重要性 特にユーザー体験の最後の砦である 複雑なドメインのためE2Eテストの重要性が増している バクラク 申請・経費精算での実例 © LayerX Inc. なぜ今、AIとテストの話をするのか？ 複雑な申請作成フロー 多様な企業設定（様々な組み合わせ） 属人性の排除できる動く仕様書としてのE2Eテスト 6
7. AIでテストを書くことの重要性 従来のテスト作成の課題 AIがもたらす変化 ※想像も多分に含んでます © LayerX Inc. AIでテストを書くことの重要性 学習コスト : テストフレームワークの習得が必要 属人化 : テスト設計・実装に専門知識が必要 メンテ : 仕様変更時のテスト更新が大変 実装障壁の低下 : 自然言語でテストシナリオを記述 民主化 : 専門知識がなくてもテスト作成可能 継続的なメンテ : チーム全体でテストに貢献、AIがテストをメンテナンス 7
8. 我々のアプローチ AI Firstな設計思想 AIが最大限のパフォーマンスを発揮できる アーキテクチャ設計こそが重要 人間のためではなく、AIのための設計へ © LayerX Inc. AIが書きやすい「ScreenActionパターン」 8
9. 技術スタック・ツールと成果 技術構成 © LayerX Inc. 利用している技術スタック 言語: Flutter（Dart） E2Eツール: Patrol AI基盤: Claude 4 Opus（希望者全員に配布） 開発支援: Cursor, Claude Code, Roo Code, Cline レビュー: Greptile（トライアル中） 9
10. E2Eアーキテクチャの検討 3つのパターンを比較検討 © LayerX Inc. AIが書きやすい「ScreenActionパターン」 Page Object Pattern: 画面ごとに要素と操作を一つのクラスに統合 シンプルだが、大規模になると責務が混在 Custom Commands Pattern: よく使う操作を再利用可能なコマンドとして定義 重複は減るが、画面固有のロジックが散らばりがち Screen Action Pattern: 要素・操作・検証を別々のクラスに分離 責務が明確で、AIが理解しやすい構造 10
11. 検討結果：Screen Action Patternを採用 採用理由 AIが特化しやすい設計 各クラスの役割が明確で、 AIが迷わずコード生成できる © LayerX Inc. AIが書きやすい「ScreenActionパターン」 AI適性: 生成すべきコードの責務が明確 保守性: 変更の影響範囲が限定的 チーム開発: 役割分担がしやすい 11
12. ScreenActionパターンの概要 責務を明確に分離した構造 © LayerX Inc. AIが書きやすい「ScreenActionパターン」 PageObject: UI要素の定義のみ ( enterEmail() , enterPassword() , tapLoginButton() ) ActionObject: 操作の定義のみ ( login() ) StateObject: 状態検証のみ ( isErrorVisible , isLoggedIn ) ScreenObject: 上記3つを統合 ( isLoginSuccess() , navigateToNextScreen() ) ScenarioFile: テストケースの定義 (ログイン→申請作成ボタンタップ→申請作成) 12
13. AIと目指すテスト自動化への挑戦 AIと目指すテスト自動化への挑戦
14. Before / After ※まだ実験段階です これまで（手作業） 手作業でのテスト作成にはかなりの時間がかかっていた AI活用後 プロンプト一つで短時間でベースとなるテストコードを生成可能 大幅な効率化を実現 © LayerX Inc. Step 1: 既存コードからテストコード生成 14
15. 実際のプロンプト例 → 簡単なページの作成はこれで十分 © LayerX Inc. Step 1: 既存コードからテストコード生成 15
16. Dart MCP使った自動生成の例 ※Dart MCPは開発中の機能になります(次回Flutterリリースで使えるようになりそう) © LayerX Inc. Step 2: MCP利用したテスト作成 0:00 16
17. チーム全体でのテスト作成の可能性 チーム開発の革新につながる可能性 期待される成果 © LayerX Inc. チーム全体でのテスト作成 QAエンジニア: 実際に操作しながらシナリオを自然言語で描述→コード生成 プロダクトオーナー: ユーザーストーリーをテストに変換 デザイナー: UIの振る舞いを直接テスト化 テスト作成時間の大幅短縮 カバレッジの向上 品質の継続的改善 17
18. 未来へのロードマップ 今後の目標 © LayerX Inc. 我々の現在地と、これからの話 Mobile MCPの本格導入 アプリ内自動回遊テストの実現 ビジュアルリグレッションテストの自動生成 チーム全体でのテスト作成フロー確立 18
19. 長期ビジョン AIによるテストの完全自動生成 そんな未来を夢見て、これからも試行錯誤を続けます © LayerX Inc. 未来へのロードマップ テスト保守の自動化 ユーザーストーリーからの直接生成 19
21. ご清聴ありがとうございました © LayerX Inc. 21