Playwright MCPサーバー：アシスタントに本物のブラウザーを操作させる
Playwright MCPサーバーのガイドと設定作成ツール
Playwright MCPサーバー：セットアップ、オプション、ツール | We.Inc
Playwright MCPサーバーの機能、アクセシビリティスナップショットの仕組み、設定すべきオプション、主要ツールを解説。設定を自動で書く作成ツール付きです。
Playwright MCPは、Microsoftが公開しているオープンソースのMCPサーバーです。AIアシスタントに本物のブラウザーを与え、クリック、入力、フォーム記入、ページの読み取りをさせられます。スクリーンショットを見る代わりに、ページのアクセシビリティツリー、つまりボタン、リンク、テキストを構造化した一覧を読み取ります。Node.js 18以降が必要で、npxの1行でインストールできます。
Playwright MCPの概要
- ページの見方
- ピクセルではなくアクセシビリティスナップショット
- ブラウザー
- chrome, firefox, webkit, msedge
- デフォルトのウィンドウ
- 表示あり（headed）。非表示にするには--headlessを追加
ウェブサイトやストアを運営しているなら、Playwright MCPを使うと、アシスタントに顧客と同じように自分のページを巡回させられます。メニューを開き、カートに商品を入れ、問い合わせフォームを送信し、壊れている箇所を報告させるといった使い方です。広く使われているブラウザーテストライブラリのPlaywrightをベースにしています。下でオプションを選んで設定をコピーしたら、ログイン済みの環境に向ける前に安全上の注意を読んでください。
- ブラウザーを選び、ウィンドウを表示するかheadlessにするかを決めます。
- 毎回まっさらな状態でセッションを始め、ディスクに何も保存したくない場合は、isolatedモードをオンにします。
- PDF保存やテスト用のアサーションなど、必要な追加機能グループを加えます。
- JSONをMCPアプリの設定にコピーして再起動します。初回実行時にパッケージがダウンロードされます。
- 本番の管理者ログインではなく、ステージング環境やテスト用アカウントでテストしましょう。
- テスト実行には--isolatedを使い、あるセッションのcookieが次のセッションに漏れないようにしましょう。
- クリックを頼む前にスナップショットを取らせましょう。アシスタントはその一覧から操作対象の要素を選びます。
- 漠然とした目標ではなく、正確な手順（「/pricingを開き、2番目のプランをクリックし、合計を報告する」）を伝えましょう。
- browser_run_code_unsafeには注意しましょう。任意のPlaywrightコードを実行するので、信頼できるプロンプトでのみ使ってください。
よくある質問
アクセシビリティスナップショットとは何ですか？
ブラウザーはアクセシビリティツリーを保持しています。これはスクリーンリーダーが使うのと同じ構造化されたビューで、ボタン、リンク、見出し、入力欄のそれぞれに名前と役割が付いています。Playwright MCPはこのツリーをアシスタントに渡すので、画像から推測しなくても「カートに追加ボタンをクリック」と指定できます。
Playwright MCPはセキュリティ境界になりますか？
なりません。READMEにも太字でそう書かれています。--allowed-originsや--blocked-originsのようなオプションも、セキュリティ境界ではないと説明されています。監督しながら使うツールとして扱い、ミスが実際の顧客データに届かない場所で実行しましょう。
セッション間でログイン状態は保持されますか？
デフォルトでは永続プロファイルを使うため、通常のブラウザーと同じようにログイン情報がディスクに保存されます。--isolatedを使うとプロファイルはメモリ上に置かれ、ブラウザーを閉じると消えます。--storage-stateを使えば、isolatedセッションにcookieを事前に読み込めます。
スクリーンショットの撮影やPDFの保存はできますか？
browser_take_screenshotは主要ツールの1つです。PDF保存（browser_pdf_save）は--caps=pdfで有効にする必要があり、座標指定でクリックするツールには--caps=visionが必要です。
Playwright MCPとPlaywright CLIのどちらを使うべきですか？
READMEでは、コーディングエージェントにはトークン消費の少ない別ツールのPlaywright CLIのほうが向いている場合があるとしています。MCPは、ブラウザーの状態を開いたまま保持する価値がある、長めの探索的なセッションに使うのがよいとしています。
永続、isolated、自分のブラウザー
- Playwright MCPには3つの実行方法があります。デフォルトの永続プロファイルでは、cookieとログイン情報をプロジェクトごとのフォルダーに保存します。isolatedモードではすべてをメモリ上に置くため、再現性のあるテストに向いています。ブラウザー拡張機能モードでは、すでに開いているChromeやEdgeのウィンドウに接続します。便利ですが、アシスタントがあなたの実際のログイン情報で操作することになります。
- 1つの永続プロファイルを同時に使えるブラウザーは1つだけです。同じプロジェクトで2つのアシスタントセッションを実行する場合は、2つ目を--isolatedか別の--user-data-dirで起動してください。
自分のサイトで任せるのに向いている作業
- メインメニューのすべてのリンクが、正しく読み込まれるページを開くか確認する。問い合わせフォームにテスト用の情報を入力し、お礼メッセージが表示されるか確認する。遅く感じるページのコンソールメッセージを読む。スマートフォンの幅にリサイズし、はみ出している要素を一覧にする。
- 結果は変更のたびに繰り返せるチェックリストとして書き留めましょう。そうすれば、アシスタントの実行がそのまま回帰テストになります。
知っておきたいオプション
各オプションには環境変数での指定方法もあり、READMEに一覧があります。
Playwright MCPの主なオプション
- --browser <browser>
- chrome、firefox、webkit、msedgeのいずれか
- --headless
- ウィンドウを表示せずに実行します。デフォルトは表示あり（headed）です
- --isolated
- ブラウザープロファイルをディスクではなくメモリ上に保持します
- --storage-state <path>
- isolatedセッションにcookieとローカルストレージを読み込みます
- --device <device>
- デバイスをエミュレートします（例："iPhone 15"）
- --viewport-size <size>
- viewportをピクセルで指定します（例："1280x720"）
- --caps <caps>
- pdfやvisionなど、追加のツールグループを有効にします
- --allowed-origins / --blocked-origins
- リクエストのオリジンを許可またはブロックします。セキュリティ境界ではありません
- --timeout-action / --timeout-navigation
- デフォルトは5000 msと60000 ms
- --port <port>
- HTTPで提供し、クライアントがURLで接続できるようにします
主要ツール
Playwright MCPの主要ツール
- ページのアクセシビリティスナップショットを取得する
- はい
設定例
標準の設定
READMEがほとんどのMCPアプリ向けに示している最小構成です。
HTTPサーバーとして実行し、URLで接続する
アプリ自身がウィンドウを開けない場合に便利です。クライアントはhttp://localhost:8931/mcpを指定します。
Playwright MCP設定作成ツール
オプションを選んでJSONをコピーしてください。このページはテキストを生成するだけで、ブラウザーは起動しません。
ブラウザー
Headless（ウィンドウを表示しない）
isolatedプロファイル（ディスクに何も保存しない）
viewportのサイズ（例：1280x720、任意）
追加の機能グループ
設定JSON
viewportは1280x720の形式（幅x高さ、ピクセル単位）で指定してください。今回は省略されました。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る