TabbitBlog

Codex CLI에 Playwright MCP를 설정하고 확인하는 법

Codex에 Playwright MCP를 등록하고 도구와 테스트 페이지를 확인합니다.

이 글의 목차
  1. 먼저 볼 내용
  2. 세 단계 빠른 확인
  3. 로컬 서버 등록하기
  4. TOML에서 설정 검토하기
  5. 데모 페이지로 연결 확인하기
  6. 처음 실패한 단계부터 살펴보기
  7. 어떤 브라우저와 프로필이 열리나요?
  8. 로그인한 탭이 필요한 경우

Codex에 Playwright MCP를 stdio 서버로 등록한 다음 세 가지를 확인합니다. codex mcp get playwright로 실행 구성을 보고, 새 세션의 /mcp에서 도구가 나오는지 확인합니다. 마지막으로 브라우저가 실제 페이지를 열어야 합니다. 어디까지 됐는지 알면 설정을 무작정 바꿀 필요가 없습니다.

r/OpenAI의 한 사용자는 VS Code에 Playwright 확장 프로그램을 설치했는데도 Codex에서 브라우저 서버가 잡히지 않았다고 했습니다. 편집기의 테스트 확장 프로그램과 Codex MCP 서버는 별도의 설정입니다. 먼저 격리된 브라우저로 확인한 뒤, 이미 로그인한 탭이 필요할 때 Tabbit Browser를 어떻게 연결하는지 살펴봅니다. Reddit 원문

먼저 볼 내용

  • Codex TOML의 mcp_servers에 등록하거나 codex mcp add를 사용합니다.

  • 여러 사람이 재현해야 한다면 버전을 고정합니다. 이 검증은 Codex CLI 0.166.0과 Playwright MCP 0.0.84를 사용했습니다.

  • 설정 항목, 도구 목록, 페이지 방문 결과를 각각 확인합니다.

  • --headless는 창을 숨깁니다. --isolated는 임시 상태로 시작합니다.

  • 열린 탭을 조작하려면 연결 방법을 선택하고 쓰기 전에 계정과 탭을 확인합니다.

세 단계 빠른 확인

단계확인 방법기대 결과실패하면 볼 곳
설정codex mcp get playwright기대한 명령과 인수설정 파일, 신뢰 상태, 중복 이름
도구새 세션에서 /mcpbrowser_navigate, browser_snapshotNode, npx, 서버 시작, 정책
브라우저TodoMVC 데모 열기최종 URL, 페이지 제목, 화면 제목브라우저 설치와 실행 옵션, 네트워크

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

-- 뒤의 명령과 인수는 MCP 서버에 속합니다. Codex는 npx를 실행하고, -y는 npm 설치 확인을 생략합니다. 나머지 옵션은 Playwright MCP에 넘어갑니다. 예시의 패키지 버전은 실제로 확인한 버전입니다. OpenAI Codex 명령 문서

TOML에서 설정 검토하기

~/.codex/config.toml을 직접 편집해도 됩니다. playwright라는 이름이 이미 있다면 기존 항목의 용도를 확인한 뒤 바꾸거나 새 이름을 쓰세요. 같은 이름의 TOML 테이블을 두 번 정의하면 해석이 실패할 수 있습니다.

