Cursor와 Playwright로 테스트 자동화 하기
좋은 제품은 어떻게 만들어질까요?
물론 디테일한 기획, 뛰어난 개발 실력 등도 중요하지만, 그에 못지않게 중요한 것이 바로 '품질 보증(Quality Assurance, QA)' 활동입니다. 기획한 기능이 제대로 동작하는지, 사용자가 불편함을 느끼지는 않을지 등 개발의 시작부터 끝, 그리고 그 이후까지 제품의 모든 순간에 관여하며 품질을 책임지는 핵심적인 활동입니다.
하지만 서비스가 복잡해지고 업데이트 주기가 빨라질수록, 이 모든 과정을 사람의 손으로만 감당하기에는 한계가 찾아옵니다. 반복되는 테스트에 지치고, 기존에는 잘 동작하고 있었지만 예상치 못한 곳에서 버그가 터져 나와 당황한 경험이 모두 한 번쯤은 다 있지 않으신가요?
저 역시 같은 고민에 빠졌고, 어떻게 하면 반복적이고 정형화된 테스트는 자동화 시스템에 맡기고, 직접 테스트하는 것은 자동화로는 할 수 없는 복잡한 시나리오에 집중하여 더 넓은 범위의 테스트를 진행함으로써 제품 완성도를 유지할 수 있을까를 고민했습니다.
이번 글에서는 제가 도입을 시도하고 있는 Cursor와 Playwright기반 QA테스트 자동화의 초기 경험을 공유하려 합니다. 다만, Cursor, Playwright, MCP 같은 기술의 개념 설명보다는 실제로 테스트 자동화를 어떻게 적용했는지 그 과정 자체에 초점을 맞추어 말씀드리고자 하며, 관련한 자세한 설명들은 글 하단에 링크 적어두었습니다.
그리고 테스트한 예제는 Jira입니다. 아무래도 제가 기획하고 있는 서비스가 프로젝트 관리 도메인이라, 가장 유사하면서도 익숙한 예시를 보여드릴 수 있을 것 같아 선택했습니다.
물론 오늘 소개하는 자동화 방법은 Jira와 같은 프로젝트 관리 도구에만 국한되지 않습니다. 어떤 종류의 웹 서비스에도 동일하게 적용할 수 있으니, 특정 도구보다는 자동화 '과정' 자체에 집중해서 봐주시면 감사하겠습니다.
0. 환경 설정
테스트 자동화를 진행하기 앞서 Cursor에 Playwright MCP 연동 및 Playwright 패키지 설치가 필요합니다.
Cusrsor settings → MCP & Integrations → New MCP Server → 아래 코드 입력
정상적으로 연결된 상태 확인
Playwright 설치 > npm init playwright@latest 입력
1. Playwright MCP를 활용한 테스트 코드 작성
MCP(Model Context Protocol)는 AI 모델이 외부 도구와 상호작용 할 수 있게 해주는 표준화된 프로토콜입니다. Cursor에서는 이를 통해 Playwright와 같은 테스트 도구를 직접 제어할 수 있어, 자연어 명령만으로도 복잡한 브라우저 테스트를 수행할 수 있습니다.
1단계: 원하는 스펙을 Cursor Chat에 입력
먼저 테스트하고 싶은 시나리오를 자연어로 Cursor Chat에 입력합니다.
다음 과정을 테스트해 주세요:
1. <https://jirasite.atlassian.net에> 접속하세요.
2. 이메일 입력에 "testuser@naver.com"을 입력하세요.
3. 계속 버튼을 클릭하세요.
4. 비밀번호 입력에 "@password123"을 입력하세요.
5. 로그인 버튼을 클릭하세요.
6. 완료된 화면을 확인하세요.
2단계: Cursor가 Playwright MCP로 시나리오 테스트
Cursor는 입력받은 시나리오를 분석하여 실제 브라우저에서 테스트를 실행합니다.
브라우저 실행: 실제 Chrome 브라우저가 시작됩니다
페이지 이동: 지정된 URL로 자동 이동
요소 조작: 입력 필드 찾기, 텍스트 입력, 버튼 클릭
결과 검증: 예상 결과와 실제 결과 비교
피드백 제공: 성공/실패 여부와 스크린샷 제공
[Cursor Playwright MCP 실행 화면]
3단계: 테스트 코드 자동 생성
실행이 완료되면 재사용 가능한 Playwright 테스트 코드를 생성해 달라고 요청할 수 있습니다.
당신이 수행한 로그인 테스트를 내가 동일하게 실행할 수 있도록 테스트 코드로 작성해 주세요. 실제 진행한 테스트만 코드로 작성해야 합니다.
그러면 아래와 같은 구조화된 테스트 코드가 생성됩니다.
4단계: 명령어로 테스트 실행
생성된 코드는 아래 명령어를 통해 언제든지 실행할 수 있습니다.
# 일반 모드로 실행 (브라우저 창 표시)
npx playwright test --headed
# 헤드리스 모드로 실행 (브라우저 창 숨김, 기본값)
npx playwright test
5단계 : 결과 확인
MCP를 통해 AI가 수행한 결과와 생성된 테스트 코드가 동일한 결과를 나타내는지 확인합니다.
MCP 활용의 장점
이처럼 MCP(Model Context Protocol)를 활용하면 복잡한 Playwright API를 외울 필요 없이 원하는 테스트 과정을 자연어로 설명하기만 하면 되기 때문에 누구나 쉽게 테스트 코드를 생성할 수 있습니다.
또한 코드로 옮기기 전에 실제 브라우저에서 시나리오가 정상적으로 동작하는지 바로 확인할 수 있어 실시간 검증이 가능하고, 이 과정에서 디버깅 시간도 크게 줄어든다는 장점이 있습니다.
2. 기본 워크플로우 자동화 테스트
위와 같이 기본적인 개념들만 익히면, 실제 테스트 자동화를 진행해 볼 수 있습니다. 제가 속한 팀이 개발하는 프로젝트 관리 도구에서는 이슈의 생성, 수정, 삭제와 같은 핵심 기능은 버그가 발생하면 사용자 경험 전체가 무너질 만큼 크리티컬 한 영역입니다. 이 때문에 매 배포마다 Dev, Test, Prod 서버에서 이 똑같은 시나리오를 반복해서 테스트하고 있습니다.
저는 이 부분을 첫 번째 자동화 목표로 삼았습니다. 글에서는 '이슈 생성'과 '생성된 이슈 수정' 두 가지 케이스만 테스트해 보았습니다.
2-1. 이슈 생성 MCP 활용
2-2. 이슈 생성 테스트 코드 생성 요청 및 로컬 테스트 (* MCP → 코드 생성 → 로컬 테스트)
2-3. 이슈 생성 → 이슈 수정까지 워크플로우 종합 테스트
유저 스토리 : 이슈를 생성한 후 생성한 이슈를 수정한다.
note. 이슈 생성과 동일하게 이슈 수정에 대해서도 MCP로 테스트하고, 테스트 코드로 변환하여 저장해 둔 상태이며, tests 폴더 안에 이슈 생성과 수정 테스트 코드를 위치시키고 한 번에 코드 실행을 합니다.
3. 마치며
오늘 글에서는 간단한 예제 중심으로 자동화 과정을 소개했지만, 저희 팀의 제품에는 이슈 생성/수정/삭제는 물론, 컨텍스트 메뉴를 통한 대량 수정 기능까지 자동화를 적용해 보았습니다.
작성한 테스트 코드는 환경 변수(dev/test/prod)만 변경하여 각 서버에 구축된 동일한 워크스페이스에서 바로 실행할 수 있도록 구현했습니다. 덕분에 이제 여러 환경에서 동일한 시나리오를 명령어만 실행하면 바로 자동으로 테스트할 수 있게 되었습니다.
기존에는 테스트 시나리오를 스크립트로 구현하려면 매번 테스트 코드에 사용할 셀렉터를 직접 찾아야 했기 때문에 진입 장벽이 꽤 높았습니다. 하지만 MCP나 Playwright에서 제공하는 codegen과 같은 기능을 활용하니 자연어로 요청하거나 실제 화면에서 클릭만으로도 스크립트 코드를 자동으로 생성할 수 있었습니다.
물론 글에서는 가장 기초적인 예제로만 소개하였고 실제로도 아직 도입 단계라 복잡한 시나리오까지 완벽히 대응하기에는 한계가 있었습니다. 하지만 기본적인 워크플로우 테스트를 자동한 덕분에, 지금은 보다 더 복잡한 테스트 시나리오에 집중하여 QA를 진행할 수 있는 기반을 마련했다는 점에서 큰 의미가 있었던 것 같습니다. 앞으로는 현재의 기본 워크 플로우 검증 코드를 기반으로 점차 테스트 영역을 확장해나가려고 합니다.
끝으로, 이렇게 QA 자동화를 위해서 리서치를 하고 실제 도입도 시도해 보니, 서비스 기획서나 와이어프레임 문서 등이 담긴 파일을 AI에게 제공해서 테스트 시나리오를 생성하게 한 후 이를 MCP를 활용하여 AI가 테스트하고 테스트한 결과를 코드로 생성하고 동시에 테스트 결과를 이슈 트래커 API를 활용하여 적재까지 하게 한다면 정말 테스트의 전 과정을 자동화할 수 있지 않을까 하는 기대를 조심스럽게 해 보며 글을 마칩니다.
참고자료
https://playwright.dev/docs/intro
https://github.com/microsoft/playwright-mcp
https://playwright.dev/community/mcp-videos
https://modelcontextprotocol.io/docs/getting-started/intro
