MCP 4편 : Playwright MCP Server로 웹 자동화 테스트

저번에 이어 claude 에서 MCP(Model Context Protocol)를 이용해서 Playwright를 이용해서 웹 테스트을 해 보겠습니다.

우선 저번 글을 읽지 않았다면 MCP 1편 : MCP 개념과 준비할 것들 과 MCP 2편 : Claude 와의 만남 , MCP 3편 : Claude에 실시간 검색 장착 하기(feat: Brave API) 를 먼저 보시고 오시기 바랍니다.

 

또한 저는 claude 유료 플랜에서 작성하는 글이며, 무료 플랜에서는 기능적인 제약이 있을수 있습니다.

그리고, 윈도우즈에서 설치 및 실행하는 결과입니다.

(밑에서는 존칭 및 경어체를 사용하지 않으니, 양해해 주시기 바랍니다.)

---

Playwright 란?

Playwright는 마이크로소프트(Microsoft)에서 만든 오픈소스 웹 자동화 테스트 도구다. 주로 웹 애플리케이션을 테스트하거나 자동화 작업을 수행할 때 사용된다.

즉, 페이지 탐색, 클릭, 입력, 스크린샷, 웹 스크래핑, 다운로드, 업로드 등 다양한 사용자 동작을 시뮬레이션해 볼 수있다.

보다 자세한 것은 공식 사이트를 참조하자. https://playwright.dev/docs/intro

Installation | Playwright

 

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch(); // 브라우저 실행
  const page = await browser.newPage();    // 새 페이지 생성
  await page.goto('https://kansm.tistory.com/');  // URL 이동
  await page.screenshot({ path: 'kansm.png' }); // 스크린샷 저장
  await browser.close(); // 브라우저 종료
})();

이 코드는 node.js에서 해당 사이트 접속해 스크린샷을 찍는 코드이다. 이렇게 코드를 작성해야 하는 것을 MCP를 이용하면 한줄의 명령어로 실행이 되게 되는 것이다.

 

자주는 사용하지 않으나, 시나리오를 구성해 두면 반복적인 확인이나 체킹할때는 많이 유용한 툴로, 점점 많이 사용하고 있는 패키지이다. 특히 API를 체킹할때 좋다고 생각한다.

 

 

Playwright MCP Server 추가

https://www.npmjs.com/package/@executeautomation/playwright-mcp-server

@executeautomation/playwright-mcp-server

이곳에서 json 코드를 추가하면 된다. 이전 글을 보았다면.. playwright {...} 만 추가하면 된다는 것을 알 수 있을 것이다.

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

 

이것을 C:\Users\사용자명\AppData\Roaming\Claude\claude_desktop_config.json 에 추가해 주면 된다.

playwright {...} 만 추가하면 되며, 서버별 콤마 추가하는 것을 주의하자. json 오류는 ai에다 질문해서 구문 체크해 달라고 하면 쉽게 해결할 수 있다. (보다 자세한 것은 이전 글을 보면 된다.)

아.. 그리고 스크린샷 디렉토리를 변경해 보고자 했으나 실패했다. 인자 값을 지정해 줘도 인지를 못하고 있음..

(알고 계시는 분을 좀 알려주세요.. ^^)

 

세팅후 claude desktop을 실행해서 오류가 발생하면, cmd나 파워셀에다가 직접 설치를 하자.

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

-g 는 전역으로 사용한다는 것인데, 전역이 아니면 오류가 발생하는 거 같다. (이는 정확치 않음)

 

 

웹 자동화 테스트하기

설치를 하면 30여개의 tool이 추가될것이다. playwright의 기능이 다 들어가 있다 보니 그렇다.

 

 

이것은 네이버에서 검색해서 결과값을 출력하고 그것을 스샷으로 찍은 것이다.

스크린샷은 윈도우에서는 기본적으로 Downloads에 저장이 된다.

 

이것을 코드로 구성해 보면..

const { chromium } = require('playwright');

(async () => {
  // 브라우저를 헤드리스 모드가 아닌 상태로 실행 (UI를 확인하려면 headless: false)
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  
  // 네이버 홈페이지로 이동
  await page.goto('https://www.naver.com');
  
  // 검색 입력창이 로드될 때까지 대기 (네이버 검색창은 name 속성이 "query")
  await page.waitForSelector('input[name="query"]');
  
  // 검색어 "MCP(Model Context Protocol)"를 입력
  await page.fill('input[name="query"]', 'MCP(Model Context Protocol)');
  
  // 엔터키를 눌러 검색 실행 (또는 검색 버튼 클릭도 가능)
  await page.keyboard.press('Enter');
  
  // 검색 결과 페이지로 이동할 때까지 대기
  await page.waitForNavigation();
  
  // 검색 결과 페이지 스크린샷 저장 (파일명: naver-search.png)
  await page.screenshot({ path: 'naver-search.png' });
  
  // 결과를 확인할 수 있도록 잠시 대기 (필요에 따라 조정)
  await page.waitForTimeout(5000);
  
  // 브라우저 종료
  await browser.close();
})();

 

이것을 "네이버로 이동해서 MCP(Model Context Protocol) 로 검색해줘" 이 문장으로 해결을 한 것이다.

selector로 알아서 잡아주고(모르면 웹페이지 분석해서 selector를 찾아야 한다. 네이버는 유명해서 selector가 대중적이라서 쉽게 잡은 것인데, 일반 사이트는 selector를 찾아달라고 하거나 해야 한다.) 스샷도 알아서 저장해 주니.. 이 얼마나 편한가...

 

