Playwright MCP — ユースケース, インストール & ライブデモ

Name: Playwright MCP Server
Author: microsoft

なぜ使うのか

主な機能

ファーストパーティ — Microsoft Playwrightチームが公開・保守
アクセシビリティツリーベース — ピクセルベースのブラウザエージェントより格段に信頼性が高い
Chromium、Firefox、WebKitに対応し、headedおよびheadlessモードで実行可能
マルチタブ、ファイルアップロード/ダウンロード、ネットワーク監視、動画録画に対応

ライブデモ

実際の動作

playwright.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

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

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

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

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

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

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

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

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add playwright -- npx -y @playwright/mcp@latest

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Playwright

本番デプロイのスモークテストを60秒で実行

👤 DevOpsエンジニア、リリースマネージャー ⏱ ~5 min intermediate

使うタイミング： デプロイを出したばかりで、成功宣言する前に、重要なユーザーフローが機能しているかを素早く確認したいときです。

前提条件

テストアカウント認証情報（実ユーザーではなく、専用QAアカウントを使用） — 環境変数に保存するか、プロンプト自体に含めます

フロー

ホームページを開き、読み込まれたことを確認

https://app.example.comを開きます。ページが200を返し、H1が「Welcome」と表示され、ログインボタンが表示されていることを確認してください。✓ コピーしました

→ 成功/失敗、失敗時はスクリーンショット
ログイン → コアアクション → ログアウトフローを実行

[email protected] / [password]でログインします。その後、「smoke-test-<timestamp>」という名前で新しいプロジェクトを作成します。それを削除してからログアウトします。✓ コピーしました

→ 各ステップが成功、失敗時はスクリーンショット＋DOMダンプ
失敗を診断

ステップが失敗した場合、ページスナップショットをキャプチャし、動作しているベースラインから何が異なるかを教えてください。✓ コピーしました

→ 破損した要素またはネットワークリクエスト

結果： 1分以内にデプロイについての確信（または急な不安）を得られます。完全なE2Eスイートは不要です。

注意点

ハードコードされたテストデータが蓄積し、本番環境を汚染 — テストデータに常にユニークなタイムスタンプを使用し、フロー終了時にクリーンアップします
ブラウザセッションが実行間で持続し、クリーン状態が必要なバグをマスク — --browser-context: incognitoで実行するか、実行間でクッキーをクリアします

組み合わせ： sentry

5つのビューポート幅でサイトを監査し、破損を報告

👤 フロントエンドエンジニア、デザイナー ⏱ ~15 min intermediate

使うタイミング： マーケティングサイトまたはプロダクトページを公開する前に、一般的な幅で破損していないか確認したいときです。

フロー

5つのビューポート幅（320、375、768、1024、1440）でページを開く

https://example.comをビューポート320×568、375×812、768×1024、1024×768、1440×900で開きます。各ビューポートのフルページスクリーンショットを取得してください。✓ コピーしました

→ 5つのスクリーンショット保存
各幅で水平オーバーフローを検出

各ビューポートについて、scrollWidth > viewportWidthの要素をリストします。これらが水平スクロールを引き起こし、破損しているように見えます。✓ コピーしました

→ ビューポートごとの問題のあるCSSセレクタリスト
修正を提案

各オーバーフロー要素について、計算されたCSSを取得し、最小限の修正（おそらくmax-width、overflow-wrap、またはブレークポイント調整）を提案してください。✓ コピーしました

→ 要素ごとの実行可能な差分

結果： 単一のPRとして適切な、特定のセレクタを含む優先度付きの修正リスト。

注意点

実ユーザーはスクロールバー（Windowsで15px）を持っていますが、ヘッドレスブラウザはデフォルトではシミュレートしません — --browser=chromiumと--browser=webkitの両方でテストし、幅はあなたが考えている以上に重要です

組み合わせ： chrome-devtools · filesystem

サイトをクロールして、破損したすべての内部リンクを検出

👤 ドキュメンテーション保守者、SEOマネージャー ⏱ ~30 min intermediate

使うタイミング： マーケティング推進前または四半期に一度 — 内部リンクの静かな404はSEOとユーザートラストを害します。

フロー

サイトをクロールしてすべての内部リンクを収集

https://docs.example.comから開始して、同じドメイン上のすべてのページをクロール（深さ最大3）します。見つかったすべてのhrefを収集します。✓ コピーしました

→ 完全なリンク在庫
各リンクをテスト

各ユニークなURLについてHEADリクエストを送信し、ステータスコードをキャプチャします。400以上をフラグします。✓ コピーしました

→ ステータスコード付きの破損リンクリスト
破損リンクをリファラー別にグループ化

各破損リンクについて、どのページがリンクしているかをリストし、修正が必要な場所がわかるようにしてください。✓ コピーしました

→ 破損リンクごとのリファラーリスト、リファラー数でソート

結果： ドキュメントチームに提供できるマークダウンレポート。すべての破損リンクが修正が必要なページ別にグループ化されています。

注意点

一部のサイトは攻撃的なクローラーをレート制限します — リクエスト間に遅延を追加；本番環境で実行する場合は、ピークオフの時間に実行します

組み合わせ： filesystem · github

認証が必要なデータをスクレイプ

👤 データアナリスト、研究者 ⏱ ~20 min advanced

使うタイミング： 必要なデータはログインの背後にあり（自社の管理ダッシュボード、内部レポートなど）、基本的なスクレーパーはそこに到達できません。

前提条件

