Playwright SSE MCP Server

playwright-sse-mcp-server

PlaywrightをMCP（Model Context Protocol）サーバーとして提供するためのサービスです。このサーバーを使用することで、MCPクライアントからPlaywrightの機能を利用することができます。

前提条件

• Dockerがインストールされていること
• docker-composeがインストールされていること
• mcp-networkという名前のDockerネットワークが作成されていること

mcp-networkが存在しない場合は、以下のコマンドで作成できます：

セットアップと起動方法

1. リポジトリをクローンまたはダウンロードします
2. プロジェクトのルートディレクトリで以下のコマンドを実行します：

これにより、デフォルトの3002ポートでサーバーが起動します。起動が完了すると、以下のようなメッセージが表示されます：

カスタムポートの設定

デフォルトポート（3002）以外のポートでサーバーを起動したい場合は、環境変数PORTを設定します：

これにより、指定したポート（この例では4000）でサーバーが起動します：

使用方法

同じmcp-networkに参加しているコンテナからの接続

同じmcp-networkに参加している他のコンテナからは、以下のURLでサーバーに接続できます（PORTはサーバーの起動ポート）：

デフォルトポートを使用している場合：

これにより、PlaywrightのMCP機能を利用することができます。

ホスト側からの接続

ホストマシンからは、以下のURLでサーバーに接続できます（PORTはサーバーの起動ポート）：

デフォルトポートを使用している場合：

Roo Codeからの接続

MCP Servers -> MCP設定を編集 -> 以下を記入します（PORTはサーバーの起動ポート）：

デフォルトポートを使用している場合：

※2025/03/27現在、ClineはSSEをサポートしていない為使えません。

コンテナ環境でのRoo Codeからの接続

同じDocker Network内で実行されているRoo Codeコンテナからは、以下のようにMCP設定を行います：

docker-compose.yml設定例：

この設定により、Roo Codeコンテナからplaywright-sse-mcp-serverコンテナに接続し、ブラウザ操作機能を利用できます。コンテナ名（playwright-sse-mcp-server）をホスト名として使用することで、Docker Network内での名前解決が可能になります。

開発コンテナ環境でのRoo Codeからの接続（ホスト経由）

開発コンテナ内でRoo Codeを実行し、mcp-network に参加せずにホストマシン経由でこのMCPサーバーに接続する場合、以下のようにMCP設定を行います。

Docker Desktop (Mac/Windows) の場合:

Linux の場合 (例: ブリッジゲートウェイIPを使用):

注意:

• <PORT> は、MCPサーバーがホスト上で公開しているポート番号（デフォルト: 3002）に置き換えてください。
• Linuxの場合は、172.17.0.1 の部分を実際のホストIPアドレスまたはDockerブリッジネットワークのゲートウェイIPアドレスに置き換えてください。詳細は「開発コンテナからの接続（ホスト経由）」セクションを参照してください。

開発コンテナからの接続（ホスト経由）

mcp-network に参加していない開発コンテナからこのMCPサーバーにアクセスする必要がある場合（例：既存プロジェクトとの兼ね合いでネットワーク変更が難しい場合）、ホストマシン経由で接続できます。

この方法では、開発コンテナから見て「ホストマシン」にあたるIPアドレスまたは特別なDNS名と、MCPサーバーがホスト上で公開しているポート（compose.yml の ports で設定、デフォルトは3002）を指定します。

接続先URL:

<PORT> はMCPサーバーが起動しているポート番号に置き換えてください。

<host_ip_or_dns_name> の特定方法:

• Docker Desktop (Mac/Windows): 特別なDNS名 host.docker.internal を使用できます。
  • 例: http://host.docker.internal:3002/sse
• Linux:
  • ホストのIPアドレス: ホストマシンのネットワークインターフェースに割り当てられているIPアドレスを使用します（例：ifconfig や ip addr コマンドで確認）。
    • 例: http://192.168.1.10:3002/sse （IPアドレスは環境によって異なります）
  • Dockerブリッジネットワークのゲートウェイ: Dockerのデフォルトブリッジネットワーク (bridge) のゲートウェイIPアドレス（通常 172.17.0.1）を使用できます。docker network inspect bridge コマンドで確認できます。
    • 例: http://172.17.0.1:3002/sse

注意点:

• ホストのファイアウォール設定によっては、開発コンテナからホストのポートへのアクセスが許可されていない場合があります。
• 使用するポート番号は、docker compose ps コマンドや compose.yml ファイルで確認してください。

便利な使用方法

毎回プロジェクトディレクトリに移動してdocker composeコマンドを実行するのは面倒です。以下の方法を使用すると、どこからでも簡単にサーバーを起動・停止できます。

シェルスクリプトを使用した方法

このプロジェクトには、サーバーの起動・停止・ログ表示を簡単に行うためのシェルスクリプトが含まれています。

1. プロジェクトをクローンまたはダウンロードします：

2. .bashrc（または.zshrcなど使用しているシェルの設定ファイル）に以下の行を追加して、シェルスクリプトを読み込みます：

3. シェルを再起動するか、設定ファイルを再読み込みします：

これで、どこからでも以下のコマンドを使用できるようになります：

基本的な使用方法

• playwright-mcp-start - デフォルト設定（ポート3002、再起動なし）でサーバーを起動
• playwright-mcp-stop - サーバーを停止
• playwright-mcp-logs - サーバーのログを表示

永続モードの使用

永続モードを使用すると、システム再起動時にサーバーが自動的に起動します：

カスタムポートの使用

永続モードとカスタムポートの組み合わせ

特定の再起動ポリシーの指定

ヘルプの表示

この方法では、フラグオプションを使用して柔軟に設定を変更できるため、より使いやすくなっています。また、シェルスクリプトを別ファイルに分離することで、.bashrcファイルがシンプルになり、管理が容易になります。

シェルスクリプトのカスタマイズ

シェルスクリプトはscripts/playwright-mcp.shにあります。必要に応じて、このファイルを編集してカスタマイズすることができます。

環境変数

シェルスクリプトは以下の環境変数を使用します：

• PLAYWRIGHT_MCP_HOME: プロジェクトのインストールディレクトリ。設定されていない場合は、スクリプトの場所から自動的に検出されます。

例えば、以下のように環境変数を設定することで、カスタムパスを指定できます：

注意事項

• このサーバーはheadlessモードでPlaywrightを実行します
• サーバーはSSE（Server-Sent Events）を使用してMCPクライアントと通信します