TabbitBlog

Claude CodeでPlaywright MCPを設定・確認

Claude Codeの設定範囲を選び、Playwright MCPを登録してブラウザツールを確認します。

この記事の内容
  1. 押さえておきたいこと
  2. 設定範囲を選ぶ
  3. 個人用サーバーを登録する
  4. チームで共有する
  5. 公開ページで接続を確かめる
  6. 最初に失敗した確認から調べる
  7. ログイン済みのタブに接続する場面

claude mcp add を実行する前に、どのプロジェクトでサーバーを使うか決めます。一つのプロジェクトで自分だけが試すなら local、チームで確認して共有するなら project、自分が複数プロジェクトで使うなら user を選びます。そのあと接続を確認し、ブラウザから検証できる結果を返してもらいます。

Redditには、Claude側の引数に --isolated を置いたため、オプションが不明と表示された例があります。その引数を受け取るのは区切りの後ろにあるPlaywrightです。後半ではログイン済みのタブが必要な場面でTabbit Browserを例にします。元の議論

押さえておきたいこと

  • プロジェクトのルートから始めます。localとprojectは両方ともプロジェクトに関係しますが、保存先と共有範囲が違います。

  • --scope と --transport は -- より前に置きます。--headless と --isolated はサーバーの引数です。

  • 設定があっても起動できるとは限りません。claude mcp list と新しいセッションのツールをそれぞれ確認します。

  • 公開ページを開き、ツールの出力に表示された値を照合します。

  • 最初は個人用の設定と一時的なブラウザ状態で十分です。

設定範囲を選ぶ

範囲利用できる人保存先使う場面
localこのプロジェクトの自分~/.claude.json 内のプロジェクトの記録個人用、最初の検証
projectプロジェクトと承認したチームメンバールートの .mcp.json確認済みの設定を共有
user複数のプロジェクトで使う自分~/.claude.json 内のユーザー設定繰り返し使う個人ツール

Claude Codeの既定値は local です。この設定は現在のプロジェクトに限られます。同じ名前が複数にあれば、local、project、userの順に優先します。変更した内容と表示されたコマンドが違う場合は、同名の登録を確認します。Claude Codeの設定範囲

Playwright MCPのサーバーは複数のクライアントで使えます。設定の書式はクライアントごとに違います。Codexの設定ガイドではTOMLを使います。Claude Codeのプロジェクト設定はJSONです。

個人用サーバーを登録する

同じターミナルでClaude Codeと npx を使えることを確かめます。Playwrightの入門文書はNode.js 20以降を求めています。下の例では検証したバージョンに固定し、ウィンドウを表示せず一時的な状態で起動します。Playwrightのインストール手順

claude --version
node --version
claude mcp add --scope local --transport stdio playwright -- npx -y @playwright/mcp@0.0.84 --headless --isolated
claude mcp list

-- の左側はClaudeが解釈します。右側のコマンドと引数はサーバーのものです。unknown option '--headless' と出たら、まず位置を確認します。Headlessは画面を表示するかどうか、isolatedは一時的な状態を使うかどうかを決めます。Anthropicのstdio構文

チームで共有する

ルートの .mcp.json に同じ設定を書けます。登録するときに --scope project を指定して作成することもできます。チームメンバーは起動するプログラムと引数を読み、プロジェクト内で承認します。共有ファイルには秘密情報や個人のパスを入れません。Claude Code MCPのクイックスタート

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--headless", "--isolated"]
    }
  }
}

ここで指定するのはサーバーの起動方法です。サイトを操作できる範囲は、ブラウザのセッションと組織のポリシーに従います。ログインが必要なテストでは許可されたプロファイルを別に用意します。プロファイルとタブグループの解説に、状態が保存される場所をまとめています。

公開ページで接続を確かめる

設定したプロジェクトで新しいセッションを開きます。/mcp でPlaywrightを探します。ターミナルやウェブ検索を使う代わりに、検証したいMCPツールの名前を依頼に含めます。

Playwright MCPで次のページを開いてください。
https://www.selenium.dev/selenium/web/web-form.html
ツールの結果に出た最終URLと、最初に表示される見出しを返してください。
入力も送信もせず、読み取り後に停止してください。

期待する見出しは Web form です。移動の結果に保存したスナップショットのパスしか出ない場合は、browser_snapshot で見出しを確認します。クリックを任せる前に、使用ツール、URL、見出しが一致しているか見ます。エージェント型ブラウザの解説でも、観察をもとに次の操作を決める仕組みを説明しています。