playwright에서 로그인 테스트는 필수라고 생각하는데.. 클라우드 AI다 보니, 개인정보로 인해 로그인 테스트는 거부를 하고 있다.

cursor나 vscode에서 실행시에는 로그인이 정상적으로 되는 거 같으니, 이 부분은 참조하자.

 

개발자 입장에서 일반 간단한 코드는 작성하는게 큰 문제는 아니지만, 이걸 돌리기 위해서 환경 구성하는게 더 손이 간다.
node와 playwright가 설치된 상태라면 큰 문제가 없지만.. 없는 상태라서 이 코드를 돌리기 위한 구성을 하는게 은근 손이 많이 간다. 이것을 할 필요도 없고, 심지어 코드도 구성할 필요가 없게 되는 것이다. 와우~~

 

 

1. 세부기능을 좀 더 알아보자..

웹 페이지 자동 탐색(원하는 웹사이트로 이동하고 상호작용), 데이터 추출(페이지의 텍스트나 HTML 구조 추출), 스크린샷 촬영(전체 페이지 또는 특정 요소의 스크린샷 촬영), 폼 조작(검색창에 입력하고 버튼 클릭), JavaScript 코드 실행(페이지에서 직접 JS 실행), 브라우저 히스토리 조작(뒤로가기, 앞으로가기 기능), 콘솔 로그 및 네트워크 모니터링(페이지의 에러 및 로그 확인), 웹 페이지 스크랩핑(웹 페이지에서 데이타를 추출) 이 가능하다.

 

아래는 claude한테 유용한 기능을 사용해 보라고 하니, 알아서 tools을 실행하는 예시이다.

 

 

2. API 테스트

이제 API 테스트를 한번 해 보자.

backend쪽에 API를 구축해 보면, 예상치 못한 값이나 상황으로 오류가 발생하는 경우가 종종 있다.

테스팅을 한다고 하지만, 생각지 못한 부분에서 발생하기도 한데, 이럴때 playwright를 이용하면 휠씬 쉽게 관리가 가능하다.

근데, 많이 번거로워서 솔직히 사용하기 많이 힘든데, 이제는 조금 더 하게 테스팅이 가능할거 같다.

JSONPlaceholder(https://jsonplaceholder.typicode.com/) 사이트를 이용해서 테스트 해 볼 것이다.

 

JSONPlaceholder 란?

JSONPlaceholder는 개발자들을 위한 무료 온라인 REST API 서비스 하는 곳으로, 프로토타이핑용 가짜 API를 제공한다.
POST, PUT, PATCH, DELETE 요청은 실제로 서버에 저장되지 않고 응답만 시뮬레이션 하지만 응답 형식은 실제 API와 동일하기 때문에 개발 및 테스트 용도로 매우 유용이다. 

 

 

일반적으로 api를 테스트 할때 이처럼 postman이나 툴을 이용해서 이처럼 get, post로 전송해서 response를 확인하게 되게 된다. 

이것을 MCP를 사용하면 간단히 "POST로 테스트해 줘" 하면 아래처럼 테스팅을 해 주게 된다.

 

좀더 복잡한 이제 중첩 리소스 테스트, 사용자 정보 조회 및 스키마 유효성 검증, 헤더를 사용한 요청 테스트도 가능하다.

 

 

이렇게 테스트를 하고 난뒤의 결과값은 아래와 같았다..

---

테스트 결과 요약

JSONPlaceholder API를 MCP의 playwright 함수를 사용하여 테스트한 결과입니다:

1. 기본 GET 요청 (posts/1)
   • 상태 코드: 200 OK
   • 응답: 정상적인 포스트 데이터 (userId, id, title, body 포함)
2. POST 요청 (새 포스트 생성)
   • 상태 코드: 201 Created
   • 응답: 새로 생성된 포스트 (id 101 할당)
3. PATCH 요청 (포스트 수정)
   • 상태 코드: 200 OK
   • 응답: JSONPlaceholder의 특성상 실제 데이터가 수정되지는 않았으나 요청은 성공적으로 처리됨
4. DELETE 요청 (포스트 삭제)
   • 상태 코드: 200 OK
   • 응답: 빈 객체 {}
5. 쿼리 파라미터 필터링 (userId=1)
   • 상태 코드: 200 OK
   • 응답: userId가 1인 포스트 목록
6. 중첩 리소스 접근 (posts/1/comments)
   • 상태 코드: 200 OK
   • 응답: 포스트 1에 달린 댓글 목록
7. 사용자 정보 조회 (users/1)
   • 상태 코드: 200 OK
   • 응답: 복잡한 구조의 사용자 데이터 (중첩된 address, company 객체 포함)
8. 헤더를 포함한 POST 요청
   • 상태 코드: 201 Created
   • 응답: 새로 생성된 포스트 (id 101 할당)

---

실 사용시에는 세부적인 것을 조정해야 하겠지만, 명령어 하나에 이정도의 결과값을 도출하는 것만으로도 사용해 보기에 충분한 이유가 될거 같다.

 

 

이정도로 Playwright MCP Server에 대한 글을 마치겠습니다.

실행 결과를 보여주다 보니 이미지가 많이 들어가게 되네요. ^^; 이점은 양해 주세요..

그럼 오늘도 좋은 하루 보내시기 바랍니다..

 

끝.