[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를 찾아 주소와 제목을 봅니다. browser_snapshot을 요청하면 todos 제목을 추가로 확인할 수 있습니다. 모델의 답변이 맞아도 페이지를 열었다는 증거는 도구 기록에서 찾는 편이 정확합니다. 에이전트형 브라우저 안내에서 페이지 관찰을 다음 동작에 사용하는 과정을 설명합니다.

검증에서는 임시 작업 폴더, 그 프로세스에만 적용되는 서버 별칭, 격리된 브라우저를 사용했습니다. Codex app-server가 두 도구를 찾고 데모를 열었습니다. 주소는 /#/로 끝났고 페이지 제목은 React • TodoMVC였으며 스냅샷에 todos가 보였습니다. 확인 후 브라우저를 닫았습니다. 데모의 파비콘은 404였지만 확인 대상 페이지는 로드됐습니다.

Codex에서 Playwright MCP 도구와 todos 제목을 확인한 결과
로컬 연결 검사에서 관찰한 세 가지 결과를 정리했습니다.

처음 실패한 단계부터 살펴보기

설정 항목이 없다면 어떤 Codex 바이너리를 실행했는지, 어느 파일을 읽는지 확인합니다. 패키지와 옵션은 각각 별도의 인수여야 합니다. codex mcp get playwright --json의 출력은 로컬에서 확인하고 공유하기 전에 비밀 값과 사적인 경로를 제거하세요.

항목은 있는데 도구가 없다면 서버 시작 오류를 봅니다. 서버 명령에 --help를 붙이면 npx가 패키지를 실행할 수 있는지 확인할 수 있습니다. 브라우저 시작은 별도 검사입니다. 다른 Reddit 사용자도 Windows에서 튜토리얼을 따라 했지만 Codex 연결에 실패했다고 했습니다. 이 경험은 실제 실행 환경에서 설정을 확인해야 하는 이유를 보여 줍니다. r/ChatGPTCoding 원문

도구는 보이는데 탐색에 실패하면 오류의 브라우저 이름과 예상 실행 파일을 확인합니다. 해당 버전의 브라우저 설치 또는 채널 지정 문서를 참고하세요. 빈 페이지가 열린다면 실제 주소와 네트워크 오류를 먼저 확인합니다. 어느 단계의 문제인지 좁힌 뒤 다른 브라우저 자동화 도구도 비교할 수 있습니다.

어떤 브라우저와 프로필이 열리나요?

0.0.84에서 브라우저나 채널을 지정하지 않으면 Chromium의 Chrome 채널이 선택됩니다. 실행할 브라우저, 창을 표시할지, 세션 상태를 보존할지는 각각 별개입니다. 창을 표시하면서 임시 상태를 쓰는 것도 가능합니다. Microsoft Playwright MCP 설정

목적실행 또는 연결 방식확인할 것
공개 페이지 테스트 재현헤드리스 및 격리새 세션의 URL과 제목
브라우저 동작을 보면서 확인창을 표시하는 격리 모드새 창과 대상 페이지
업무 로그인을 계속 사용승인된 영속 자동화 프로필프로필, 계정, 환경
열린 탭 조작명시적 확장 연결 또는 지원되는 연결대상 브라우저, 탭, 계정

서버 관리 프로필은 평소 쓰는 개인 프로필과 별개입니다. 격리 모드는 임시 상태를 씁니다. 같은 주소도 다른 세션에서는 로그인 화면으로 갈 수 있습니다. 브라우저 프로필, 작업 공간, 탭 그룹은 상태를 서로 다르게 관리합니다.

기존 탭이 필요하다면 설치한 버전의 Playwright 확장 프로그램 안내를 따르세요. 페이지 제목은 탭 확인에, 계정이나 작업 공간 이름은 접근 범위 확인에 쓰입니다. 기존 브라우저 연결 안내에서 읽기 작업으로 먼저 확인하는 방법을 볼 수 있습니다.

로그인한 탭이 필요한 경우

격리된 Playwright MCP는 QA, 공개 페이지 확인, 오류 재현에 적합합니다. 이미 열어 둔 업무 화면에서 시작한다면 탭 하나와 확인할 값 하나로 범위를 줄입니다. 데이터를 쓰기 전에 계정을 직접 확인하세요.

Tabbit 빠른 시작 안내에는 지원되는 코딩 에이전트를 Tabbit Browser에 연결하는 다른 방법이 있습니다. Codex와 Tabbit의 상품 등록 영상은 실제 상품 양식과 목록에서 결과를 다시 읽는 과정을 보여 줍니다. 이 사례는 Microsoft Playwright MCP와 별도의 연결을 사용합니다. Tabbit 시작 안내

먼저 격리된 공개 데모에서 URL, 제목, 도구 결과를 대조하세요. 모두 맞으면 내 테스트 환경에서 페이지 한 개를 열어 같은 방법으로 확인합니다. 기존 로그인 상태가 필요한 경우에는 그 목적에 맞는 연결을 선택합니다. 이렇게 확인 기준을 세우면 브라우저 자동화의 범위를 한 단계씩 늘릴 수 있습니다.

자주 묻는 질문

Codex CLI에 Playwright MCP를 어떻게 추가하나요?

검증한 구성은 codex mcp add playwright -- npx -y @playwright/mcp@0.0.84 --headless --isolated 명령으로 등록할 수 있습니다. Codex를 새로 시작한 뒤 /mcp로 도구를 확인합니다.

codex mcp list로 브라우저 실행까지 알 수 있나요?

이 명령은 Codex가 읽은 서버 항목을 보여 줍니다. 도구가 불러와졌는지와 실제 페이지가 열리는지는 따로 확인하세요.

Playwright MCP는 이미 열어 둔 Chrome 탭을 사용하나요?

기본 실행에서는 서버가 관리하는 브라우저 세션을 씁니다. 기존 탭을 사용하려면 연결 방법을 명시적으로 선택하고 대상 탭과 계정을 확인합니다.

headless와 isolated는 무엇이 다른가요?

headless는 브라우저 창을 표시할지 결정합니다. isolated는 세션에 별도의 임시 브라우저 상태를 사용합니다.

Playwright 확장 프로그램을 설치해야 하나요?

이 글의 헤드리스 격리 실행에는 로컬 MCP 서버가 필요하며 확장 프로그램은 필요하지 않습니다. 열려 있는 브라우저에 붙을 때는 호환되는 확장 프로그램과 승인 절차를 사용하세요.

다음 단계

Tabbit 과 함께 일하세요.

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