Playwright MCP - LLM을 위한 웹 브라우저 자동화용 MCP 서버

 (github.com/microsoft)
20P by GN⁺ | ★ favorite | 댓글 4개
  • Playwright를 기반으로 동작하는 MCP(Model Context Protocol) 서버
  • LLM이 웹 페이지와 상호작용할 수 있도록 구조화된 접근성 스냅샷을 제공하여 빠르고 가벼움
  • 스크린샷이나 비전 모델 없이 구조화된 텍스트 기반 데이터만으로 웹 자동화를 구현
  • 용도 : 웹 페이지 탐색 및 폼 자동 작성, 구조화된 콘텐츠에서의 데이터 추출, LLM 기반 자동화 테스트, 에이전트 기반 일반 웹 브라우저 제어

설치

  • config 
    {  
  "mcpServers": {  
    "playwright": {  
      "command": "npx",  
      "args": [  
        "@playwright/mcp@latest"  
      ]  
    }  
  }  
}
  • VSCode에 바로 설치 가능 : Install in VS Code Insiders
    • 설치 후, VSCode의 GitHub Copilot 에이전트에서 Playwright MCP를 사용할 수 있음

Snapshot Mode 도구 목록

  • browser_navigate: URL로 이동
  • browser_go_back / go_forward: 뒤로/앞으로 이동
  • browser_click / hover / drag: 요소 클릭, 호버, 드래그
  • browser_type: 입력란에 텍스트 입력 (옵션: submit)
  • browser_select_option: 드롭다운 선택
  • browser_press_key: 키보드 키 입력
  • browser_snapshot: 접근성 스냅샷 캡처
  • browser_save_as_pdf: 페이지를 PDF로 저장
  • browser_wait: 지정 시간 대기 (time은 최대 10초)
  • browser_close: 페이지 닫기

Vision Mode 도구 목록

  • browser_navigate / go_back / go_forward
  • browser_screenshot: 스크린샷 캡처
  • browser_move_mouse / click / drag: 좌표 기반 마우스 제어
  • browser_type: 좌표 위치에 텍스트 입력
  • browser_press_key
  • browser_save_as_pdf
  • browser_wait
  • browser_close
GeekNews Weekly에 포함된 글입니다. 에디터 코멘트 보기

함께 보면 좋은 글 β

yangeok   [-]

cursor에 playwright mcp 연결해봤는데, 나무위키 페이지는 아예 읽지 못하네요..

답변달기
asheswook   [-]

아마 봇 차단때문에 그런 것 같습니다.

답변달기
crawler   [-]

어제 봤을 땐 몰랐는데 마이크로소프트네요 ㄷㄷ 써봐야겠다

답변달기
GN⁺   [-]
Hacker News 의견

  • 이 도구는 매우 좋음. Claude Code와 함께 사용하여 큰 성공을 거두고 있음

    • CLAUDE.md에 Playwright로 변경 사항을 검증하라는 지시를 남겨둠
    • 자동으로 개발 서버를 시작하고, 변경된 페이지로 이동하여 변경 사항이 작동하는지 검증함
    • 예기치 않은 것이 있으면 스스로 수정함
    • 정말 뛰어난 중급 엔지니어와 함께 일하는 것 같음
    • 지금이 정말 놀라운 시대임

  • ariaSnapshot를 사용하여 DOM의 접근 가능한 표현을 제공함

    • 그러나 Gmail 같은 곳으로 이동하면 모델 컨텍스트가 빠르게 소진됨
    • 더 간결한 페이지의 텍스트 표현을 실험 중임
    • 자신의 크롬 세션을 사용하고 큰 컨텍스트 크기가 필요하지 않음
    • CDP에 사용할 수 있는 aria 인터페이스로 리팩토링할 수도 있음

  • JIRA MCP와 결합하여 버그 티켓의 "재현 단계"를 읽고 실제로 재현할 수 있는지 확인할 예정임

    • MCP에 대한 비판을 이해하지 못하겠음
    • "커넥터"의 캄브리아 폭발을 보는 것은 정말 흥미로움
    • 이는 OpenAI의 커스텀 GPTs가 되지 못했던 모델의 "앱 스토어"가 될 것임

  • Microsoft의 새로운 도구는 MCP-Playwright의 경쟁자로 보임

    • Microsoft의 도구가 더 간단해 보이며, 다른 도구는 더 많은 기능을 가짐

  • 훌륭한 릴리스임. 그러나 왜 원래의 Playwright API를 지원하지 않고 행동의 하위 집합만 지원하는지 궁금함

  • Playwright를 모르지만, Puppeteer와 어떻게 다른지 궁금함

    • Puppeteer의 문제는 쿠키 동의 배너 수락과 같은 간단한 작업을 완료하기 위한 올바른 자바스크립트를 즉시 얻지 못할 때가 있음

  • 여러 번 제출했으며 더 많은 이야기를 듣고 싶음

    • Fetch-MCP도 있으며, 이는 Playwright 기반으로 배치를 지원함. 비교해보면 흥미로울 것임

  • Capybara를 위한 MCP가 필요함. LLMs가 나의 Rails 시스템 테스트를 작성하고 작동하지 않을 때 디버그할 수 있도록

  • "code --add-mcp"

    • Vscode에 내장된 MCP 클라이언트가 있는지 궁금함

  • 이 도구는 테스트 자동화를 위한 것인지, 아니면 에이전트에서 "Operator"로 Playwright를 사용하는 것인지 궁금함

답변달기