From flutter-development
テスト仕様書(Excel/Notion)からFlutter integration_testコードを自動生成するスキル。 Page Objectパターン + Key規約に基づき、仕様ステップとコードの対応を示すマッピングレポートも生成する。 「E2Eテストを生成」「テスト仕様からテストコードを作って」「integration_testを生成」などの発言で発動。
npx claudepluginhub xtone/ai_development_tools --plugin flutter-developmentThis skill uses the workspace's default tool permissions.
テスト仕様書(Excel / Notion)を Source of Truth として、Flutter の integration_test コードを自動生成する。
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
テスト仕様書(Excel / Notion)を Source of Truth として、Flutter の integration_test コードを自動生成する。 テストコードは「自然言語仕様の Dart へのデコード結果」であり、使い捨ての中間生成物として扱う。
「壊れにくくする」のではなく「再生成コストを限りなくゼロにする」
以下の発言で発動:
integration_test/ ディレクトリが使用可能であること1. pubspec.yaml を読み込み、以下を検出:
- flutter_test / integration_test の依存
- 状態管理(riverpod, bloc, provider 等)
- ルーティング(auto_route, go_router 等)
2. lib/ のディレクトリ構造を解析:
- 画面ファイルのパス(lib/ui/, lib/presentation/, lib/features/ 等)
- 既存の Keys クラス(*_keys.dart)
- 既存の integration_test/
3. 結果をユーザーに確認:
「プロジェクト構造を解析しました:
- UI層: lib/ui/{module}/
- 状態管理: Riverpod
- ルーティング: auto_route
- 既存Keys: なし / 3ファイル検出
この認識で合っていますか?」
ここでユーザーの回答を待つ。次のステップに進まない。
既存の Key 運用を確認し、Key 規約を提案する。
既存の Key を検索:
- `Key('...')` や `ValueKey('...')` のパターン
- 既存の Keys クラス
結果に応じて:
- 既存規約あり → それに従う
- 既存規約なし → 標準規約を提案(references/key-convention.md 参照)
ここでユーザーの回答を待つ。
プロジェクト固有のウィジェットパターンを事前に把握する。
1. ラッパーウィジェットの検出:
- CustomTextFormField 等のカスタム入力ウィジェットを検索
- `super.key` の有無を確認(Key 伝播の可否判定)
- Key を受け取れないラッパーには KeyedSubtree での対応が必要
2. 認証フローパターンの判定:
- 直接ログイン画面パターン: アプリ起動 → LoginPage
- AuthWall 経由パターン: アプリ起動 → AuthWall → LoginPage(2段階認証フロー)
- AuthWall がある場合、AuthWall 用の Keys / Page Object も必要
3. テキスト入力ウィジェットの種類判定:
- 生の TextField / TextFormField → tester.enterText() が直接使用可能
- カスタムラッパー(CustomTextFormField 等)→ find.descendant パターンが必要
4. 結果をユーザーに確認:
「カスタムウィジェットを検出しました:
- テキスト入力: CustomTextFormField(super.key あり → 直接 Key 付与可能)
- 認証フロー: AuthWall 経由(2段階)
- ナビゲーション: AutoTabsScaffold + BottomNavigationTabItem
この認識で合っていますか?」
ここでユーザーの回答を待つ。
ST-AUTH-001)重要: 手順と期待結果は番号で対応付ける。
「テスト仕様を読み取りました:
ST-AUTH-001: 正常ログイン/ログアウト
- 前提条件: 未ログイン状態
- 手順: 7ステップ
- 期待結果: 7項目
- 対象画面: ログイン画面、ホーム画面、マイページ
この仕様でテストを生成しますか?」
ここでユーザーの回答を待つ。
仕様書の手順から、操作対象の画面を推定する。
仕様: 「ログイン画面でメールアドレスを入力」
→ ログイン画面の Dart ファイルを探索
→ lib/ui/auth/login_screen.dart を発見
対象画面の Widget ツリーを解析し、既存の Key を収集する。
// 検索対象
Key('...')
ValueKey('...')
const Key('...')
{Screen}Keys.{name} // Keys クラスのパターン
仕様書の操作ステップで必要だが、まだ Key が付与されていない要素を特定する。
「以下の要素に Key が不足しています:
画面: LoginScreen (lib/ui/auth/login_screen.dart)
⚠️ メールアドレス入力フィールド → LoginKeys.emailField 推奨
⚠️ パスワード入力フィールド → LoginKeys.passwordField 推奨
✅ ログインボタン → 既存 Key あり
Key を追加しますか?(追加する場合、Keys クラスも生成します)」
ここでユーザーの回答を待つ。
{screen}_keys.dart ファイルを生成(または更新)key: {Screen}Keys.{name} を追加ラッパーウィジェットの Key 伝播戦略:
super.key があるラッパーウィジェットには直接 Key を付与する
CustomTextFormField(
key: LoginKeys.driverIdPart1Field, // super.key があるため直接付与可能
controller: idPart1Controller,
)
super.key がないラッパーには KeyedSubtree でラップするfind.descendant パターンを使用し、ラッパーの Key から内部の EditableText を特定する画面ごとに Page Object クラスを生成する。
詳細は references/page-object-pattern.md を参照。
Page Object クラスの命名規則:
{Screen}PageObject(ウィジェットクラス名との衝突回避)
LoginPage ウィジェット → LoginPageObject テストクラスMyPagePage ウィジェット → MyPagePageObject テストクラス{Screen}Page でもよい(例: AuthWallPage)スクロール対応パターン:
scrollUntilVisible を使用するpumpAndSettle タイムアウト調整:
Duration(seconds: 10) 以上を設定Duration(seconds: 15) を推奨生成ファイル:
integration_test/page_objects/login_page_object.dart
integration_test/page_objects/home_page.dart
integration_test/page_objects/my_page_page_object.dart
仕様書の手順を 1:1 で Dart テストコードに変換する。
詳細は references/test-template.md を参照。
生成ファイル:
integration_test/scenarios/st_auth_001_test.dart
共通のセットアップ・ティアダウン処理を生成する。
生成ファイル:
integration_test/helpers/test_helper.dart
integration_test/helpers/app_launcher.dart
仕様ステップとコードの対応表を生成する。 これが人間のレビューポイント。
詳細は references/mapping-report.md を参照。
# マッピングレポート: ST-AUTH-001
| # | 仕様ステップ | 生成アクション | Key | 状態 |
|---|------------|-------------|-----|------|
| 1 | ログイン画面を表示 | pumpAndSettle() | LoginKeys.screen | ✅ Key一致 |
| 2 | メールアドレスを入力 | enterText(LoginKeys.emailField, '...') | LoginKeys.emailField | ✅ Key一致 |
| 3 | パスワードを入力 | enterText(LoginKeys.passwordField, '...') | LoginKeys.passwordField | ✅ Key一致 |
| 4 | ログインボタンをタップ | tap(LoginKeys.loginButton) | LoginKeys.loginButton | ✅ Key一致 |
| 5 | ホーム画面が表示される | expect(find.byKey(HomeKeys.screen)) | HomeKeys.screen | ⚠️ Key推定 |
| 6 | 予約ボタンをタップ | tap(HomeKeys.reserveButton) | HomeKeys.reserveButton | ❌ Key該当なし |
## 判定基準
- ✅ Key一致: Keys クラスに定義済みの Key と完全一致
- ⚠️ Key推定: 画面コードから推定した Key(要確認)
- ❌ Key該当なし: 対応する Key が見つからない(Key 追加が必要)
生成ファイル: integration_test/reports/st_auth_001_mapping.md
生成物一覧をユーザーに提示する。
「以下のファイルを生成しました:
Keys クラス:
- lib/ui/auth/login_keys.dart (新規)
- lib/ui/home/home_keys.dart (新規)
Page Objects:
- integration_test/page_objects/login_page.dart
- integration_test/page_objects/home_page.dart
テストコード:
- integration_test/scenarios/st_auth_001_test.dart
マッピングレポート:
- integration_test/reports/st_auth_001_mapping.md
マッピングレポートを確認してください。
❌ マークの項目は Key の追加が必要です。
⚠️ マークの項目は Key の妥当性を確認してください。」
expect(find.byKey(HomeKeys.screen), findsOneWidget) を生成。Navigator.push(HomeScreen()) があっても、それはアサーションの根拠にしない。LoginKeys.emailField を探索 → enterText を生成。| 状況 | 対応 |
|---|---|
| テスト失敗(コードバグ) | コードを修正する。テストは正しい。 |
| 仕様変更 | テストを再生成する。仕様が正しい。 |
| UI リファクタリング(Key 変更なし) | テストはそのまま動く。 |
| UI リファクタリング(Key 変更あり) | Keys クラスを更新し、テストを再生成。 |
| 新画面追加 | 新しい仕様を書き、テストを生成。 |
project/
├── lib/
│ └── ui/
│ ├── auth/
│ │ ├── login_screen.dart
│ │ └── login_keys.dart ← Keys クラス
│ └── home/
│ ├── home_screen.dart
│ └── home_keys.dart ← Keys クラス
├── integration_test/
│ ├── page_objects/ ← Page Object(画面ごと)
│ │ ├── login_page.dart
│ │ └── home_page.dart
│ ├── scenarios/ ← シナリオテスト(仕様と1:1)
│ │ ├── st_auth_001_test.dart
│ │ └── st_rsv_001_test.dart
│ ├── reports/ ← マッピングレポート
│ │ ├── st_auth_001_mapping.md
│ │ └── st_rsv_001_mapping.md
│ └── helpers/ ← 共通ヘルパー
│ ├── test_helper.dart
│ └── app_launcher.dart
└── test_specs/ ← テスト仕様書(参考配置)
└── 総合試験項目書(Ph1).xlsx
詳細は references/key-convention.md を参照。
| 項目 | 規約 |
|---|---|
| クラス名 | {Screen}Keys(例: LoginKeys) |
| Key 値 | {screen}_{role}_{name}(例: login_field_email) |
| 対象 | タップ・入力・検証する要素 + 画面自体 |
| ファイル | {screen}_keys.dart(画面と同ディレクトリ) |
| role | 用途 | 例 |
|---|---|---|
screen | 画面自体 | login_screen |
field | テキスト入力 | login_field_email |
button | ボタン | login_button_submit |
text | テキスト表示 | home_text_welcome |
list | リスト | home_list_reservations |
item | リストアイテム | home_item_reservation |
dialog | ダイアログ | login_dialog_error |
icon | アイコン | home_icon_notification |
| 列 | 内容 | AI での利用 |
|---|---|---|
| D: 試験項目ID | ST-AUTH-001 等 | テストファイル名・関数名 |
| E: 試験内容 | シナリオの説明 | テストの description |
| F: 前提条件 | ログイン状態、データ等 | setUp / モック設定 |
| G: 手順 | 番号付き操作ステップ | Page Object 経由の操作コード |
| H: 期待結果 | 番号付き期待値 | アサーション(仕様書由来) |
| カテゴリ | ID 範囲 | 内容 |
|---|---|---|
| 認証系 | ST-AUTH-001〜005 | ログイン、生体認証、オートログイン、セッション |
| 予約系 | ST-RSV-001〜004 | 検索、絞り込み、変更、キャンセル |
| 利用系 | ST-USE-001〜002 | 利用開始〜終了、延長、忘れ物 |
| マイページ | ST-MYP-001 | 設定、請求、クーポン |
| ヘルプ | ST-HLP-001 | FAQ検索、緊急連絡 |
1テストケースを順次処理する場合に使用。Phase 0〜5 を1エージェントが逐次実行する。
複数テストケースの一括生成や、品質重視の場合に使用。
PL・PG・QA の3ロールに分割し、Agent Team で並行作業する。
詳細は references/agent-team-workflow.md を参照。
PL(設計): 仕様読み取り + 設計判断 + 最終レビュー
PG(実装): コード解析 + Key追加 + テストコード生成
QA(検証): マッピングレポート生成 + 整合性チェック
references/key-convention.md - Key 規約の詳細references/page-object-pattern.md - Page Object パターンのテンプレートreferences/test-template.md - テストコードテンプレートreferences/mapping-report.md - マッピングレポートのフォーマットreferences/poc-example.md - PoC 実行例(ST-AUTH-001 / ic_card プロジェクト)references/real-project-patterns.md - 実プロジェクトで発見されたパターン集references/agent-team-workflow.md - Agent Team ワークフロー(PL/PG/QA ロール分割)