TabbitBlog

OpenCode에서 Playwright MCP 설정하기

브라우저 도구를 등록하고 모델 인자 오류와 브라우저 실행 오류를 구분합니다.

이 글의 목차
  1. 로컬 Playwright MCP 서버 등록
  2. 읽기 전용으로 페이지 열기
  3. 두 모델에서 확인한 도구 호출
  4. 가장 먼저 실패한 부분 찾기

OpenCode는 프로젝트에 로컬 서버를 등록해 Playwright MCP를 쓸 수 있습니다. 먼저 공개 페이지를 읽기만 하고 도구 결과에 제목이 나오는지 확인하세요. connected는 MCP 연결이 성립했다는 뜻입니다. 모델은 올바른 도구와 인자를 보내야 하고 Playwright는 브라우저를 실행해 페이지를 열어야 합니다.

OpenCode 1.18.16과 Playwright MCP 0.0.84에서 검증했습니다. 이 글은 1.x 형식을 사용합니다. OpenCode V2 문서에서는 서버 이름을 mcp.servers에 둡니다. 설정을 복사하기 전에 opencode --version으로 버전을 확인하세요.

로컬 Playwright MCP 서버 등록

프로젝트 루트의 opencode.json을 만들거나 수정합니다. 이미 mcp가 있다면 그 객체 안에 playwright를 추가하고 나머지 설정은 유지합니다. 명령 배열, 활성화와 제한 시간은 OpenCode 1.x MCP 문서를 참고하세요.

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "playwright": {
      "type": "local",
      "command": [
        "npx", "-y", "@playwright/mcp@0.0.84",
        "--browser", "firefox", "--headless", "--isolated"
      ],
      "enabled": true,
      "timeout": 45000
    }
  }
}

MCP 서버가 쓰는 Playwright와 호환되는 Firefox를 사용하세요. 검증한 패키지의 Playwright 버전은 1.65.0-alpha-2026-10-30입니다.

npx -y --package playwright@1.65.0-alpha-2026-10-30 playwright install firefox
opencode mcp list

브라우저 캐시를 따로 사용하면 MCP 프로세스에서도 그 캐시에 접근할 수 있게 합니다. 격리 실험에서는 호환되는 실행 파일을 직접 지정했습니다. 업데이트할 때 패키지와 브라우저 리비전을 맞추세요. 이름이 같은 실행 파일이라도 예전 버전은 프로토콜이 다를 수 있습니다.

프로젝트에서 opencode mcp list를 실행하고 새 세션에서 도구를 확인합니다. OpenCode는 여러 설정을 병합합니다. 오류를 좁히려면 빈 프로젝트와 별도의 설정·데이터 디렉터리를 쓰세요. 우선순위는 설정 문서에 나옵니다.

읽기 전용으로 페이지 열기

Selenium 공개 양식은 계정 없이 열 수 있고 제목을 눈으로 확인할 수 있습니다.

playwright_browser_navigate로 이 URL만 열어 주세요.
{"url":"https://www.selenium.dev/selenium/web/web-form.html"}
인자는 url 하나로, 주소를 문자열로 보냅니다.
도구 결과에 나온 페이지 제목을 알려 주세요.
클릭, 입력, 제출이나 다른 도구 호출은 하지 마세요.

도구 이름, 인자 객체, 돌아온 페이지 제목을 차례로 확인합니다. 실험에서 OpenCode 1.x는 playwright_browser_navigate를 표시했고, 독립 MCP 클라이언트에는 서버의 browser_navigate가 표시됐습니다. 접근성 스냅샷과 브라우저 옵션은 Microsoft Playwright MCP 저장소에 설명돼 있습니다.

모델을 비교할 때는 URL, 지시, MCP 서버, 브라우저를 고정합니다. 현재 공급자 어댑터에서 구조화된 도구 호출을 지원하는 모델을 선택하세요. 실험에서는 OpenAI 호환 공급자 설정으로 로컬 Ollama에 연결했습니다. 외부 모델 계정은 사용하지 않았습니다. 최종 응답이 없거나 종료 코드가 0이어도 도구 이벤트를 확인합니다.

두 모델에서 확인한 도구 호출

첫 실행은 이전 캐시에 있던 Firefox를 사용했습니다. 두 모델이 올바른 URL을 보냈지만 이동에 실패했습니다. 독립 MCP 클라이언트도 같은 유효한 입력에서 Firefox 프로토콜 오류를 받았습니다. 호환되는 Firefox 158(리비전 1569)에서는 독립 호출로 Web form을 읽었습니다. 이 환경에서 url에 숫자를 보내면 입력 검증 오류가 났습니다.