検証環境はClaude Code 2.1.318、Node.js 22、Playwright MCP 0.0.84です。一時プロジェクトで登録し、Claude Codeで設定範囲と接続を確認しました。プロトコル用の検証プログラムで同じ起動コマンドを使い、browser_navigate と browser_snapshot を検出して Web form を読みました。フォームの送信やClaudeモデルの実行は行っていません。

プロジェクト内ではlocalが接続済み、projectが承認待ちでした。別のディレクトリではuserだけが表示されました。

検証で確認したClaude Codeの設定範囲、Playwright MCPのツールと接続失敗
設定範囲と接続状態はClaude Codeで確認し、ページは同じ起動コマンドで読み取りました。

最初に失敗した確認から調べる

状況分かること次に確認する箇所
サーバーが出ないセッションが設定を読み込んでいないディレクトリ、範囲、同名設定、構文
承認待ち設定が見つかり、承認が必要.mcp.json を確認してプロジェクトで承認
接続失敗サーバーの接続を確立できない実行ファイル、引数、PATH、標準エラー
接続済みだがツールがないツールの検出、検索、権限を確認する段階/mcp、セッション、ツール名、ポリシー
ツールは実行されるが開けないブラウザ起動かページ移動の問題チャンネル、実行ファイル、URL、ネットワーク

実行ファイルが存在しないサーバーも登録して試しました。設定の登録はでき、接続確認は失敗しました。--headless をClaude側に移した試験では、ブラウザ起動の前にコマンドが拒否されました。前者は起動コマンド、後者は引数の配置を直します。

claude mcp list では接続済みと表示されることがあるのに、使用中のセッションの /mcp では出てこないという報告がありました。設定を変更し直す前に両方の表示を確認します。元の議論

ツール検索を使うと、必要になるまでMCPツールの定義が読み込まれない場合があります。新しいセッションで読み取り作業を指定し、履歴でツール名を確かめます。許可されない場合は先にポリシーを確認します。必要な機能が違う場合は別のブラウザ自動化ツールを比較できます。Anthropicのツール検索

ログイン済みのタブに接続する場面

一時セッションは公開ページで操作を再現するのに向いています。ログイン済みの管理画面を扱うなら、共有するタブ、アカウント、ワークスペースを決めます。変更前に読み取りだけで接続先を確認します。既存ブラウザへの接続ガイドに確認手順があります。

Tabbit BrowserにはClaude Codeなど対応エージェントを接続する別の方法があります。使うタブがすでにTabbitで開いている場合に役立ちます。商品登録の動画は別のコーディングエージェントを使い、実際の一覧で結果を読み返すところを示しています。Tabbitクイックスタート

まずlocalと公開ページで接続を試します。共有するならレビュー後にprojectへ移し、複数のプロジェクトで必要ならuserを選びます。既存のログイン状態が必要な場合は許可された接続方法を使います。結果を確かめられる小さなブラウザ自動化から始めれば、問題が起きた段階を特定できます。

よくある質問

Claude CodeにPlaywright MCPを追加するには?

プロジェクトのルートで claude mcp add --scope local --transport stdio playwright -- npx -y @playwright/mcp@0.0.84 --headless --isolated を実行します。claude mcp list で接続を確認し、新しいセッションでツールを確かめます。

projectとuserの違いは何ですか?

projectはプロジェクトルートの.mcp.jsonに設定を保存し、チームが確認して承認できます。userは現在のユーザーが複数のプロジェクトで使う個人設定です。

localの設定はどこに保存されますか?

Claude Codeはユーザー設定内のプロジェクトの記録に保存します。該当プロジェクトに限定され、リポジトリで共有されません。

接続済みなのにツールが見つからないのはなぜですか?

新しいセッションでディレクトリ、プロジェクト承認、同名設定、権限を確認してください。ツール検索では必要になるまでツール定義の読み込みを遅らせる場合があります。

Claude in Chromeの拡張機能は必要ですか?

この記事のstdio設定はMicrosoftのPlaywright MCPと独立したブラウザを起動します。既存のタブに接続する拡張機能は別の選択肢です。

次のステップへ

Tabbit と一緒に仕事をしましょう。

タブをまたいで調査し、繰り返しのブラウザ作業を自動化し、あらゆる文脈を手の届くところに。