この記事について
| 項目 | 内容 |
|---|---|
| 対象読者 | Kiro CLIユーザー、E2Eテスト自動化に興味がある人 |
| 前提知識 | Kiro CLIの基本的な使い方（kiro-cli chatコマンドを使ったことがある程度） |
| 検証環境 | macOS 15.7 / Node.js 24.x / Playwright 1.57.x / Kiro CLI 1.22.0 |
✅ この記事を読むと
- Kiro CLIでPlaywright Agentsを動かす設定方法がわかる
- AIによるE2Eテストの自動生成・修復を体験できる
🎭 Playwright Agentsとは
Playwright Agentsは、AIエージェントがブラウザを操作してE2Eテストを実行できるようにするツールです。
MCP（Model Context Protocol：AIとツールを接続する標準規格）サーバーとして動作し、AIエージェントに以下のような機能を提供します。
- 🌐 ブラウザの起動・操作
- 📸 ページのスナップショット取得
- 🖱️ 要素のクリック・入力
- 📝 テストコードの生成
詳しくは公式ドキュメントを参照してください。
😱 Kiroでは使えない…？
公式ドキュメントを見ると、サポートされているのは Claude、Copilot、VS Code など。
Kiro CLIの名前がない！ 😇
実際に初期化コマンドを試してみても…
npx playwright init-agents --loop=kiro
error: option '--loop <loop>' argument 'kiro' is invalid.
Allowed choices are claude, copilot, opencode, vscode, vscode-legacy.
やっぱりダメでした…😭
💡 解決策：Claude用の設定を流用する
しかし、諦めるのはまだ早い！
試しにClaude用の設定を生成してみたところ、出力されたのはエージェント定義ファイルとMCP設定でした。
「これ、Kiro CLI用に変換すれば動くのでは…？」と思い、試してみることに。
手順1: Claude用の設定を生成
テスト対象のプロジェクトディレクトリで実行します。
cd /path/to/your/project
npx playwright init-agents --loop=claude
これで以下のファイルが生成されます。
📝 specs/README.md - テストプラン用ディレクトリ
🌱 seed.spec.ts - デフォルトの環境シードファイル
🤖 .claude/agents/playwright-test-generator.md - エージェント定義
🤖 .claude/agents/playwright-test-healer.md - エージェント定義
🤖 .claude/agents/playwright-test-planner.md - エージェント定義
🔧 .mcp.json - MCP設定
手順2: Kiro CLI用に変換
ClaudeとKiro CLIでは、エージェント設定ファイルのフォーマットが異なります。
🔄 変換のポイント（先にまとめ）:
- ファイル形式を
.md→.json+prompts/*.md（プロンプト分離）に変更 - MCPサーバー設定をエージェント内に
mcpServersとして定義 - ツール指定を
mcp__playwright-test__*→@playwright-testに変更 -
model/colorは削除（Kiroでは不要）
以下、具体的な変換例です。
Claude（.claude/agents/playwright-test-planner.md）:
name: playwright-test-planner
description: Use this agent when you need to create comprehensive test plan...
tools: Glob, Grep, Read, LS, mcp__playwright-test__browser_click, ...
model: sonnet
color: green
You are an expert web test planner...
Kiro CLI（~/.kiro/agents/playwright-test-planner.json）:
{
"name": "playwright-test-planner",
"description": "Webアプリケーションの包括的なテスト計画を作成する専門エージェント",
"prompt": "file://./prompts/playwright-test-planner.md",
"mcpServers": {
"playwright-test": {
"command": "npx",
"args": ["playwright", "run-test-mcp-server"],
"timeout": 120000
}
},
"tools": ["*"],
"allowedTools": ["fs_read", "fs_write", "@playwright-test"]
}
プロンプトファイル（~/.kiro/agents/prompts/playwright-test-planner.md）:
Claude用の.mdファイルからYAMLフロントマター（---で囲まれた部分）を除いた本文をそのまま使います。
You are an expert web test planner with extensive experience in quality assurance...
You will:
1. **Navigate and Explore**
- Invoke the `planner_setup_page` tool once to set up page before using any other tools
- Explore the browser snapshot
...
手順3: エージェントを配置
変換したファイルを配置します。
~/.kiro/agents/
├── playwright-test-planner.json
├── playwright-test-generator.json
├── playwright-test-healer.json
└── prompts/
├── playwright-test-planner.md
├── playwright-test-generator.md
└── playwright-test-healer.md
🚀 実際に動かしてみた
📦 前提条件
実行前に、プロジェクトディレクトリでPlaywrightをインストールしておきます。
npm init -y
npm install @playwright/test
npx playwright install chromium
テスト対象
LIFULL HOME'Sの「住まいのお役立ち情報」ページでテスト計画を作成してみました。
実行コマンド
kiro-cli chat --agent playwright-test-planner --no-interactive \
"https://www.homes.co.jp/cont/ のテスト計画を作成してください"
📋 結果（1回目：情報なしで実行）
AIがブラウザを操作してページを探索し、以下のようなテスト計画を自動生成しました。
- ヘッダーナビゲーション（4テスト）
- キーワード検索機能（4テスト）
- カテゴリナビゲーション（10テスト）
- 記事カード表示（4テスト）
- タグ機能（3テスト）
- 人気記事ランキング（2テスト）
- 都道府県別物件検索（2テスト）
- フッター（4テスト）
- サイドバー機能（2テスト）
- パンくずリスト（2テスト）
- レスポンシブデザイン（2テスト） ← 🤔 ここに注目
合計39テストケースが自動生成されました！✨
⚠️ 注意：AIは実装詳細を知らない
まあ、そりゃそうよねって話なんですが…
レスポンシブ判定の例
生成されたテスト計画には「レスポンシブデザイン」のテストが含まれていました。
モバイル表示での基本レイアウト確認
- ブラウザのビューポートを375x667（iPhone SE相当）に設定する
- https://www.homes.co.jp/cont/ にアクセスする
しかし、大変申し訳ないのですが、実はこのサイトはレスポンシブではなく、UA切り替え式（User-Agentヘッダーでデバイスを判定し、PC/SPで別のHTMLを返す方式）です…🙏
PC/SPでUser-Agentを切り替えないと正しく表示されません。
AIは画面を見てテスト計画を作成しますが、残念ながらサイトの実装詳細までは判断できません 🙅
🔄 事前情報を与えると…
2回目は、PC/SP切り替えの情報を事前に伝えて実行しました。
kiro-cli chat --agent playwright-test-planner --no-interactive \
"https://www.homes.co.jp/cont/ のテスト計画を作成してください。
注意：このサイトはレスポンシブデザインではなく、PC/SPでUser-Agentを切り替える方式です。
ビューポートを変更してもSP版は表示されません。"
結果、
- ✅ レスポンシブデザインのテストが含まれなくなった
- ✅ 代わりに「注意事項」として以下が出力されました。
このサイトはレスポンシブデザインではなく、PC/SPでUser-Agentを切り替える方式のため、ビューポート変更によるSP版テストは対象外としています。
事前情報を与えれば、ちゃんと対応できる！ 🎉
🧪 テストコードの生成
playwright-test-generatorエージェントを使うと、テスト計画からテストコードを自動生成できます。
kiro-cli chat --agent playwright-test-generator --no-interactive \
"tests/homes-cont-test-plan.md のテスト計画に基づいて、テストコードを生成してください"
生成されたテストコード例です。
// tests/top-page/display.spec.ts
import { test, expect } from '@playwright/test';
test.describe('トップページ', () => {
test('トップページの表示確認', async ({ page }) => {
// 1. https://www.homes.co.jp/cont/ にアクセスする
await page.goto('https://www.homes.co.jp/cont/');
// 2. ページタイトルが「【ホームズ】住まいのお役立ち情報」であることを確認する
await expect(page).toHaveTitle('【ホームズ】住まいのお役立ち情報');
// 3. ヘッダーにLIFULL HOME'Sロゴが表示されていることを確認する
await expect(page.getByRole('img', { name: 'LIFULL HOME\'S' })).toBeVisible();
// 4. 検索ボックスが表示されていることを確認する
await expect(page.getByRole('searchbox', { name: '気になるキーワードを入力' })).toBeVisible();
// 5. カテゴリナビゲーションが表示されていることを確認する
// ...
});
});
🩹 壊れたテストの修復
生成されたテストを実行してみると…いくつか失敗しました 😇
$ npx playwright test tests/top-page/
Running 6 tests using 6 workers
...
3 failed
tests/top-page/display.spec.ts › トップページの表示確認
tests/top-page/prefecture-links.spec.ts › 都道府県から物件を探すセクションの表示確認
tests/top-page/ranking.spec.ts › 人気記事ランキングの表示確認
3 passed (11.0s)
ここでplaywright-test-healerの出番です！
kiro-cli chat --agent playwright-test-healer --no-interactive \
"tests/top-page/display.spec.ts のテストが失敗しています。修復してください。"
🔧 healerがやってくれたこと
- テストを実行してエラーを確認
-
エラー原因を分析
-
getByRole('img', { name: 'LIFULL HOME\'S' })が2つの要素にマッチしてstrict mode violation
-
-
コードを自動修正
-
.first()を追加して最初の要素を特定
-
- 再テストして成功を確認
修正前
await expect(page.getByRole('img', { name: 'LIFULL HOME\'S' })).toBeVisible();
修正後
await expect(page.getByRole('img', { name: 'LIFULL HOME\'S' }).first()).toBeVisible();
さらに、カテゴリナビゲーションの検証方法も自動で改善してくれました。toMatchAriaSnapshotから個別のtoBeVisible()に変更し、複数マッチするリンクにはexact: trueを追加。
他の2つの失敗テストも同様に、healerに依頼すれば自動修復してくれます。
テスト→失敗→修正→再テスト→成功 のサイクルを自動で回してくれるのは便利！✨
📝 まとめ
Playwright AgentsはKiro CLIを直接サポートしていませんが、Claude用の設定を流用・変換することで問題なく使えました。
🎭 三種の神器:
| エージェント | 役割 |
|---|---|
playwright-test-planner |
ページを探索してテスト計画を自動生成 |
playwright-test-generator |
テスト計画からテストコードを生成 |
playwright-test-healer |
失敗したテストを自動修復 |
✨ 良かった点:
- ページを自動探索してテスト計画を生成してくれる
- 網羅的なテストケースを短時間で作成できる
- 事前情報を与えれば、サイト固有の事情にも対応できる
- 失敗したテストを自動で修復してくれる
⚠️ 注意点:
- サイトの実装詳細（レスポンシブ/UA切り替え等）は自動では判断できない
- 生成されたテスト計画やコードは人間がレビュー・調整する必要がある
E2Eテストの自動化に興味がある方は、ぜひ試してみてください！🚀