ターゲットの有効な認証情報 — サービスアカウントを使用し、決して個人のアカウントを使用しません

フロー

ログイン

https://target.example.com/loginを開きます。メールフィールドに[email]を入力し、パスワードに[password]を入力します。送信します。✓ コピーしました

→ 確認されたセッション — ダッシュボードURLに着陸
データページにナビゲート

Reports セクションをクリックします。データテーブルがレンダリングされるのを待ちます。✓ コピーしました

→ DOMに表示されたテーブル
データを抽出

レポートテーブルのすべての行を読みます。各列をキーとして、JSONとして返します。✓ コピーしました

→ JSONの完全なデータセット

結果： 単純なHTTPスクレーパーでは取得できなかった構造化データ。スプレッドシートまたはDBにドロップする準備ができています。

注意点

MFAが有効になっていてフローを中断 — サービスが対応している場合はアプリ専用パスワードを設定するか、代わりに長寿命なAPIトークンを使用します
複数のログイン後にキャプチャが表示される — 永続的なブラウザコンテキストを使用（--user-data-dir）、クッキーが再利用され、キャプチャゲートをトリガーしません

組み合わせ： postgres · filesystem

組み合わせ

他のMCPと組み合わせて10倍の力を

playwright + filesystem

サイトをスクレイプし、各ページのコンテンツをディスクに保存してオフラインRAG用に

docs.stripe.comから/apiを開始してクロール、各ページを./knowledge/stripe/{path}.mdとしてMarkdownファイルで保存します。✓ コピーしました

playwright + chrome-devtools

パフォーマンス＋機能テストを1つのフローで — ページが正しくかつ速く読み込まれることを確認

ランディングページを開きます。H1を確認してから、Lighthouseトレースをキャプチャし、LCPが2秒以下かどうかを教えてください。✓ コピーしました

playwright + sentry

Sentryで報告された本番エラーを、ユーザーブレッドクラムを再生することで復現

Sentryイシューのテスト-3a91は、ユーザーがXをクリックしてYをクリックしてからクラッシュしたと言っています。Playwrightでその正確なシーケンスを再現して確認してください。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
browser_navigate	url: str	URLにナビゲート — どのフローの最初のアクション	1ページ読み込み
browser_snapshot		すべてのインタラクティブ要素（リンク、ボタン、入力）の構造化ビューを取得	無料
browser_click	ref: str (snapshot由来) \| selector: str	snapshotの参照またはCSSセレクタで識別される要素をクリック	無料
browser_type	ref, text, submit?: bool	入力フィールドを入力； submit:trueで、Enterも押します	無料
browser_screenshot	fullPage?: bool, path?: str	ビジュアル証拠をキャプチャ — デバッグまたは監査用	ディスク容量
browser_evaluate	script: str	ページコンテキストで任意のJSを実行 — まれに使用し、特定のツールを優先	無料
browser_network_requests		ページがロードしているものを検査；隠されたAPIエンドポイント検出に有用	無料

コストと制限

運用コスト

APIクォータ: 無料 — ローカルで実行、マシンリソースのみ使用
呼び出しあたりのトークン: スナップショットはページの複雑さによって500～3000トークン
金額: 無料。ブラウザバイナリは一度ダウンロード（Chromiumは約300MB）。
ヒント: スクリーンショットの代わりにbrowser_snapshotを使用 — トークン数で100倍安く、Claudeが作用するのに信頼性が高いです。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： 環境変数で渡します; 実本番認証情報をプロンプトに入れることはありません

データ送信先： ブラウザはナビゲート先のどのURLにも接続します。Microsoftへのテレメトリはありません。

ブラウザセッションは持続します — 認証をテストしている場合、実行間でクッキーをクリアしてください。
Headedモードはマシン上の実際のウィンドウを開きます; CI用にはheadlessを使用してください。

トラブルシューティング

よくあるエラーと対処法

要素が見つからない / TimeoutError

ページはまだレンダリング完了していません。明示的な待機を追加してください：browser_wait_for(selector)またはアクション前にbrowser_wait_for(text='...')。

確認： 最初にスナップショットを取って、ページに実際に何があるかを確認してください

Linux上でブラウザの起動に失敗

OSの依存関係をインストール：npx playwright install-deps。Dockerでは一般的 — ベースとして公式Playwrightイメージを使用してください。

確認： playwright --version

すべてのナビゲーションがnet::ERR_*で失敗

ネットワークサンドボックスの問題。Docker内の場合は--no-sandboxで実行するか、ファイアウォール/プロキシを確認してください。

サイトがオートメーションを検出し、キャプチャを表示

--browser-type=firefoxを使用（ヘッドレスChromiumより検出されにくい）、または適切な場合はheadedで実行します。一部のサイトは意図的にbot耐性です — 尊重してください。

代替案

Playwright 他との比較

代替案	代わりに使う場面	トレードオフ
puppeteer MCP	Chromiumのみが必要で、わずかにシンプルなAPIを希望する場合	Chromiumのみ; Firefox/WebKitなし; 現在、コミュニティは小規模
Firecrawl MCP	ページとインタラクトするのではなく、コンテンツを抽出するだけで良い場合	ホスト型（クレジットが必要）だが、インフラなし; フローをクリックスルーできない
Browserbase MCP	サーバーレスコンテキストからブラウザオートメーションを実行する必要がある場合（ローカルブラウザなし）	ホスト型サービス、分単位の課金; 本番エージェント向けに最適

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る