Claude Code에서 Playwright MCP 설정하고 확인하기

claude mcp add를 실행하기 전에 서버를 어느 프로젝트에서 쓸지 정하세요. 현재 프로젝트에서 혼자 테스트하려면 local, 검토한 설정을 팀과 공유하려면 project, 여러 프로젝트에서 개인적으로 사용하려면 user를 선택합니다. 등록한 뒤 연결을 확인하고 브라우저에서 검증할 수 있는 결과를 받습니다.

Reddit의 한 사용자는 --isolated를 Claude 옵션으로 넣었다가 알 수 없는 옵션이라는 오류를 봤습니다. 이 인수는 구분자 뒤에 두고 Playwright에 전달해야 합니다. 후반에는 로그인된 탭이 필요한 경우를 Tabbit Browser로 설명합니다. 토론 원문

먼저 확인할 점

• 프로젝트 루트에서 시작합니다. Local과 project는 모두 프로젝트에 관련되지만 저장 위치와 공유 범위가 다릅니다.

• --scope와 --transport는 -- 앞에 씁니다. --headless와 --isolated는 서버 명령 뒤에 둡니다.

• 설정 항목이 있어도 실행 파일이 시작되지 않을 수 있습니다. claude mcp list와 세션의 도구를 모두 확인합니다.

• 공개 테스트 페이지를 열어 도구 응답의 값을 직접 대조합니다.

• 처음에는 필요한 범위를 작게 잡고 임시 브라우저 세션을 사용합니다.

설정 범위 고르기

기본 범위는 local이며 현재 프로젝트에만 적용됩니다. 이름이 같으면 local, project, user 순서로 먼저 적용됩니다. 수정한 명령과 표시된 명령이 다르면 우선순위가 높은 곳에 같은 이름이 있는지 확인합니다. Claude Code MCP 설정 범위

같은 Playwright MCP 서버를 여러 클라이언트에 연결할 수 있습니다. 바깥의 설정 형식은 클라이언트마다 다릅니다. Codex Playwright MCP 안내는 TOML을 사용합니다. Claude Code의 프로젝트 파일은 JSON입니다.

개인용 서버 등록하기

Claude Code와 npx가 같은 터미널에서 실행되는지 확인하세요. Playwright 시작 문서는 Node.js 20 이상을 요구합니다. 아래 예시는 검증한 패키지 버전을 고정하고 브라우저를 창 없이 임시 상태로 실행합니다. Playwright MCP 설치 안내

claude --version
node --version
claude mcp add --scope local --transport stdio playwright -- npx -y @playwright/mcp@0.0.84 --headless --isolated
claude mcp list

Claude는 -- 왼쪽 옵션을 해석합니다. 오른쪽의 명령과 인수는 서버를 실행하는 데 쓰입니다. unknown option '--headless'가 나오면 먼저 옵션이 구분자의 어느 쪽에 있는지 봅니다. Headless는 창 표시를, isolated는 임시 브라우저 상태를 결정합니다. Anthropic의 stdio 구문

팀이 같은 실행 명령을 쓰는 경우

프로젝트 루트의 .mcp.json에 같은 항목을 작성하거나 등록할 때 --scope project를 선택합니다. 팀원은 실행 파일과 인수를 확인하고 Claude Code에서 프로젝트 서버를 승인할 수 있습니다. 공유 파일에는 비밀 값과 개인 경로를 넣지 않습니다. Claude Code MCP 빠른 시작

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--headless", "--isolated"]
    }
  }
}

이 파일은 서버를 실행하는 방법을 정합니다. 사이트 계정과 권한은 브라우저 세션과 조직 정책에 따릅니다. 로그인해야 하는 테스트 사이트에는 허용된 테스트 프로필을 따로 마련합니다. 브라우저 프로필과 작업 공간 안내는 상태가 어느 범위에서 유지되는지 설명합니다.

공개 페이지로 연결 확인하기

설정을 넣은 프로젝트에서 새 Claude Code 세션을 엽니다. /mcp에서 Playwright를 찾습니다. 도구 이름을 요청에 적어 터미널이나 웹 검색 대신 확인할 MCP 연결을 쓰게 합니다.