호환되는 환경에서 새 세션을 열고 같은 JSON 객체를 두 모델에 제시했습니다. 도구 결과와 최종 출력을 따로 확인했습니다.

로컬 모델페이지 이동 인자도구 결과최종 출력
qwen3:0.6b정확한 문자열 URLWeb form제목을 다시 말하지 않음
qwen3.5:0.8b정확한 문자열 URLWeb form제목을 담은 텍스트 이벤트 없음

두 번째 모델은 한 번만 호출하라는 요청에도 스냅샷을 두 번 더 호출했습니다. 호환 환경에서 자연어로 먼저 요청했을 때는 두 모델 모두 정확한 URL을 재현하지 못했습니다. 표의 실행에서는 JSON을 명시하자 두 모델이 페이지를 열었습니다. 제한된 로컬 실험입니다. 독립 클라이언트는 도구 25개를 발견했고, browser_navigate.url이 문자열임을 확인한 후 브라우저를 닫았습니다. 양식은 전송하지 않았습니다.

OpenCode에서 두 모델을 시험하고 독립 MCP 프로토콜을 확인한 결과

가장 먼저 실패한 부분 찾기

보이는 증상먼저 확인할 부분다음 테스트
opencode mcp list에 서버가 없거나 연결이 실패함프로젝트 설정과 MCP 프로세스버전, 작업 디렉터리, 명령, 실행 파일, 제한 시간 확인
연결됐지만 모델이 텍스트만 반환함모델, 공급자 또는 도구 접근사용 가능한 도구를 보고 다른 지원 모델로 한 번 호출
인자 이름이나 값의 유형이 다름도구 입력 스키마tools/list와 실제 인자 객체 비교
인자가 맞아도 독립 호출까지 실패함브라우저 시작, 프로토콜 또는 네트워크호환되는 브라우저로 같은 URL 재시도
도구에 제목이 있지만 최종 답변에 빠짐모델의 결과 읽기도구 결과를 근거로 삼고 제목만 요청

한 MCP 인자 보고에서는 파일 서버가 path를 기대했지만 filePath를 받았습니다. OpenCode 브라우저 토론에는 설정을 분리하지 않은 상태에서 브라우저 결과가 불안정하다는 경험이 나옵니다. 자기 세션의 도구 이름, 인자, 결과를 먼저 확인하세요.

이 예제는 새 브라우저 컨텍스트를 엽니다. 로그인된 탭이 필요하다면 기존 브라우저에 연결하는 방법을 참고하세요. 관련 설정으로 Playwright 브라우저 자동화, Claude Code의 Playwright MCP, Codex의 Playwright MCP, 오픈소스 코딩 에이전트가 있습니다. 탭을 열어야 할지 먼저 결정하려면 웹 검색과 브라우저 제어 및 브라우저 에이전트의 작동 방식을 확인하세요. Tabbit을 다운로드해 같은 공개 페이지 읽기로 별도 연결을 비교할 수도 있습니다.

자주 묻는 질문

OpenCode에서 Playwright MCP를 쓸 수 있나요?

예. 1.x에서는 opencode.json의 mcp 아래에 로컬 서버를 추가하고 프로젝트에서 opencode mcp list를 실행합니다. V2는 별도 스키마를 사용합니다.

모델을 바꿔도 브라우저 도구가 작동하나요?

MCP 설정은 그대로 둘 수 있습니다. 두 모델로 같은 작은 작업을 실행해 올바른 인자를 보내는지, 결과를 읽는지 확인하세요.

connected인데 페이지가 열리지 않는 이유는 무엇인가요?

MCP 연결은 브라우저 실행 전에 성립할 수 있습니다. 도구 결과에서 실행 파일, 시작, 프로토콜 또는 네트워크 오류를 확인하세요.

browser_navigate에는 어떤 인자가 필요한가요?

검증한 버전의 url은 문자열입니다. tools/list로 확인하고 클라이언트에 표시되는 정확한 도구 이름을 쓰세요.

이미 열어 둔 탭에 연결되나요?

이 예제는 격리 컨텍스트를 실행합니다. 기존 탭이나 로그인 세션이 필요하면 별도 연결을 설정하세요.

다음 단계

Tabbit 과 함께 일하세요.

탭 간 조사를 하고, 반복적인 브라우저 작업을 자동화하며, 모든 맥락을 손이 닿는 곳에 두세요.