概要
https://techblog.hacomono.jp/entry/2025/12/01/000000
詳細内容
## Claude Code × Playwright MCP で自動デバッグ
https://techblog.hacomono.jp/entry/2025/12/01/000000
hacomonoのエンジニアが、Claude CodeとPlaywright MCPを組み合わせることで、反復的なデバッグ作業を効率的に自動化する手法を確立し、その実践的なアプローチと将来展望を解説します。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 89/100 | **Annex Potential**: 87/100 | **Overall**: 88/100
**Topics**: [[AI Debugging, Playwright, Claude Code, Test Automation, Developer Productivity]]
hacomonoのエンジニアが、煩雑なUIデバッグ作業の自動化に成功した経験を共有しています。筆者は、画面操作やデータ確認の繰り返しに費やす時間を削減するため、AIとブラウザ自動化ツールの組み合わせに着目。特に、Claude CodeとPlaywright MCPを連携させることで、開発中の機能のバグ修正プロセスを大幅に効率化できる手応えを得たといいます。
デバッグ作業はUIの挙動確認、データ状態のチェック、修正後の再確認の繰り返しが多く、最も疲れる工程であると筆者は指摘。この反復作業をAIとPlaywrightに任せることで、人間は「意図と要件」の伝達に集中できると考えたことが、この取り組みのきっかけです。
自動デバッグを実現するための事前準備として、以下の要素が挙げられています。
1. **Claude.mdの用意**: Claude Codeに渡すルールを記述した設定ファイルで、「やっていいこと／ダメなこと」を最低限決めることで安定性が向上します。
2. **画面のパス**: Playwright MCPから操作するために、起動中のアプリケーションの画面構造パスを整理します。
3. **変更範囲の特定ルール**: 現在のブランチのdiffから修正対象コードを特定する指示も追加しました。
また、テスト用データの準備に関しては、当初AIによる生成を試みたものの、正確なデータを出すための試行錯誤が手間だったため、最終的には手動作成が効率的だったと述べています。
Claude Codeへの指示内容は、直したいバグの概要、テスト用データの提示、正しい挙動、UIの崩れ方、データ不整合の内容（現状とあるべき姿）などを正確に伝えることが重要です。ここを丁寧に設定するほど、デバッグの精度が確実に向上すると強調しています。
指示を渡した後は、Claude CodeがPlaywright MCPを使って画面操作、コンソールエラーの自動チェック、必要に応じたデバッグ用コードの挿入、バグ原因の特定と修正、そして動作確認までを自動で行います。筆者は、この仕組みが非常に便利で、いくつかの機能で安定して動作していると評価しています。
現在の課題としては、操作途中に発生する「許可を求める確認」が挙げられますが、今後は安全性に配慮した制限を設けた上で、画面操作、コード修正、再実行・再検証を完全自動化することを目指しています。これにより、「昼休み前に指示を出せば、昼休み後には修正が完了している」といった夢のような状態の実現を目標としています。
結論として、Claude CodeとPlaywright MCPの組み合わせはUIを伴うデバッグの自動化に非常に適しており、「AIエージェントにデバッグを全て任せる」という未来が現実的になってきていると筆者は実感しています。同様の課題を抱えるエンジニアに、ぜひこの手法を試すことを推奨しています。