MCP Playwright: 브라우저 자동화 작업을 제공하는 MCP 서비스

일반 소개

MCP-Playwright는 ExecuteAutomation에서 개발하여 GitHub에서 호스팅하는 오픈 소스 툴입니다. 이 도구는 Playwright와 모델 컨텍스트 프로토콜 (MCP) 프로토콜로, 사용자가 자연어 명령을 통해 브라우저 자동화 및 API 테스트를 구현할 수 있도록 하는 것을 목표로 합니다. 이 도구는 개발자와 테스터 모두에게 적합하며 다음을 연결할 수 있습니다. Claude 및 기타 대형 언어 모델(LLM)을 사용하여 웹 페이지 열기, 버튼 클릭, 양식 작성, 스크린샷 찍기, 간단한 텍스트를 통한 API 요청 전송 등의 브라우저 작업을 제어할 수 있습니다. 사용자가 복잡한 코드를 작성할 필요가 없으므로 사용의 문턱이 낮아집니다. 이 프로젝트는 현재 개발 단계에 있으며 기능이 점진적으로 개선되고 있으며 커뮤니티의 코드 기여를 환영합니다.

기능 목록

• 브라우저 자동화특정 웹 페이지로 이동, 요소 클릭, 입력 상자 채우기, 드롭다운 옵션 선택 등을 지원합니다.
• API 테스트GET, POST, PUT, PATCH, DELETE 요청을 보내고 응답을 검사할 수 있습니다.
• 스크린샷 기능전체 웹 페이지 또는 특정 영역을 가로채서 이미지로 저장할 수 있습니다.
• 자바스크립트 실행브라우저에서 사용자 지정 자바스크립트 코드를 실행하는 기능입니다.
• 콘솔 로그 가져오기: 브라우저에서 오류, 경고 또는 디버깅 정보를 추출합니다.
• 자연어 제어MCP 프로토콜을 통해 Claude와 같은 모델에 연결하고 텍스트 명령으로 작동합니다.

도움말 사용

MCP-Playwright를 사용하려면 간단한 설치와 구성이 필요합니다. 다음은 빠르게 시작하는 데 도움이 되는 자세한 단계입니다.

설치 프로세스

이 도구를 실행하려면 환경을 준비하고 관련 구성 요소를 설치해야 합니다. 다음은 이를 수행하는 방법에 대한 자세한 내용입니다:

1. 환경 확인
   • 컴퓨터에 Node.js가 설치되어 있는지 확인합니다(안정적인 최신 버전 권장).
   • Claude 데스크톱 클라이언트와 같은 MCP 지원 클라이언트가 필요합니다.
   • 코드 다운로드를 위해 Git을 설치합니다(선택 사항).
2. 프로젝트 다운로드(수동 설치 옵션)
   • 터미널을 열고 실행합니다:

     git clone https://github.com/executeautomation/mcp-playwright.git
     

   • 프로젝트 카탈로그로 이동합니다:

     cd mcp-playwright
     

3. 종속성 설치
   • 프로젝트 디렉토리에서 실행합니다:

     npm install
     

   • 그러면 Playwright 및 기타 필요한 구성 요소가 설치됩니다.
4. npm을 통해 직접 설치(권장)
   • 수동으로 다운로드하고 싶지 않다면 그냥 실행하면 됩니다:

     npm install -g @executeautomation/playwright-mcp-server
     

   • 이렇게 하면 서버가 전역적으로 설치됩니다.
5. 스미서리를 통한 설치(클로드 데스크톱용)
   • 다음 명령을 실행하면 자동으로 설치 및 구성됩니다:

     npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude
     

6. Claude 데스크톱 구성
   • 클로드 데스크톱의 구성 파일을 찾습니다(일반적으로 사용자 디렉터리의 클로드 폴더에 있는 파일명 claude-desktop-config.json).
   • 다음을 추가합니다:

     {
     "mcpServers": {
     "playwright": {
     "command": "npx",
     "args": ["-y", "@executeautomation/playwright-mcp-server"]
     }
     }
     }
     

   • Claude Desktop을 저장하고 다시 시작하면 인터페이스에 "MCP에서 연결" 버튼이 나타나 구성이 성공했음을 나타냅니다.

사용 방법

설치가 완료되면 자연어 명령을 사용하여 브라우저를 제어하거나 API를 테스트할 수 있습니다. 자세한 방법은 다음과 같습니다.

브라우저 자동화

• 웹 페이지 열기
  클로드 데스크톱에서 입력합니다:

打开网页 https://example.com

도구가 브라우저를 실행하고 페이지를 로드합니다.

• 요소 클릭
  입력:

点击页面上的登录按钮，使用选择器 #loginBtn

ID를 찾습니다. loginBtn 버튼을 클릭합니다.

• 양식 작성하기
  입력:

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "123456"，使用选择器 #password

이 도구는 자동으로 콘텐츠를 채웁니다.

• 스크린샷(컴퓨팅)
  입력:

截取整个网页，保存为 "page.png"

스크린샷은 현재 디렉터리에 저장됩니다.

• 자바스크립트 실행
  입력:

在浏览器中执行 JavaScript 代码 "document.title"

페이지 제목을 반환합니다.

• 로그 가져오기
  입력:

获取浏览器控制台日志，只显示错误信息

이 도구는 오류 로그를 반환합니다.

API 테스트

• GET 요청 보내기
  입력:

对 https://api.example.com/data 发送 GET 请求

상태 코드와 데이터를 반환합니다.

• POST 요청 보내기
  입력:

对 https://api.example.com/users 发送 POST 请求，数据为 {"name": "TestUser"}
检查响应中包含 "id"

이 도구는 결과를 검증합니다.

• 업데이트된 데이터
  입력:

对 https://api.example.com/users/1 发送 PUT 请求，数据为 {"name": "NewUser"}

데이터가 업데이트됩니다.

운영 예제

로그인 프로세스를 테스트하고 싶다고 가정해 보겠습니다:

1. 입력:

打开网页 http://eaapp.somee.com

2. 입력:

点击页面上的登录链接，使用选择器 #loginLink

3. 입력:

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "password"，使用选择器 #password
点击登录按钮，使用选择器 #loginBtn

4. 입력:

截取整个网页，保存为 "login_result.png"

5. 입력:

关闭浏览器

전체 프로세스는 자연어를 통해 이루어지며 간단하고 직관적입니다.

테스트 도구

이 프로젝트는 테스트에 Jest를 사용합니다. 기능을 확인하려는 경우 테스트를 실행할 수 있습니다:

• 터미널에 입력합니다:

npm test

• 밴드 커버리지 보고서:

  npm run test:coverage
  

테스트 보고서는 coverage 카탈로그.

주의

• 복잡한 인증 요청(예: OAuth)은 현재 도구에서 지원되지 않습니다.
• 문제가 발생하면 공식 문서(https://executeautomation.github.io/mcp-playwright/)를 확인하세요.
• 이 프로젝트는 오픈 소스이므로 포크하고 개선을 위한 제안을 제출할 수 있습니다.