Playwright MCP로 다음 페이지를 열어 주세요.
https://www.selenium.dev/selenium/web/web-form.html
도구 결과의 최종 URL과 화면에서 처음 보이는 제목을 알려 주세요.
필드에 입력하거나 제출하지 말고 읽은 뒤 멈춰 주세요.

기대하는 제목은 Web form입니다. 탐색 도구가 저장된 스냅샷 경로만 보여 주면 browser_snapshot으로 제목을 확인합니다. 클릭을 맡기기 전에 도구 기록과 주소, 화면 제목을 대조합니다. 에이전트형 브라우저 안내는 이런 관찰 결과가 다음 동작을 정하는 데 어떻게 쓰이는지 설명합니다.

검증 환경은 Claude Code 2.1.318, Node.js 22, Playwright MCP 0.0.84였습니다. 임시 프로젝트에서 Claude Code로 설정 범위와 연결을 확인했습니다. 별도 프로토콜 검사는 등록된 명령으로 서버를 실행하고 browser_navigate와 browser_snapshot을 찾아 Web form을 읽었습니다. 양식을 제출하거나 Claude 모델 응답을 실행하지 않았습니다.

프로젝트 안에서는 local 항목이 연결됐고 project 항목은 승인 대기 상태였습니다. 다른 디렉터리에서는 user 항목만 나타났습니다.

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

테스트에서는 존재하지 않는 실행 파일로 서버를 하나 더 등록했습니다. 항목은 생겼지만 연결 검사가 실패했습니다. --headless를 Claude 옵션 쪽에 두었을 때는 브라우저가 실행되기 전에 명령이 거부됐습니다. 첫 증상은 실행 파일을, 두 번째는 인수 위치를 확인하면 됩니다.

한 사용자는 claude mcp list에는 서버가 연결됐다고 표시되는데 현재 세션의 /mcp에는 나오지 않는 경우가 있었다고 했습니다. 설정을 다시 바꾸기 전에 두 결과를 대조합니다. 토론 원문

Claude Code의 도구 검색은 필요할 때 MCP 도구 정의를 불러올 수 있습니다. 새 세션에서 읽기 작업을 지정하고 기록에서 정확한 도구 이름을 봅니다. 정책이 막는다면 서버를 바꾸기 전에 어떤 권한이 필요한지 확인합니다. 다른 기능이 필요해진 경우에는 브라우저 자동화 도구를 비교할 수 있습니다. Anthropic 도구 검색 문서

이미 로그인한 탭이 필요한 경우

격리 모드는 공개 페이지 동작을 반복해서 확인하기에 적합합니다. 이미 로그인한 대시보드를 써야 한다면 공유할 탭, 계정, 작업 공간을 정합니다. 데이터를 쓰기 전에 읽기 작업으로 제목과 계정을 확인하세요. 기존 브라우저 연결 안내에 확인 순서가 나와 있습니다.

Tabbit Browser에는 Claude Code를 포함한 호환 에이전트의 다른 연결 방법이 있습니다. 원하는 탭이 이미 Tabbit에 열려 있을 때 적용할 수 있습니다. 판매자 상품 양식 영상은 다른 코딩 에이전트로 실제 목록에서 기록을 다시 확인하는 과정을 보여 줍니다. Tabbit 빠른 시작

처음에는 local과 공개 페이지로 시험합니다. 팀이 함께 사용하려면 검토 후 project로 바꾸고 여러 프로젝트에서 쓰려면 user를 선택합니다. 기존 로그인 상태가 필요하면 승인된 브라우저 연결을 사용합니다. 작은 브라우저 자동화부터 결과를 확인할 수 있게 진행하세요.

Secholar.L

Tabbit 그로스 & 콘텐츠

Secholar.L은 AI 브라우저와 에이전트 워크플로우에 대한 실용적인 가이드를 작성하며, 실제 조사와 검증 가능한 출처를 바탕으로 도구를 비교합니다.