Playwright MCP によるブラウザ自動化

Playwright MCP サーバーは、OpenCode をブラウザ操作者に変えます。ナビゲーション、クリック、フォーム入力、DOM 読み取り、ビジュアル状態の確認をすべてあなたの監督下で実行できます。

このレシピを使う場面

UI フローをエンドツーエンドで検証する必要がある（ログイン、チェックアウト、設定保存）。
公開 API がないページから構造化データをスクレイピングしたい。
実際のブラウザでのみ再現するバグをデバッグしている。

前提条件

OpenCode がインストールされている。
Playwright MCP サーバーが利用可能（OpenCode 推奨の MCP に同梱されている）。
明確なターゲット URL と実行したいステップのリストがある。

手順

Playwright MCP サーバーを追加する

OpenCode の設定に登録します。

{
  "mcp": {
    "playwright": {
      "type": "local",
      "command": ["npx", "@playwright/mcp@latest"]
    }
  }
}

ツールが読み込まれたことを確認する

OpenCode を起動し、利用可能なブラウザツールを一覧表示してもらいます。browser_navigate、browser_click、browser_snapshot などが表示されるはずです。
明確なゴールとともにタスクを提示する

URL、必要に応じてユーザー認証情報、検証したいアサーションを OpenCode に渡します。

https://staging.example.com を開き、テストアカウントでログインし、設定へ移動して、新しい「データをエクスポート」トグルが表示されているか教えてください。表示されている場合は、そのトグルのデフォルト状態も教えてください。
各ツール呼び出しを監督する

ツール呼び出しを監視します。ナビゲーション、クリック、フォーム送信を承認します。本番データベースに書き込む可能性のあるものはすべて拒否してください — ステージング環境を使用してください。
証拠を依頼する

フローが完了したら、関連する DOM をダンプするかスナップショットを撮るよう OpenCode に依頼します。これが回帰用の成果物になります。

最終ページの DOM と設定ページのスクリーンショットを、それぞれ ./artifacts/settings-snapshot.html と ./artifacts/settings.png に保存してください。
フローをテストに変換する

監督したステップを CI で実行できる Playwright テストに変換するよう OpenCode に依頼します。

先ほど実行したフローを、tests/e2e/settings-export.spec.ts の下の Playwright テストに変換してください。ページオブジェクトパターンを使用し、トグルの可視性とデフォルト状態をアサートしてください。

重要なプロンプト

Playwright MCP サーバーを使用して、[URL] を開き、認証情報 [user/pass] でログインし、[ページ] に移動して、[特定の条件] を検証してください。最後に、ページの DOM スナップショットとスクリーンショットを ./artifacts/ に保存してください。各ステップで観察したことを報告してください。

検証

DOM スナップショットに期待される要素が含まれている。
スクリーンショットがアサートされた状態を視覚的に示している。
生成された Playwright テストがローカルと CI の両方で通る。

よくある落とし穴

本番環境に対して実行する: 常にステージング環境を使用してください。ブラウザ自動化は状態を変更する可能性があります。
壊れやすいセレクター: UI マークアップは変わります。CSS クラスではなく、安定した属性（data-testid、role）でアサートしてください。
長いツールチェーン: 「A、B、C、D をすべて実行」という単一のプロンプトはステップ C で失敗し、ページが奇妙な状態になる可能性があります。フローを監督可能なステップに分割してください。

次のステップ

mcp-server — next.browser.to-mcp

Playwright MCP によるブラウザ自動化

このレシピを使う場面

前提条件

手順

重要なプロンプト

検証

よくある落とし穴

関連ドキュメント

関連レシピ

関連ドキュメント

次のステップ