playwright-sse-mcp-server
PlaywrightをMCP（Model Context Protocol）サーバーとして提供するためのサービスです。このサーバーを使用することで、MCPクライアントからPlaywrightの機能を利用することができます。
前提条件
- Dockerがインストールされていること
- docker-composeがインストールされていること
- mcp-networkという名前のDockerネットワークが作成されていること
mcp-networkが存在しない場合は、以下のコマンドで作成できます：
docker network create mcp-network
セットアップと起動方法
- リポジトリをクローンまたはダウンロードします
- プロジェクトのルートディレクトリで以下のコマンドを実行します：
docker compose up --build
これにより、デフォルトの3002ポートでサーバーが起動します。起動が完了すると、以下のようなメッセージが表示されます：
playwright-sse-mcp-server | Server is running on port 3002
カスタムポートの設定
デフォルトポート（3002）以外のポートでサーバーを起動したい場合は、環境変数PORTを設定します：
PORT=4000 docker compose up --build
これにより、指定したポート（この例では4000）でサーバーが起動します：
playwright-sse-mcp-server | Server is running on port 4000
使用方法
同じmcp-networkに参加しているコンテナからの接続
同じmcp-networkに参加している他のコンテナからは、以下のURLでサーバーに接続できます（PORTはサーバーの起動ポート）：
playwright-sse-mcp-server:${PORT}/sse
デフォルトポートを使用している場合：
playwright-sse-mcp-server:3002/sse
これにより、PlaywrightのMCP機能を利用することができます。
ホスト側からの接続
ホストマシンからは、以下のURLでサーバーに接続できます（PORTはサーバーの起動ポート）：
localhost:${PORT}/sse
デフォルトポートを使用している場合：
localhost:3002/sse
Roo Codeからの接続
MCP Servers -> MCP設定を編集 -> 以下を記入します（PORTはサーバーの起動ポート）：
{
"mcpServers": {
"playwright-sse-mcp-server-local": {
"url": "http://localhost:${PORT}/sse"
}
}
}
デフォルトポートを使用している場合：
{
"mcpServers": {
"playwright-sse-mcp-server-local": {
"url": "http://localhost:3002/sse"
}
}
}
※2025/03/27現在、ClineはSSEをサポートしていない為使えません。
コンテナ環境でのRoo Codeからの接続
同じDocker Network内で実行されているRoo Codeコンテナからは、以下のようにMCP設定を行います：
{
"mcpServers": {
"playwright-sse-mcp-server-local": {
"url": "http://playwright-sse-mcp-server:3002/sse"
}
}
}
docker-compose.yml設定例：
services:
# Roo Code コンテナ
roo-code:
# 略
networks:
mcp-network:
external: true
この設定により、Roo Codeコンテナからplaywright-sse-mcp-serverコンテナに接続し、ブラウザ操作機能を利用できます。コンテナ名（playwright-sse-mcp-server）をホスト名として使用することで、Docker Network内での名前解決が可能になります。
開発コンテナ環境でのRoo Codeからの接続（ホスト経由）
開発コンテナ内でRoo Codeを実行し、mcp-network に参加せずにホストマシン経由でこのMCPサーバーに接続する場合、以下のようにMCP設定を行います。
Docker Desktop (Mac/Windows) の場合:
{
"mcpServers": {
"playwright-sse-mcp-server-local": {
"url": "http://host.docker.internal:<PORT>/sse"
}
}
}
Linux の場合 (例: ブリッジゲートウェイIPを使用):
{
"mcpServers": {
"playwright-sse-mcp-server-local": {
"url": "http://172.17.0.1:<PORT>/sse"
}
}
}
注意:
<PORT>は、MCPサーバーがホスト上で公開しているポート番号（デフォルト: 3002）に置き換えてください。- Linuxの場合は、
172.17.0.1の部分を実際のホストIPアドレスまたはDockerブリッジネットワークのゲートウェイIPアドレスに置き換えてください。詳細は「開発コンテナからの接続（ホスト経由）」セクションを参照してください。
開発コンテナからの接続（ホスト経由）
mcp-network に参加していない開発コンテナからこのMCPサーバーにアクセスする必要がある場合（例：既存プロジェクトとの兼ね合いでネットワーク変更が難しい場合）、ホストマシン経由で接続できます。
この方法では、開発コンテナから見て「ホストマシン」にあたるIPアドレスまたは特別なDNS名と、MCPサーバーがホスト上で公開しているポート（compose.yml の ports で設定、デフォルトは3002）を指定します。
接続先URL:
http://<host_ip_or_dns_name>:<PORT>/sse
<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
- 例:
- ホストのIPアドレス: ホストマシンのネットワークインターフェースに割り当てられているIPアドレスを使用します（例：
注意点:
- ホストのファイアウォール設定によっては、開発コンテナからホストのポートへのアクセスが許可されていない場合があります。
- 使用するポート番号は、
docker compose psコマンドやcompose.ymlファイルで確認してください。
便利な使用方法
毎回プロジェクトディレクトリに移動してdocker composeコマンドを実行するのは面倒です。以下の方法を使用すると、どこからでも簡単にサーバーを起動・停止できます。
シェルスクリプトを使用した方法
このプロジェクトには、サーバーの起動・停止・ログ表示を簡単に行うためのシェルスクリプトが含まれています。
- プロジェクトをクローンまたはダウンロードします：
# 任意のディレクトリにクローン
git clone https://github.com/torohash/playwright-sse-mcp-server.git /path/to/installation
.bashrc（または.zshrcなど使用しているシェルの設定ファイル）に以下の行を追加して、シェルスクリプトを読み込みます：
# Playwright MCP Server
export PLAYWRIGHT_MCP_HOME="/path/to/installation"
source "$PLAYWRIGHT_MCP_HOME/scripts/playwright-mcp.sh"
# 具体例（絶対パス利用）
export PLAYWRIGHT_MCP_HOME="$HOME/mcps/playwright-sse-mcp-server" # 実際のパスに置き換えてください
source "$PLAYWRIGHT_MCP_HOME/scripts/playwright-mcp.sh"
- シェルを再起動するか、設定ファイルを再読み込みします：
source ~/.bashrc
これで、どこからでも以下のコマンドを使用できるようになります：
基本的な使用方法
playwright-mcp-start- デフォルト設定（ポート3002、再起動なし）でサーバーを起動playwright-mcp-stop- サーバーを停止playwright-mcp-logs- サーバーのログを表示
永続モードの使用
永続モードを使用すると、システム再起動時にサーバーが自動的に起動します：
playwright-mcp-start -p
# または
playwright-mcp-start --persistent
カスタムポートの使用
playwright-mcp-start -P 4000
# または
playwright-mcp-start --port 4000
永続モードとカスタムポートの組み合わせ
playwright-mcp-start -P 4000 -p
# または
playwright-mcp-start --port 4000 --persistent
特定の再起動ポリシーの指定
playwright-mcp-start -r always
# または
playwright-mcp-start --restart always
ヘルプの表示
playwright-mcp-start -h
# または
playwright-mcp-start --help
この方法では、フラグオプションを使用して柔軟に設定を変更できるため、より使いやすくなっています。また、シェルスクリプトを別ファイルに分離することで、.bashrcファイルがシンプルになり、管理が容易になります。
シェルスクリプトのカスタマイズ
シェルスクリプトはscripts/playwright-mcp.shにあります。必要に応じて、このファイルを編集してカスタマイズすることができます。
環境変数
シェルスクリプトは以下の環境変数を使用します：
PLAYWRIGHT_MCP_HOME: プロジェクトのインストールディレクトリ。設定されていない場合は、スクリプトの場所から自動的に検出されます。
例えば、以下のように環境変数を設定することで、カスタムパスを指定できます：
export PLAYWRIGHT_MCP_HOME="/path/to/custom/installation"
注意事項
- このサーバーはheadlessモードでPlaywrightを実行します
- サーバーはSSE（Server-Sent Events）を使用してMCPクライアントと通信します