結論
最初にやること：OSのターミナルでclaude mcp add playwright npx @playwright/mcp@latestを実行します。
Playwright MCPは旧Puppeteerサーバーではなく、Microsoft公式の@playwright/mcpをClaude Codeへstdio接続します。
このサーバーは画面画像だけに頼らず、アクセシビリティツリーの構造化スナップショットから要素を特定してブラウザを操作します。
まず公開デモまたはローカル開発環境で接続を検証してください。
実行場所：OSのターミナルで実行します。
# ターミナルで実行：MCPサーバーを登録
claude mcp add playwright npx @playwright/mcp@latest
# ターミナルで実行：MCP設定を管理
claude mcp get playwright
# ターミナルで実行：Claude Codeを起動
claude具体的な手順
ブラウザ操作MCPとテストランナーは役割が異なり、MCPを追加しただけでテストファイルやCI設定が自動作成されるわけではありません。
登録後に
/mcpでConnectedを確認します。開発サーバーを別ターミナルで起動し、ログインや購入を伴わない画面から操作テストを始めます。
実際のE2Eコードが必要なら
@playwright/testの導入、テスト生成、実行を別タスクとして依頼します。
実行場所：OSのターミナルで実行します。
# ターミナルで実行：npm依存関係をインストール
npm install -D @playwright/test
# ターミナルで実行：Playwright用ブラウザを導入
npx playwright install chromium
# ターミナルで実行：パッケージを一時実行
npx playwright test実践プロンプト
画面操作からテストを作るときは、対象URL、成功条件、禁止操作を明示します。
入力場所：Claude Codeの対話画面へ貼り付けます。
Playwright MCPで http://localhost:3000/login を開いてください。
メール欄とパスワード欄の存在、必須入力エラー、ログインボタンの有効化条件を確認してください。
本物の資格情報は入力せず、外部送信やデータ削除も行わず、観察結果からtests/login.spec.tsの案を作成してください。注意点
初回はブラウザ関連ファイルの準備で時間がかかることがありますが、非公式Puppeteerパッケージへ置き換えないでください。
本番サイトで購入、削除、送信を自動化すると実データへ影響するため、ステージング環境とテストアカウントを使用します。
Cookie、セッション、入力値がMCP経由のコンテキストへ含まれる可能性があるため、個人情報や管理者資格情報を扱わせません。
要素を見つけられない場合はスクリーンショット前提で断定せず、アクセシビリティ名、iframe、Shadow DOM、ページ遷移を確認します。