[테스트] Playwright MCP로 반복적인 업무 줄이기

Woonil·2025년 10월 17일

테스트

목록 보기

1/4

프론트엔드 인턴을 수행하며 퍼블리싱에 전념하고 있었다. 내가 담당한 작업이 UI 변경 작업이긴 했지만, 혹시나 기능적인 문제가 발생하지 않는지 혹은 정상적인 UI가 표시되지 않는지 확인하는 과정이 필요했다. 따라서 '매주' 회의 전에 계약, 자문과 같은 주요 페이지의 동작이 정상적으로 수행되는지 진행했다. 이 작업의 문제는 매번 일정한 시간이 소요되는 반복적인 작업이라는 것이었다.

테스트를 손 안쓰고 수행할 수 있으면 좋겠다고 생각했다. 개념으로만 공부했던 E2E 테스트를 직접 수행할 좋은 시점이었다. 이에 대표적인 프론트엔드 E2E 테스팅 도구인 Playwright의 MCP를 활용하고자 했다.

MCP(Model Context Protocol, 모델 컨텍스트 프로토콜)

MCP는 AI 모델이 외부 도구, 데이터, 시스템과 표준화된 방식으로 통신할 수 있도록 설계된 개방형 프로토콜이다. 해당 프로토콜은 AI 모델이 다양한 데이터 소스, 도구, 애플리케이션과 상호 작용할 수 있는 표준화된 통신 수단을 제공한다.

이를 통해 개발자는 각 서비스의 API를 직접 코딩하거나 설정할 필요 없이, MCP 서버만 설치하여 AI가 다양한 서비스를 활용할 수 있다. MCP는 기본적으로 클라이언트(AI 에이전트)가 서버에 요청을 보내면, 서버가 특정 작업(도구 실행 등)을 수행하고 결과를 클라이언트에게 전달하는 클라이언트-서버 아키텍처를 기반으로 동작한다.

[Gemini 답변 요약]

😎과정

MCP 서버 설정

프로젝트 루트에 .cursor 폴더 생성 후 mcp.json 파일을 생성하거나, cursor > settings > Add MCP Server 로 해당 파일에 접근한다. 파일에 아래 내용을 입력하고, cursor를 재시작한다.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

프롬프트 작성

아래와 같이 프롬프트를 따로 작성했다. 이때, 실제로 게시물 생성이 완료됐는지 판단하는 기준을 뭘로 잡을지 고민했다. 우선 계약 기능의 정해진 프로세스가 존재하는 점에 착안하여 처음 계약서를 생성하면 '검토' 단계로 넘어가는 점을 활용했다(생성 시점의 계약서 id와 조회 시의 계약서 id의 일치 여부를 판단하는 방법이 가장 정확할 것 같다는 생각이 이후에 들었다).

playwright mcp로 테스트를 진행할거야.

테스트 겸, 계약서 검토 요청 페이지(http://localhost:3000/계약페이지uri)에 접속해줘.
로그인 창으로 리다이렉트 된다면, (이메일: test.com 비밀번호: xxxx)입력 후, 로그인 버튼을 클릭해.

계약서 검토 요청 페이지(http://localhost:3000/계약페이지uri)에 접속하여 다음 행위들을 차례대로 수행하여 새로운 계약서 검토 요청을 생성할거야. 
요청이 완료되면 계약서 검토 조회 페이지(http://localhost:3000/계약조회페이지uri)에서 새로 작성한 게시물이 제대로 표시되는지 확인해줘. 
(표시 여부 판단 방법: 조회 페이지에서 테이블 필터링 부분에서 진행상태(Select)를 '배정 중'을 기준으로 필터링한 후, 테이블에 생성 시 작성한 계약명과 일치하는 행이 있는지 확인하면돼.)

계약서 검토 요청 작성 단계
기본 정보 작성 단계
1. 계약명: '테스트 + 현재 시각(실제로 현재 시각을 계산해야 함 e.g. Date.now() )' 
2. 계약분류: 대분류, 중분류, 소분류(셋은 모두 Select) 순서로 가장 위 항목 선택
3. 계약기간: 두 번의 DatePicker 클릭을 통해 오늘 날짜, 오늘+일주일 날짜 선택
4. 계약서: '파일' 버튼 클릭 후, pdf 확장자의 아무 파일 업로드

상세정보 작성 단계
1. 계약의 배경 및 목적: 테스트입니다.

계약상대방 정보
1. 회사명: '상대계약자 찾기' 버튼 클릭 후 보이는 모달에서 검색창에 'xxx' 검색. 검색 결과 나온 테이블 목록에서 가장 위 항목 클릭.
2. 담당자: '홍길동' 입력.
3. 담당자 Email: 'hong@test.com' 입력.

마지막으로, 페이지 최하단의 '계약서 검토 요청' 버튼 클릭.