ループエンジニアリングでE2Eテストを実践

Transcript

1. 登壇資料 ｜ ループエンジニアリング meetup！#1 ループエンジニアリングで E2Eテストを実践 Claude Code × Playwright で作る、E2Eテスト自走環境 武井 宜行 (SIOS Technology, Inc)
2. Noriyuki TAKEI 武井 宜行 Information • Microsoft MVP for AI Platform • サイオステクノロジー株式会社 Favorites • スカッシュ • スキー • 走ること • ストリートファイター6 blog https://tech-lab.sios.jp/ core skill Azureによる クラウドネイティブなアプリ開発 X @noriyukitakei books 世界一やさしいRAG構築入門
4. 01 SECTION 01 ループエンジニアリングとは？ エージェントのループを4つの型（ターン／ゴール／時間／プロアクティブ）で 捉える
5. Anthropic公式ループエンジニアリングの記事 「Getting started with loops」 Anthropic 公式（@ClaudeDevs）／著者 @delba_oliveira・2026年7月7日公開 ループを4つの型（ターン／ゴール／時間／プロアクティブ）で整理した公式ガイド → 本章（P3〜）の構成は、この記事をベースにしています x.com/ClaudeDevs/status/2074208949205881033
6. 4つのループは「誰が停止を決め、どこまで自走するか」で選ぶ 自律度が上がる順（人間の関与が減る順）に並ぶ。まず一番単純な形から始め、痛くなったら上の型へ昇格する。 ① ターンベース 関与 高 トリガー：ユーザーのプロンプト 停止：Claude自身が判断 毎ターン、あなたがプロンプトを打ち、Claudeが 1サイクル（文脈収集→行動→自己確認→応答） 回して返す。止まる判断はClaude自身。 ② ゴールベース 関与 中 トリガー：手動プロンプト（/goal） 停止：目標達成・最大ターン 完了条件を先に定義すると、達成までClaudeが反 復。止まろうとするたび評価役が条件を確認して 差し戻す。 ③ 時間ベース 関与 低 トリガー：指定した時間間隔 停止：中止・作業完了 トリガーが「時間」になり人間は不在。同じ作業 を一定間隔で繰り返す、または外部の変化を定期 的に見て反応する。 ④ プロアクティブ 関与 ほぼゼロ トリガー：イベント/予定（無人） 停止：達成・全体は無期限 イベントや予定で無人起動。時間ベース＋ゴール ベースを合成し、トリアージ→修正→レビューを 多段編成で自走させる。
7. ターンベース：1往復ごとに人間が運転席に座る あなた Claude ①「ログイン機能を追加して」 文脈収集 → 行動 → 自己確認 ②実装して応答 ③「エラー処理も足して」（次のターン） もう1サイクル回して確認 ④応答 ポイント トリガー ユーザーのプロンプト 停止条件 Claude自身が完了/不足を判 断 使う機能 通常のプロンプト 向くタスク 定型でない短い作業 人間の関与 高 渡すプロンプト（通常の対話・毎ターン手動） ログイン機能を追加して → （次ターン）エラー処理も足して 停止条件：指定なし（Claude自身が判断）
8. ゴールベース：完了条件を先に定義すれば、達成まで自走する あなた Claude ①/goal 完了条件を定義（例：Lighthouse 90以上、5回で停止） 達成 or 最大ターンまで反復 試行：生成 → 実行 自己評価：条件を満たしたか ②達成 → 完了報告 ポイント トリガー 手動プロンプト（/goal） 停止条件 目標達成・最大ターン 使う機能 /goal（完了条件を定義） 向くタスク 検証できる終了条件 人間の関与 中 渡すプロンプト（Claudeへ） /goal Lighthouseを90以上にする。5回で停止。 終了条件：スコア90以上 最大試行：5回
9. 時間ベース：時間で起動し、人間不在で定期実行する スケジューラ Claude 外部システム 指定間隔で繰り返し（人間は不在） ①5分ごとに起動（/loop） 1サイクル回す（＝ターンベース） ②PR確認・CI修正・レビュー対応 ③状態を返す ④完了 → 待機（次の間隔へ） ポイント トリガー 指定した時間間隔 停止条件 中止・作業完了 使う機能 /loop ・ /schedule 向くタスク 定期作業・外部システム連携 人間の関与 低 渡すプロンプト（時間で自動発火・人は不在） /loop 5m PRを確認・レビュー対応・CI修正 起動間隔：5分 停止：中止するまで継続
10. プロアクティブ：イベントで起動し、人間不在のまま自走する イベント Claude 外部システム ①バグ報告イベントで無人起動 達成 or 指定回数まで反復（人はいない） ②修正を適用・テスト実行 ③テスト結果を返す 自己評価：テストが通ったか ④達成 → 次のイベントを待つ ポイント トリガー イベント/予定（無人） 停止条件 達成 or 指定回数（最大ター ン） 使う機能 /goal を無人で実行 向くタスク 定義済みの反復作業 人間の関与 ほぼゼロ（不在） 渡すプロンプト（イベントで自動投入・人は不在） /goal テストが通るまで修正。最大5回。 終了条件：テスト通過 最大試行：5回
11. 02 SECTION 02 E2Eテスト自走環境 ループエンジニアリングを土台に、テストが緑になるまで自走させる
12. 補足：main（人間の指示）を起点に「仕様書→コード→実行→差し戻し」のループを形成。 実画面のDOMはPlaywright MCPで確認し、ズレを防ぎます。 E2E テスト自動化エージェントの構成 main（人間の指示）が3つのエージェントを仲介し、差し戻しループを制御する testspec-write エージェント 設計書を読んでテスト仕様書を起こす ① テスト仕様書を出力 テスト仕様書 docs/testspec/{機能名}.md ② テスト仕様書の読み込み testspec-to-code エージェント 仕様書からPlaywrightコードを生成・修正する ⑤ テストコードの生成・修正 テストコード tests/e2e/{機能名}.spec.ts ⑥ テストコードの読み込み test-runner エージェント 実行して結果を切り分け・報告する 差し戻しループは最大3回。3周しても失敗が続けば人間（CD）へ Playwright MCP 対象画面を開き role/label/testid を確認 ③ MCPに接続 ④ DOMの読み込み テスト対象 Web 画面 ⑦ テスト実行 8
13. キモは、失敗を「4つ」に仕分けること A セレクタ指定ミス（data-testid の誤 り 等） コード生成へ差し戻し → 自動修正 B 待ち不足（未描画のままアサーション ） コード生成へ差し戻し → 自動修正 C 実装側のバグ（仕様と挙動が不一致） 人間へエスカレーション D 環境・データ起因（サイト障害 等） 人間へエスカレーション 13
14. 直すのはAとB、CとDは人間へバトンタッチ 差し戻しは 最大 3 回 3周してダメなら人間へ A・B AIが自分で直す セレクタズレ・待ち不足は、コード生成エージェン トへ差し戻して自動修正。 C・D 人間にバトンタッチ 実装バグ・環境起因は自動では直せないので、人間 へエスカレーション。 14
15. 使い方は、ひとこと指示するだけ Claude Code に、こう話しかけるだけ saucedemoのE2Eテストを実行して。 仕様書はdocs/design/saucedemo.mdにあるよ。 必要なモジュール（Playwright 等）は、システムが自動でインストール。 あとはエージェント群が仕様書づくりから実行・修正まで自走します。 15
16. 動かすと、こんな成果物が出てくる テストコード tests/e2e/saucedemo.spec.ts スクリーンショット tests/evidence/（実行時の証跡） HTMLレポート npx playwright show-report で閲覧 JUnit XML tests/test-results/junit.xml（CI連携用 ） 16
17. まとめ｜詳細記事とリポジトリ 本セッションの詳細は解説記事に、スキル／エージェントのリポジトリは GitHub にあります 詳細記事（SIOS Tech.Lab） tech-lab.sios.jp/archives/52911 スキル & エージェント（GitHub） github.com/noriyukitakei/e2e-automation-agents