Cursor로 Playwright MCP 테스트 자동화 ㅋㅋ

Cursor랑 Playwright MCP를 이용해서 웹 테스트 자동화하는 방법을 소개해볼게.

일반인 입장에서 어렵지 않게, 재밌게 알려주고 싶은데... ㅎㅎ

 

Playwright MCP가 뭐냐면!

Playwright MCP는 Microsoft에서 개발한 Model Context Protocol 서버로,

AI가 브라우저를 자동으로 제어할 수 있게 해주는 도구야. 쉽게 말해서,

너가 "이 페이지에 가서 로그인하고 상품을 주문해줘"라고 말하면, AI가 알아서 브라우저를 조작해서 실행해주는 거지

 

왜 이게 짱이냐고?

예전엔 테스트하려면 코드 하나하나 직접 짰어야 했거든? 근데 지금은 그냥, 아래와 같이 자연어로.. ㅎㅎㅎ

"네이버 가서 '맛집' 검색해줘"

 

이렇게 말하면 알아서 실행해. 뭔가 영화 같은데, 진짜야 ㅋㅋ

 

Cursor에서 세팅하는 방법 (초간단)

1. 준비물은?

• Node.js 설치되어 있어야 해 (이건 한 번만 해놓으면 끝)
• Cursor는 이미 깔려 있다고 가정하고~

2. Playwright MCP 설치

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

3. Cursor 설정하기

• Cursor 상단 오른쪽 톱니바퀴 → "Add new global MCP server"
• 편집창 열리면 이렇게 입력:

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

• 녹색불 들어오면 성공~ 빨간불이면 다시 확인!

 

예제 한 방 보여줄게

로그인 테스트

localhost:3000에 접속해서 로그인 버튼 누르고,
이메일에 test@test.com, 비밀번호 1234 입력해서 로그인해줘.
"환영합니다"가 뜨는지 확인도 해줘.

이거 입력하면 자동으로 실행됨. 실제로 브라우저 열려서 막 움직임!

쇼핑몰 테스트도 가능

https://example-shop.com에 가서:
1. 로그인 (user@test.com / password123)
2. "노트북" 검색
3. 첫 상품 클릭 → 장바구니 담기
4. 장바구니 페이지 → 결제 → 주문 완료 확인

 

이거 진짜 다 해줘. 게다가 중간중간 스크린샷도 자동으로 찍어줌!

참고로, 인증 정보를 안전하게 관리하지 않으면 위험의 요소가 있으니, 환경변수라든지 안전한 인증 정보 관리 방법을 사용하는 것은 필수야.

쓸 수 있는 명령어들

명령어	설명
browser_navigate	특정 URL로 이동
browser_click	버튼 클릭
browser_type	글자 입력
browser_snapshot	화면 캡처
browser_save_as_pdf	PDF로 저장
browser_generate_playwright_test	테스트 코드 자동 생성

 

실무 꿀팁

• 에러 테스트도 해보기: 틀린 비번 넣고 에러 뜨는지 확인해봐
• 여러 브라우저에서 테스트: 크롬/파폭 동시에 켜서 실시간 채팅 되는지 보기
• 시나리오 테스트: 회원가입 → 로그인 → 검색 → 구매 이런 플로우 전체 테스트해보기

디버깅 꿀팁

• 빨간불이면 서버 주소/Node 설치 확인
• 요소 못 찾는다면 페이지 로딩 대기 걸어보기 (browser_wait)

정리하자면!

Cursor + Playwright MCP 조합은 진짜 미래다 ㅋㅋ
자연어로 테스트하는 시대가 왔어. 아직은 살짝 불안정한 면도 있지만, 미리 배워두면 나중에 완전 실무 무기 된다.

너도 지금 한번 따라해봐~ 테스트 코드 직접 안 써도 되는 세상, 개꿀이지?

요즘 MCP 관련 내용들이 많이 나오는데... 참고해서 직접해보는 것을 추천해 :)