Claude CodeでChromeを操作・テストする方法

【結論】解決策 / 実行コマンド

Claude Codeは現在、公式のClaude in Chrome拡張機能と連携し、可視Chromeウィンドウでブラウザ操作を実行できます。

Playwright MCPだけが唯一の方法という説明は古く、ローカルWebアプリの確認や認証済みサイトの操作には公式Chrome連携が利用できます。

# ターミナルで実行：Chrome連携を有効にして起動
claude --chrome
# 起動後のセッション内で実行：接続状態を確認
/status
# 起動後のセッション内で実行：ブラウザ権限を管理
/chrome

具体的な手順・設定方法

1. Claude Codeから案内される公式Claude in Chrome拡張機能をインストールします。

2. 対象サイトへの権限を最小限に設定し、ローカル開発サーバーを別ターミナルで起動します。

3. フォーム操作、DOM確認、コンソールエラー取得、スクリーンショット確認を段階的に依頼します。

実践プロンプト / 活用テクニック

# 起動後のセッション内で入力
Chromeでhttp://localhost:3000/loginを開いてください。
テスト用アカウントでログインし、入力エラー表示とコンソールエラーを確認してください。
送信や削除など不可逆操作の前には必ず確認してください。

注意点・よくあるエラーと対処法

Chrome連携はログイン済み状態を共有できるため、個人メール、決済、管理画面への権限付与は慎重に行ってください。

CAPTCHA回避や利用規約に反するスクレイピングには使用しないでください。

E2EテストをCIで再現する場合は、Playwrightテストコードとして保存する方法も併用してください。