목록 · 개발·코드

플레이라이트 MCPPlaywright MCP

클로드가 브라우저를 직접 열고 누르고 입력합니다. 화면 사진이 아니라 접근성 트리를 읽어 요소를 집으므로, 눈으로 보고 좌표를 찍는 방식보다 안정적입니다. 마이크로소프트가 직접 만들어 관리합니다.

바이브코딩·만들기 용도. 같은 목적의 다른 도구를 한 장에 모아 두었습니다.

도도리 AI연구소 · 최종 수정 2026년 10월 23일 · CC BY-NC 4.0

플레이라이트 MCP 설치하는 법

설정 파일에 세 줄을 넣으면 끝납니다. 터미널을 몰라도 됩니다.

1. 설정 파일을 엽니다.
   Windows%APPDATA%\Claude\claude_desktop_config.json복사

   macOS~/Library/Application Support/Claude/claude_desktop_config.json복사
   파일이 없으면 새로 만드십시오. 메모장이나 텍스트 편집기면 충분합니다.
2. 아래 내용을 붙여 넣고 저장합니다.

   {
     "mcpServers": {
       "playwright": {
         "command": "npx",
         "args": [
           "@playwright/mcp@latest"
         ]
       }
     }
   }

   전체 복사
   이미 mcpServers가 있다면 그 안쪽에 항목만 추가하십시오. 중괄호를 두 번 쓰면 오류가 납니다.
3. Claude 앱을 완전히 껐다가 다시 켭니다. 창만 닫으면 반영되지 않습니다. Windows는 작업 표시줄 아이콘에서 종료, macOS는 Cmd+Q로 완전히 끄십시오. 이 단계를 빠뜨려서 안 된다고 하는 경우가 가장 많습니다.

먼저 알아 둘 것

도구

기본 25개 (일부는 따로 켜야 나옴)

주요 기능

페이지 이동, 클릭, 양식 채우기, 화면 캡처, 콘솔·네트워크 보기, 자바스크립트 실행, 탭 다루기

확인

2026-09-20 직접 연결

이런 일을 시킵니다

만든 화면을 직접 확인시키기

고친 페이지를 열어 눌러 보게 하고, 어긋난 곳을 사진으로 받습니다.

로그인 뒤에만 보이는 화면 다루기

사람이 한 번 로그인해 두면 그 뒤 화면까지 이어서 조작합니다.

양식 한 번에 채우기

browser_fill_form 으로 입력칸 여러 개를 한 번에 채우고 보내기까지 시킵니다.

브라우저 오류 찾기

browser_console_messages 와 browser_network_requests 로 콘솔 오류와 실패한 요청을 받아 원인을 좁힙니다.

플레이라이트 MCP 20초 사용법 영상

영상 자막 전문

1. 설치: claude mcp add --scope user playwright -- npx @playwright/mcp@latest. Node.js 가 필요하고, 처음 띄울 때 브라우저를 내려받습니다.
2. 처음 시켜 볼 말: "브라우저로 https://worlddrop.app 열어서 제목이랑 화면 사진 보여줘"
3. 이런 일을 시킵니다: 페이지 이동·클릭·양식 채우기, 화면 갈무리, 콘솔·네트워크 확인.
4. 주의: 로그인된 화면에서는 결제·삭제처럼 되돌리기 어려운 일을 맡기기 전에 범위를 정하십시오.

플레이라이트(Playwright)는 무엇이고 MCP 와 어떻게 다릅니까

플레이라이트(Playwright)는 마이크로소프트가 만든 웹 앱 종단 간(E2E) 테스트 프레임워크입니다. 종단 간 테스트는 사용자가 화면에서 하는 동작을 처음부터 끝까지 흉내 내는 시험을 말합니다. 공식 문서는 크로미움(Chromium), 웹킷(WebKit), 파이어폭스(Firefox) 엔진을 지원하고, 창을 띄우지 않는 헤드리스 방식으로도 돈다고 적습니다.

플레이라이트 MCP 는 이 엔진을 클로드가 직접 부르게 만든 서버입니다. 사람이 테스트 코드를 쓰지 않아도 "이 페이지 열고 로그인 버튼 눌러 줘" 같은 말로 브라우저를 움직입니다. 저장소 README 는 화면 사진 대신 접근성 스냅숏(accessibility snapshot)을 읽기 때문에 시각 모델이 필요 없다고 적습니다.

