E2E(End-to-End) 테스트는 QA 담당자에게 무척 피로한 업무입니다. 일단 테스트 스크립트를 작성하려면 며칠이 걸립니다. 프로젝트 코드나 구조가 변경될 때마다 기존 테스트는 금세 깨집니다. 간단히 클릭하고 입력하는 시나리오도 셀렉터나 여러 로직을 일일이 손봐야 해 유지 보수가 번거롭습니다.

이러한 불편을 해소하려면 어떻게 해야 할까요? 저는 Playwright MCP를 사용하는 걸 추천합니다. Playwright MCP는 Microsoft에서 개발한 MCP(Model Context Protocol) 서버로, LLM과 웹페이지의 상호작용을 지원합니다. 이 도구를 활용하면, 자연어만으로도 브라우저 상호작용을 정의하고, 시나리오별로 코드를 생성할 수 있습니다. 그 결과, 위와 같은 QA 업무 부담을 크게 줄일 수 있습니다.

이 글에서는 Playwright MCP의 개념과 설치 방법, 이를 활용한 E2E 테스트 자동화, 테스트 코드 작성 방법을 실습 예제와 함께 살펴보겠습니다.

시작하기에 앞서, MCP의 개념을 먼저 이해해야 합니다. 자세한 내용은 인포그랩 기술 블로그의 “Claude MCP로 엔지니어링 업무 자동화하기” 편을 참고해 주세요.

Playwright와 Playwright MCP 개념​

먼저 Playwright와 Playwright MCP의 개념을 간단히 짚고 가겠습니다.

Playwright​

Playwright는 Microsoft에서 개발한 오픈 소스 브라우저 자동화 프레임워크입니다. 이 도구는 Chromium, Firefox, WebKit 등 주요 브라우저 엔진을 모두 지원합니다. 아울러 멀티 브라우저, 자동 대기, 트레이싱, 모킹, 코드 생성기 등 다양한 기능을 제공해 신뢰성 높은 E2E 테스트를 구현하는 데 유용합니다.

Playwright MCP​

Playwright MCP*는 Microsoft에서 개발한 Playwright 전용 MCP 서버로, Playwright를 사용해 브라우저 자동화 기능을 제공합니다. 구체적으로는 LLM이 구조화된 접근성 스냅샷으로 웹 페이지와 자동으로 상호작용을 하도록 지원합니다. Playwright MCP는 E2E 테스트를 직관적이고, 유지 보수하기 쉽게 구현하는 데 도움이 됩니다.

*MCP(Model Context Protocol): AI 모델이 다양한 소프트웨어 도구와 상호작용을 하고, 해당 도구의 데이터와 기능에 접근하도록 지원하는 개방형 프로토콜

Playwright MCP 설치 방법​

그럼 지금부터 Playwright MCP 설치 방법을 단계별로 알아보겠습니다.

설치 전 준비 사항​

  • 로컬 클라이언트에서 MCP 서버를 사용하려면 우선 Node.js를 설치해야 합니다.
  • 그다음, 사용하고 싶은 MCP Host를 선택해 준비합니다.
    • MCP Host 종류: Cursor, Claude Desktop, VS Code, Windsurf
  • 이 글에서는 Cursor를 이용해 Playwright MCP를 사용하겠습니다.

설치 과정​

  1. Cursor Settings에 진입한 뒤, 상단 우측의 Add new global MCP server를 누릅니다.

    Cursor Settings에서 MCP 서버 추가 화면 | 인포그랩 GitLab
    Cursor Settings에서 MCP 서버 추가 화면

  2. 새로 열린 mcp.json 편집 윈도에서 mcpServers 아래에 MCP 서버 등록을 위한 command와 args를 입력합니다.

    mcp.json 편집 화면 | 인포그랩 GitLab
    mcp.json 편집 화면

  3. 입력을 마치면, 아래 이미지와 같이 토글이 활성화돼야 합니다. 서버가 정상 작동 중이면 서버 이름 왼쪽에 녹색 불이 들어옵니다. 만약 빨간색 불이 들어오면, mcp.json과 로컬 환경을 다시 확인해 주세요.

    playwright-mcp 서버가 정상 등록된 화면 | 인포그랩 GitLab
    playwright-mcp 서버가 정상 등록된 화면

Playwright MCP 도구 목록​

아래 표는 Playwright MCP로 사용할 수 있는 도구 목록입니다. 자세한 내용은 Microsoft의 공식 문서를 참고해 주세요.

2025-05-28-playwright-mcp-3 | 인포그랩 GitLab

Playwright MCP E2E 테스트 자동화 방법​

이제 Playwright MCP를 활용해 자연어에 기반한 E2E 테스트 자동화를 단계별로 실습하겠습니다.

시나리오 소개​

이 실습은 Next.js로 구성한 가상 쇼핑몰 페이지를 기반으로 진행합니다. 쇼핑몰 로그인부터 결제까지 자동화를 시도합니다. localhost:3000으로 쇼핑몰 페이지를 실행합니다.

Playwright MCP 실습용 가상 쇼핑몰 화면. 이미지 출처=Unsplash | 인포그랩 GitLab
Playwright MCP 실습용 가상 쇼핑몰 화면. 이미지 출처=Unsplash

1. 테스트 요청 프롬프트 입력​

  • Cursor 채팅창에 테스트 요청을 프롬프트로 입력합니다. 해당 프롬프트에는 다음 정보를 기재합니다.

    • 접속할 페이지의 URL

    • 로그인 정보: ID, 비밀번호

    • 단계별로 수행할 태스크

      Cursor 채팅창에 입력한 테스트 요청 프롬프트 | 인포그랩 GitLab
      Cursor 채팅창에 입력한 테스트 요청 프롬프트

