Codex CLIにPlaywright MCPを設定して動作を確認する

CodexにPlaywright MCPをstdioサーバーとして登録し、三つの結果を確認します。まず codex mcp get playwright で起動コマンドを確かめます。次に新しいセッションの /mcp でツールを探します。最後にブラウザでページを開きます。どの段階で止まったか分かれば、直す箇所を絞れます。

r/OpenAIでは、VS CodeにPlaywright拡張機能を入れたものの、Codexがブラウザサーバーを認識しないという相談がありました。エディターのテスト用拡張とCodexのMCP設定は別です。まず独立したブラウザで接続を試します。後半では、ログイン済みのタブが必要なときにTabbit Browserを使うケースも説明します。Redditの元の議論

最初に押さえる点

• mcp_servers のTOMLテーブルに追加するか、codex mcp add を実行します。

• 同じ構成で再現したい場合はバージョンを固定します。検証はCodex CLI 0.166.0とPlaywright MCP 0.0.84で行いました。

• 設定の読み込み、ツールの検出、ページの移動はそれぞれ確認します。

• --headless はウィンドウを隠します。--isolated は一時的な状態を使います。

• 既存タブを操作する場合は接続先を選び、書き込む前にアカウントを確かめます。

三つの確認を比べる

Playwright MCPはブラウザ操作をMCP経由で公開します。構造化スナップショットには、画面上の役割、テキスト、項目への参照が含まれます。エージェントはそれを使ってボタンや入力欄を見つけます。公開資料を探すだけならウェブ検索でも足ります。Playwright MCPの公式文書

ローカルサーバーを登録する

Codex CLIとNode.jsを用意します。Playwrightの入門文書はNode.js 20以降を求めています。Codexを起動するのと同じターミナルで npx が動くことを確認してください。バージョン管理ツールを使っていると、エディターの起動環境とターミナルのPATHが異なることがあります。

codex --version
node --version
npx --version
codex mcp add playwright -- npx -y @playwright/mcp@0.0.84 --headless --isolated
codex mcp get playwright

-- の後ろはサーバーの起動コマンドです。Codexがnpxを実行し、-y はnpmの対話確認を省略します。その後のオプションはPlaywright MCPに渡ります。バージョン番号は検証したものを固定しています。OpenAIのCodexコマンド

TOMLで内容を確認する

~/.codex/config.toml から登録する方法もあります。同名の playwright がすでにある場合は、用途を調べてから置き換えるか、別の名前を使います。一つの名前に同じテーブルを重ねて書くと設定を解析できません。

[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@0.0.84", "--headless", "--isolated"]

ほかのクライアントではJSONの例が出ることがあります。Codexではコマンドと引数をTOMLに記載します。管理ポリシーやワークスペースの設定も影響するため、実際にCodexを使う環境で確認します。Codex MCPガイド

デモを開き、ツールの結果を読む

信頼できるワークスペースでCodexの新しいセッションを開始します。/mcp でPlaywrightを探します。続いて、結果が見分けやすい依頼を出します。

Playwright MCPで https://demo.playwright.dev/todomvc/ を開いてください。
ブラウザツールの結果から最終URL、ページタイトル、最初の
見える見出しを返してください。読み取ったら停止してください。

実行履歴で browser_navigate とURLを確認します。続けて browser_snapshot を実行すれば見出し todos が確認できます。モデルの文章だけでは実際にブラウザを開いたか分かりません。観察を次の操作に使う流れはエージェント型ブラウザの解説にまとめています。

検証では一時ディレクトリ、プロセス専用のサーバー名、分離したブラウザを使いました。Codex app-serverで二つのツールを検出し、デモを開いて todos を読み取りました。最終URLの末尾は /#/、ページタイトルは React • TodoMVC でした。確認後にブラウザを閉じました。デモのfaviconは404でしたが、必要なページ内容は表示されました。

最初に失敗した段階から調べる

エントリがなければ、どのCodexを使い、どの設定を読んだかを確認します。パッケージ名やオプションは別々の引数です。codex mcp get playwright --json を使うなら、出力は手元で確認し、共有前に秘密情報やローカルのパスを取り除きます。

設定はあるのにツールが出ない場合はサーバーの起動エラーを見ます。サーバーのコマンドに --help を足して、npxがそのパッケージを起動できるか確かめます。実ブラウザの確認は別に必要です。別のRedditスレッドでは、Windowsで手順どおり設定しても接続できないという体験談がありました。こうした場合は使っている環境と有効な設定から調べます。r/ChatGPTCodingの議論

ツールが出るのにページを開けない場合は、エラーに書かれたブラウザ名と実行ファイルを調べます。バージョンに対応したブラウザのインストール手順やチャンネル指定を確認してください。空白画面なら実際のURLとネットワークエラーを見ます。原因を絞ってからほかのブラウザ自動化ツールも比較できます。

どのブラウザとプロファイルが開くか

0.0.84では、ブラウザやチャンネルを指定しなければChromiumのChromeチャンネルが選ばれます。実行するブラウザ、ウィンドウの表示、セッション状態は別々の設定です。画面を表示しながら分離した状態で動かすこともできます。Microsoft Playwright MCPの設定

サーバー管理のプロファイルは普段のプロファイルと分かれています。分離モードは一時的な状態を使います。同じURLでも別セッションではログインを求められる場合があります。プロファイル、ワークスペース、タブグループの違いも確認してください。

既存タブへ接続する場合は、利用バージョンの拡張機能の手順を確認します。ページタイトルでタブを、アカウント名やワークスペース名でアクセス先を確かめます。既存ブラウザへの接続ガイドには読み取りだけで試す例があります。

ログイン済みの作業にはどんな接続が必要か

分離したPlaywright MCPは、QA、公開ページの確認、バグの再現に向いています。すでに開いた管理画面を扱う場合は、最初に一つのタブと一つの読み取り作業に範囲を限定します。変更を許す前にアカウントも確認します。

Tabbitのクイックスタートには、対応するコーディングエージェントとTabbit Browserを接続する別の方法があります。CodexとTabbitの商品登録事例では実際のフォームを操作し、商品一覧から結果を読み直しています。この事例ではPlaywright MCPとは別の接続を使っています。Tabbitクイックスタート

まず分離した公開デモでツール、URL、見出しを照合します。それができたら自分のテスト環境の一ページに移します。既存セッションが必要になった段階で接続方法を明示して操作します。一つずつ確認できることが、ブラウザ自動化を広げる出発点になります。

Secholar.L

Tabbit グロース&コンテンツ担当

Secholar.L は AI ブラウザとエージェントワークフローについて、実際の調査と検証可能な一次情報に基づく実践的なガイドを執筆しています。