この記事は hacomono Advent Calendar 2025 の1日目の記事です
こんにちは、hacomonoでエンジニアをしているタクローです！
デバッグ作業って本当にめんどくさい。
画面操作 → データ確認 → また画面操作…というループに時間を奪われ、もっと効率的にやれないものかと常々思っていました。
そんな中いろいろ調べてみたところ、Claude Code と Playwright MCP を組み合わせればある程度自動化できるのでは？ という手応えを得たため、実際に開発中の機能のバグ修正に導入してみました。
何度か試した結果、かなり良い感じに動いてくれたので、この記事にまとめます。
（※Claude Code と Playwright MCP の接続方法自体は割愛します）
なぜ自動デバッグに挑戦したのか
冒頭にも書いた通り、デバッグ作業は操作の繰り返しが多く、個人的には最も疲れる工程でした。
- UI の挙動確認
- データの状態のチェック
- ちょっと修正してまた確認
…これを延々繰り返すのが辛い。
そこで「この作業、AI と Playwright に任せたらいけるのでは？」と思い立ったのが始まりです。
事前準備
自動デバッグを成功させるために、最低限のセッティングを行いました。
1. Claude.md の用意
Claude Code に渡すルールを記述した設定ファイル。
内容はそこまで厳密でなくても動きますが、自動操作をさせる都合上「やっていいこと／ダメなこと」は最低限決めておくと安定します。
2. 画面のパス（アプリケーションの UI パス）
Playwright MCP から操作するため、起動しているアプリの画面構造のパスをまとめておきました。
3. 変更範囲の特定ルール
「現在のブランチの diff から、修正対象のコードを特定する」といった指示も追加。
この辺りの設定に関しては、PlayRight MCPと繋げて
ざっくり指示して必要に応じて調整でも良いと思います。
データの事前準備
正しいデバッグ結果を得るには、正しいテスト用のデータが必須です。
最初は「AI に作らせればいいのでは？」と思いましたが、
正確なデータを出すまでの試行錯誤のほうが手間だったため、最終的に手動で作成しました。
※もし単純なデータで済む場合は AIに生成させても十分いけると思います。
Claude Code への指示内容
実際に Claude Code に投げた指示は以下のようなものです。
◆ Playwright MCP を使ってデバッグしたいことを明示
- 今回直したいバグの概要
- 作成したテスト用データの提示
- どんな挙動が“正”か
- 現在の UI がどう崩れているのか
- データ不整合がある場合は「現在のデータ」「あるべきデータ」の両方を渡す
こういった情報をなるべく正確に伝える
ここを丁寧にやるほど、精度は確実に上がります。
あとは待つだけ
指示を渡した後は、ほぼ 放置で OK。
Claude Code が以下を自動で行ってくれます。
- Playwright MCP を使って画面操作
- コンソールエラーの自動チェック
- 必要に応じてデバッグ用コードを挿入
- バグの原因特定と修正
- 再度画面を操作しながら動作確認
これがめちゃくちゃ便利で、手元のいくつかの機能で何度か試してみましたが、現状かなり安定して動いてくれています。
今後の課題と目指したい姿
現時点では操作の途中で 「許可を求める確認」が何度か挟まるため、少し煩わしさがあります。
今後はここに安全性に考慮をした制限をかけた上で
- 画面操作
- コード修正
- 再実行・再検証
これらを無許可で全自動で行わせたいと考えています。
そうすれば
昼休み前に「ここ直しておいて」と指示 → 昼休みが終わる頃には修正完了している
という夢のような状態も実現できるはず。
まとめ
Claude Code × Playwright MCP の組み合わせは、UI を伴うデバッグの自動化に非常に
向いていました。
- デバッグループを自動化
- 人間は「意図と要件」を渡すだけ
- 精度も実用レベル
「AI エージェントにデバッグは全て任せる」という未来が
本当に手の届くところまで来ていると実感しています。
同じような課題を感じている方は、ぜひ試してみてください。