playwright 설치: 테스트 도구와 MCP 는 명령이 다릅니다

'playwright 설치' 를 찾는다면 테스트 프로젝트와 MCP 서버 중 무엇이 필요한지부터 정하십시오. 테스트 프로젝트를 만드는 명령은 `npm init playwright@latest` 입니다. 이 명령은 TypeScript 와 JavaScript 중 하나, 테스트 폴더 이름, GitHub Actions 워크플로 추가 여부, 브라우저 설치 여부까지 네 가지를 묻습니다(playwright 공식 문서 intro, 2026-10-13 확인).

테스트 도구는 Node.js 22·24·26 계열을 요구하고, 운영체제는 Windows 11 이상, macOS 14 이상, Debian 12·13, Ubuntu 22.04·24.04·26.04 를 지원합니다. 브라우저만 따로 받을 때는 `npx playwright install`, 웹킷 하나만 받을 때는 `npx playwright install webkit` 을 씁니다. 플레이라이트 MCP 는 이와 별개이며, README 기준 Node.js 18 이상에서 `npx @playwright/mcp@latest` 하나로 실행됩니다.

로그인 상태와 브라우저 창을 다루는 옵션

플레이라이트 MCP 는 기본값으로 로그인 정보를 디스크의 프로필 폴더에 남깁니다. 프로필 위치는 macOS 가 ~/Library/Caches/ms-playwright/, 리눅스가 ~/.cache/ms-playwright/ 아래이고, 클라이언트 작업 폴더마다 따로 생깁니다. 프로필 하나는 브라우저 하나만 쓸 수 있으므로 클라이언트 여럿을 동시에 붙이면 `--isolated` 나 서로 다른 `--user-data-dir` 을 주십시오.

옵션은 설정 파일 args 목록의 `@playwright/mcp@latest` 뒤에 더합니다. `--browser` 는 chrome, firefox, webkit, msedge 가운데 하나를 고르고, `--headless` 를 주면 창 없이 돕니다. `--isolated` 와 `--storage-state=경로` 를 함께 주면 저장해 둔 쿠키로 시작하고, 브라우저를 닫을 때 그 세션의 상태를 버립니다(README, 2026-10-13 확인).

붙었는지 확인하기

설정을 마쳤으면 대화창에 이렇게 물어보십시오. 도구가 실제로 붙었으면 답이 돌아옵니다.

플레이라이트 MCP 안 될 때 확인할 것

브라우저를 실제로 띄웁니다

내 컴퓨터에서 도는 서버입니다. 처음 쓸 때 브라우저를 내려받으므로 시간이 걸리고, 원격 주소만 넣는 방식과 다릅니다.

열린 화면으로 무엇이든 할 수 있습니다

로그인된 상태로 붙이면 그 계정으로 누르고 보내는 일까지 됩니다. 결제나 삭제가 걸린 화면에서는 무엇을 시킬지 미리 정해 두십시오.

browser_evaluate 와 browser_run_code_unsafe 는 다릅니다

뒤엣것은 이름 그대로 안전장치가 없는 실행입니다. 모르는 페이지에서 쓰지 마십시오.

도구 수는 설정에 따라 달라집니다

25개는 옵션 없이 띄운 기본값입니다. 기능을 켜면 늘어납니다.

언제 쓰고, 언제 안 쓰나

만든 화면을 클로드가 직접 열어 확인하게 하고 싶을 때 씁니다. 크롬 개발자도구만 필요하면 더 가벼운 길이 따로 있습니다.

비슷한 것 중에 왜 이걸

chrome-devtools-mcp 와 정면으로 겹칩니다. 갈림길은 이렇습니다. 크롬 개발자도구 MCP 는 이미 열려 있는 크롬에 붙어 성능·네트워크·콘솔을 들여다보는 데 강합니다. 이것은 브라우저를 스스로 띄워 누르고 입력하는 데 강하고, 접근성 트리로 요소를 집어 화면이 조금 바뀌어도 잘 버팁니다. 보기만 할 것이면 크롬 개발자도구, 조작까지 시킬 것이면 이쪽입니다. 같은 이름의 playwright 플러그인은 시험 코드를 짜 주는 쪽이라 하는 일이 다릅니다.

자주 묻는 것

플레이라이트 MCP(Playwright) 는 어떻게 설치합니까?

