Claude Desktop
    ↓ MCP 설정
npx로 @playwright/mcp 실행
    ↓
Microsoft Playwright MCP 서버
    ↓
Edge/Chrome 브라우저 자동 조작

📑 목차

1-1. 설치 여부 확인

1-2. Claude Desktop 업데이트

2-1. Node.js 다운로드

2-2. 설치 진행

# 설치 순서 (모두 기본값 유지)
1. 다운로드한 .msi 파일 더블클릭
2. Next 클릭 → License 동의 체크
3. 설치 경로 기본값 유지
4. Node.js runtime / npm package manager / Add to PATH ✓
5. Install 클릭 → 권한 요청 시 Yes
6. Finish 클릭

4-0. PowerShell 실행 정책 사전 확인 (필수)

PS> npx -y @playwright/mcp@latest --help
npx : 이 시스템에서 스크립트를 실행할 수 없으므로
      C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다.
      자세한 내용은 about_Execution_Policies를 참조하십시오.
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

현재 정책 확인

PS> Get-ExecutionPolicy -List

# 출력 예시 (변경 전 — 문제 상황)
        Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser       Undefined  ← 여기를 RemoteSigned로 변경할 것
 LocalMachine      Restricted  ← 기본값. 시스템 정책은 그대로 둠

정책 변경 (관리자 권한 불필요)

# 현재 사용자에게만 RemoteSigned 적용 (시스템 전체 영향 없음)
PS> Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

# 확인 프롬프트가 나오면 Y 또는 A 입력 후 Enter
실행 규칙 변경
실행 정책은 신뢰하지 않는 스크립트로부터 사용자를 보호합니다...
계속하시겠습니까?
[Y] 예(Y)  [A] 모두 예(A)  [N] 아니요(N)  [L] 모두 아니요(L)  [S] 일시 중단(S)
[?] 도움말 (기본값은 "N"): Y

변경 결과 확인

PS> Get-ExecutionPolicy -List

        Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser     RemoteSigned  ← ✅ 변경 완료
 LocalMachine       Restricted

4-1. node / npm / npx 버전 확인

PS> node --version
# 출력 예시 → v24.15.0  (v18 이상이면 OK)

PS> npm --version
# 출력 예시 → 11.6.2

PS> npx --version
# 출력 예시 → 11.6.2

4-2. 실행 파일 경로 확인

PS> where.exe node
PS> where.exe npm
PS> where.exe npx

# 정상 출력 예시
C:\Program Files\nodejs\node.exe
C:\Program Files\nodejs\npm
C:\Program Files\nodejs\npm.cmd
C:\Program Files\nodejs\npx
C:\Program Files\nodejs\npx.cmd

PS> npx -y @playwright/mcp@latest --help

방법 A. Claude Desktop UI에서 열기 (권장)

# Claude Desktop UI 메뉴 경로
Claude Desktop 실행
  → Settings
  → Developer
  → Edit Config  ← 클릭하면 설정 파일이 열림

방법 B. PowerShell에서 직접 열기

PS> notepad "$env:APPDATA\Claude\claude_desktop_config.json"

PS> New-Item -ItemType Directory -Force "$env:APPDATA\Claude" | Out-Null

PS> if (!(Test-Path "$env:APPDATA\Claude\claude_desktop_config.json")) {
        '{}' | Set-Content -Encoding UTF8 "$env:APPDATA\Claude\claude_desktop_config.json"
      }

PS> notepad "$env:APPDATA\Claude\claude_desktop_config.json"

# 설정 파일 경로를 변수에 저장
PS> $cfg = "$env:APPDATA\Claude\claude_desktop_config.json"

# 타임스탬프를 붙여 백업본 생성
PS> Copy-Item $cfg "$cfg.bak-$(Get-Date -Format yyyyMMdd-HHmmss)"

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--browser=msedge"
      ]
    }
  }
}

각 옵션의 의미

기존 파일이 이런 모습이라면

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\JJ\\Downloads"
      ]
    }
  }
}

이렇게 병합합니다

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\JJ\\Downloads"
      ]
    },  ← 쉼표 추가 필수
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--browser=msedge"
      ]
    }
  }
}

PS> node -e "const fs=require('fs'); const p=process.env.APPDATA + '/Claude/claude_desktop_config.json'; JSON.parse(fs.readFileSync(p,'utf8')); console.log('JSON OK:', p)"

# 정상 출력
JSON OK: C:\Users\...\AppData\Roaming\Claude\claude_desktop_config.json

완전 종료 방법 두 가지

# Claude Desktop 입력창에 그대로 붙여넣기
Use Playwright to navigate to https://demo.playwright.dev/todomvc
and add a todo item named "JJ MCP test".

정상이라면 다음과 같이 동작합니다

로그인 페이지 확인

Use Playwright to open http://localhost:8080/wp-admin
and tell me whether the WordPress login page is visible.

관리자 메뉴 확인

Use Playwright to open http://localhost:8080/wp-admin,
wait for the WordPress admin page,
then navigate to the admin menu
and describe what you see.

14-1. node가 인식되지 않을 때

# 에러 메시지 예시
'node' is not recognized as an internal or external command

14-2. npx가 인식되지 않을 때

PS> where.exe npx
# 아무것도 출력되지 않으면 Node.js 재설치 필요

14-3. Claude Desktop에 Playwright가 안 보일 때

# 1. 환경 검증
PS> node --version
PS> npm --version
PS> npx --version

# 2. Playwright MCP 직접 실행
PS> npx -y @playwright/mcp@latest --help

# 3. JSON 문법 검증
PS> node -e "JSON.parse(require('fs').readFileSync(process.env.APPDATA+'/Claude/claude_desktop_config.json','utf8')); console.log('OK')"

# 4. Claude Desktop 완전 종료 후 재시작

14-4. 로그 확인

# 로그 폴더 내용 확인
PS> Get-ChildItem "$env:APPDATA\Claude\logs"

# 최근 MCP 로그 5개
PS> Get-ChildItem "$env:APPDATA\Claude\logs\mcp*.log" | Sort-Object LastWriteTime -Descending | Select-Object -First 5

# 가장 최근 로그의 끝 80줄
PS> Get-Content "$env:APPDATA\Claude\logs\mcp.log" -Tail 80

14-5. PowerShell 실행 정책 에러 (PSSecurityException / UnauthorizedAccess)

# 에러 메시지
npx : 이 시스템에서 스크립트를 실행할 수 없으므로
      C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다.
    + FullyQualifiedErrorId : UnauthorizedAccess

# 즉시 해결 — 한 줄로 끝
PS> Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

# 확인 프롬프트에 Y 입력 후 Enter
[Y] 예(Y)  [A] 모두 예(A)  ...  [?] 도움말 (기본값은 "N"): Y

# 다시 시도
PS> npx -y @playwright/mcp@latest --help
# → 정상 실행

옵션 1. 기본 추천 — 브라우저가 보이는 모드

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--browser=msedge"
      ]
    }
  }
}

옵션 2. 격리 모드 — 매번 깨끗한 세션

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--browser=msedge",
        "--isolated"
      ]
    }
  }
}

옵션 3. Headless 모드 — 브라우저 창 없이 실행

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--browser=msedge",
        "--headless"
      ]
    }
  }
}

JJ 환경에서 안전하게 운용하는 5가지 원칙

📋 최종 실행 순서 요약