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 서버 -> 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 네트워크(bridge)의 게이트웨이 IP 주소(일반적으로 172.17.0.1 )를 사용할 수 있습니다. docker network inspect bridge 명령으로 확인할 수 있습니다.
  - 예: http://172.17.0.1:3002/sse

주의점:

호스트의 방화벽 설정에 따라 개발 컨테이너에서 호스트 포트에 대한 액세스가 허용되지 않을 수 있습니다.
사용하는 포트 번호는 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"

주의사항

이 서버는 헤드리스 모드에서 Playwright를 실행합니다.
서버는 SSE(Server-Sent Events)를 사용하여 MCP 클라이언트와 통신합니다.

Playwright SSE MCP Server

Integrations

playwright-sse-mcp-server

전제 조건

설정 및 시작 방법

맞춤 포트 설정

사용방법

동일한 mcp-network에 참여하는 컨테이너에서 연결

호스트 측에서 연결

Roo Code에서 연결

컨테이너 환경에서 Roo Code에서 연결

개발 컨테이너 환경에서 Roo Code에서 연결(호스트를 통해)

개발 컨테이너에서 연결(호스트를 통해)

편리한 사용법

쉘 스크립트를 사용한 방법

기본 사용법

영구 모드 사용

사용자 정의 포트 사용

영구 모드와 사용자 정의 포트의 조합

특정 재시작 정책 지정

도움말 표시

쉘 스크립트 사용자 정의

환경 변수

주의사항