주소가 아니라 명령으로 도는 서버입니다. 클로드 코드에서는 claude mcp add --scope user playwright -- npx @playwright/mcp@latest 로 넣습니다. 클로드 데스크톱이라면 설정 파일의 mcpServers 에 command 를 npx, args 를 ["@playwright/mcp@latest"] 로 적으십시오. 2026-09-20 직접 실행해 확인했습니다.

플레이라이트 MCP(Playwright) 에 도구가 몇 개 들어 있습니까?

아무 옵션 없이 띄우면 25개입니다. 2026-09-20에 확인했습니다. 페이지 이동, 누르기, 양식 채우기, 화면 갈무리, 콘솔 메시지, 네트워크 요청, 자바스크립트 실행, 탭 다루기가 들어 있습니다. 저장소 문서에는 더 많은 이름이 나오는데 일부는 따로 켜야 나옵니다.

플레이라이트 MCP(Playwright) 연결이 안 될 때는 무엇을 봅니까?

내 컴퓨터에서 도는 서버라 node 가 PATH 에 있어야 합니다. 처음 띄울 때 브라우저를 내려받으므로 시간이 걸리고, 그동안 응답이 없는 것처럼 보입니다. 회사망에서 막히면 내려받기가 실패하니 프록시 설정을 확인하십시오.

플레이라이트 MCP(Playwright) 와 크롬 개발자도구 MCP 중 무엇을 씁니까?

보기만 할 것이면 크롬 개발자도구 MCP 가 가볍습니다. 이미 열려 있는 크롬에 붙어 성능·네트워크·콘솔을 들여다봅니다. 누르고 입력하는 조작까지 시킬 것이면 이쪽입니다. 접근성 트리로 요소를 집어 화면이 조금 바뀌어도 잘 버팁니다.

플레이라이트 MCP(Playwright) 는 요금이 듭니까?

마이크로소프트가 오픈소스로 내놓았고 커넥터 자체에 요금이 붙지 않습니다. 내 컴퓨터에서 도는 서버라 외부 계정도 필요 없습니다. 자세한 것은 https://github.com/microsoft/playwright-mcp 에서 확인하십시오.

클로드에서 플레이라이트 MCP 를 쓰면 로그인 상태가 유지됩니까?

기본 설정이면 유지됩니다. 플레이라이트 MCP 는 로그인 정보를 작업 폴더별 프로필에 남기고 다음 세션에서 다시 씁니다. 매번 빈 상태로 시작하려면 args 에 --isolated 를 더하십시오(저장소 README, 2026-10-13 확인).

플레이라이트 MCP 를 브라우저 창 없이 돌릴 수 있습니까?

됩니다. 설정의 args 목록 끝에 --headless 를 더하면 창을 띄우지 않습니다. 기본값은 창을 띄우는 방식이라, 옵션이 없으면 클로드가 누르는 화면을 눈으로 볼 수 있습니다(저장소 README, 2026-10-13 확인).

플레이라이트 CLI 와 플레이라이트 MCP 는 무엇이 다릅니까?

둘 다 마이크로소프트가 만든 브라우저 자동화 도구이고 클로드와 잇는 방식이 다릅니다. README 는 CLI 가 큰 도구 정의와 접근성 트리를 대화에 싣지 않아 토큰을 덜 쓰고, MCP 는 브라우저 상태를 이어 가며 페이지 구조를 거듭 살피는 작업에 맞는다고 적습니다. CLI 는 npm install -g @playwright/cli@latest 로 설치하고 playwright-cli install --skills 로 스킬을 더합니다(2026-10-13 확인).

개발·코드 도구를 고를 때

코드 생성·리팩터링·리뷰를 돕는 도구입니다. 사내 코드가 외부 서버로 전송되는 구조인지, 무료 요금제의 컨텍스트 길이 제한이 어디까지인지 확인하세요.

공식 사이트에서 계정 만들기

제휴 관계가 없는 일반 링크입니다.

별점과 댓글

이 MCP 서버를 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다.

함께 보면 좋은 도구

클로드 코드에서 쓰실 것이라면 플러그인 쪽입니다. 명령과 스킬이 묶음으로 들어옵니다. 플레이라이트 플러그인

어느 단계에 무엇을 붙일지 모르겠다면 콘텐츠 제작 단계별 MCP 120종을 보십시오. 기획부터 성과 확인까지 여덟 단계로 갈라 두었습니다.