2. 테스트 자동 실행​

  • 프롬프트를 입력하면, AI가 Playwright를 작동시킬 브라우저를 실행하고, 해당 URL로 접속합니다.
  • 그다음, 요청을 단계별로 실행합니다.
  • 아래 이미지와 같이 도구를 여러 번 호출하며, 테스트를 수행합니다.

    • AI는 browser_navigate로 요청한 URL에 접속하기 위해 브라우저를 실행하고 진입합니다.

    • 이어서 browser_click과 browser_type을 반복하며 버튼을 클릭하거나, 정보를 알아서 입력합니다.

    • ‘특정한 엘리먼트를 선택해 클릭하라’, ‘특정한 필드에 값을 입력하라’라고 지시하지 않았는데도, AI가 프롬프트에 따라 테스트를 스스로 수행합니다.

      AI가 여러 MCP 도구를 호출하는 화면 | 인포그랩 GitLab
      AI가 여러 MCP 도구를 호출하는 화면

3. 테스트 결과 요약​

  • 테스트가 완료되면, AI는 Playwright MCP가 수행한 작업을 테스트 단계별 수행 작업, 결제 완료 여부, 페이지에 나타난 안내 문구, 결제 상품 정보 순으로 정리합니다.

    AI가 정리한 테스트 결과 | 인포그랩 GitLab
    AI가 정리한 테스트 결과

이로써 Playwright MCP를 사용해 E2E 테스트 자동화를 자연어로 직관적이고, 간편하게 구현했습니다.

Playwright MCP 테스트 코드 작성 방법​

Playwright MCP는 브라우저 상호작용 외에도 다양한 도구를 지원합니다.

특히 browser_generate_playwright_test를 이용하면, 자연어로 E2E 테스트용 Playwright 테스트 코드 작성을 요청할 수 있습니다. 방법은 다음과 같습니다.

  1. ‘browser_generate_playwright_test’로 위의 실습 시나리오에 기반해 Playwright 테스트 코드 작성을 요청합니다.

  2. AI가 E2E 테스트 코드를 아래와 같이 생성합니다.

    import { test, expect } from '@playwright/test';

    test('상품 구매 및 결제 성공 시나리오', async ({ page }) => {
      // 1. 로그인 페이지 진입
      await page.goto('http://localhost:3000/login');
      await page.fill('input[name="email"]', 'test@test.com');
      await page.fill('input[name="password"]', '1234');
      await page.click('button:has-text("로그인")');

      // 2. 쇼핑 페이지로 이동
      await page.click('a:has-text("쇼핑 페이지로 이동")');

      // 3. 상품 장바구니 담기 및 결제 페이지 이동
      await page.click('button:has-text("장바구니에 담기")'); // 첫 번째 상품 기준
      await page.click('a:has-text("결제하기")');

      // 4. 결제 정보 입력
      await page.fill('input[name="name"]', '홍길동');
      await page.fill('input[name="email"]', 'test@test.com');
      await page.fill('input[name="address"]', '서울특별시 강남구 테헤란로 123');
      await page.fill('input[placeholder="1234 5678 9012 3456"]', '4444 5555 6666 7777');
      await page.fill('input[placeholder="MM/YY"]', '12/29');
      await page.fill('input[placeholder="123"]', '123');
      await page.click('button:has-text("결제하기")');

      // 5. 결제 성공 확인
      await expect(page.getByRole('heading', { name: '결제 성공!' })).toBeVisible();
      await expect(page.locator('text=결제가 성공적으로 처리되었습니다')).toBeVisible();
      await expect(page.locator('text=프리미엄 헤드폰')).toBeVisible();
    });

위 테스트 코드를 보면, 앞선 E2E 테스트 자동화 실습에서 프롬프트로 요청한 테스트의 단계별 동작을 확인할 수 있습니다. 테스트 코드는 저장한 다음, 향후 동일한 시나리오에 재활용할 수도 있습니다.

맺음말​

기존에는 E2E 테스트를 진행하려면 QA 담당자가 프로젝트의 코드를 깊이 이해해야 했습니다. 테스트 시나리오를 실제 스크립트로 구현하려면, 프로젝트의 로직과 테스트 스크립트에 사용할 셀렉터를 직접 파악해야 했기 때문입니다.

이제 Playwright MCP를 사용하면, 머릿속에 있는 테스트 시나리오를 자연어로 요청하는 것만으로도, E2E 테스트를 자동으로 실행하고, 스크립트도 생성할 수 있습니다.

이번 글에서는 자연어로 작성한 시나리오를 LLM에 제공해 Playwright MCP가 테스트를 수행하는 과정을 실습했습니다. 더 나아가 프로젝트 구조와 기획이 담긴 지식 베이스를 AI에 제공하면, ‘시나리오 생성 → 테스트 코드 작성 → 테스트 실행’까지 E2E 테스트의 전 과정을 100% 자동화할 수 있을 걸로 예상됩니다.

참고 자료​

  1. “playwright-mcp”, GitHub, Microsoft, https://github.com/microsoft/playwright-mcp
  2. Joshua(홍성현), “Claude MCP로 엔지니어링 업무 자동화하기”, 인포그랩, 2025-01-22, https://insight.infograb.net/blog/2025/01/22/mcp/

지금 이 기술이 더 궁금하세요? 인포그랩의 DevOps 전문가가 알려드립니다.