ブラウザ操作・テスト自動化

Claude Code でブラウザを操作したり、テストを自動化する方法を紹介します。 用途と技術レベルに応じて4つの方法があります。

どれから始める？

方法1：Claude in Chrome

Chrome 拡張機能。ブラウザ上で Claude が画面を見ながらアシストしてくれます。 インストールするだけ。セットアップ不要。

• テスト手順を画面を見ながら一緒に確認できる
• 「この画面、正しく表示されてる？」のような質問もできる
• 非エンジニアでもすぐ使える

方法2：Cowork

claude.ai/cowork  にアクセスするだけで使える画面共有機能。インストール不要。

• 「この画面のここをクリックして」と指示できる
• 操作手順を見せて「これを毎回やっている。自動化できる？」と聞ける

方法3：Playwright MCP

Claude Code がブラウザを直接操作します。繰り返しテストの自動化に最適。

セットアップ

.mcp.json に追加：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

Node.js がインストール済みならこれだけで動きます。

使い方

「この URL を開いて、ログインして、注文一覧のスクリーンショットを撮って」
「このフォームにテストデータを10件入力して」
「商品ページ → カート → 決済まで進んで、各画面のスクショを撮って」

Playwright CLI（Token 効率版）

@playwright/cli は MCP の代わりにシェルコマンドで Playwright を操作する方式です。 MCP 版と比べて 約4倍 Token 効率がよい（114k → 27k tokens/タスク）。

npm install -g @playwright/cli

方法4：Playwright Test Agents

Microsoft が提供する AI テストエージェント。テスト計画 → コード生成 → テスト修復の全工程を AI が担当します。

セットアップ

npx playwright init-agents

3つを順番に使うことで「テスト設計 → 実装 → メンテナンス」が半自動化されます。自動生成されたテスト計画・テストコードは、意図した操作になっているか必ず確認してから実行してください。

テスト自動化の before/after

参考リンク

• Playwright MCP（Microsoft 公式） 
• Playwright CLI（Token 効率版） 
• Playwright Test Agents 
• Playwright 公式