UI 테스트나 통합 테스트를 자동화하기 위해서는 웹 환경을 직접 구동하고, 사용자가 수행할 법한 시나리오를 코드로 작성하여 검증하는 방식이 효과적입니다.
Playwright는 이러한 E2E(End-to-End) 테스트에 최적화된 프레임워크로,
크로미움(Chrome), 파이어폭스(Firefox), 웹킷(WebKit) 등 주요 브라우저를 동시에 지원하며,
테스트 코드를 통해 사용자 시나리오를 손쉽게 재현할 수 있습니다.

이번 포스트에서는 Playwright를 셋업하는 방법과,
최근 주목받고 있는 AI 코드 편집기인 Cursor를 활용해
테스트 코드를 더욱 효율적으로 작성하고 관리하는 방법을 살펴보겠습니다.

1. Playwright 소개

1.1 Playwright란?

마이크로소프트가 개발한 오픈 소스 E2E 테스트 프레임워크
다중 브라우저 지원: Chromium(Chrome), Firefox, WebKit(Safari) 등을 모두 지원
자동화 시나리오 작성: 실제 브라우저 환경에서 마우스 클릭, 키보드 입력, 파일 업로드 등 사용자 액션을 재현
강력한 기능: 네트워크 요청 모킹(Mock), 동적 대기(Wait), 스크린샷/비디오 녹화 등 풍부한 기능 제공

1.2 장점

브라우저 간 호환성 테스트: 여러 브라우저를 번갈아가며 한 번에 자동화할 수 있음
테스트 코드 기록: CLI(npx playwright codegen)를 통해 실제 동작을 녹화하고 코드화
CI/CD 파이프라인 통합: GitHub Actions, Jenkins, GitLab CI 등 다양한 CI 환경에서 쉽게 활용

2. Cursor 소개

2.1 Cursor란?

AI 보조 코딩 기능을 내장한 에디터이자 IDE 솔루션
OpenAI의 모델 등을 활용해 코드 자동 완성, 오류 수정, 문서화 작업 등을 돕는 도구
VSCode 등 기존 에디터 확장과 유사한 사용자 경험을 제공하며, AI와의 협업으로 생산성을 높임

2.2 테스트 코드 작성 시 이점

자동완성: Playwright API나 특정 페이지 요소에 대한 접근 코드 등 자주 반복되는 코드를 빠르게 생성
문맥 기반 추천: 테스트 시나리오 작성 시, Cursor가 이미 작성된 맥락을 이해해 적절한 코드 스니펫을 제안
오류 감지: 문법 오류나 네이밍 미스 등을 즉시 교정하여 테스트 코드 품질 향상

3. 프로젝트 셋업

3.1 기본 환경 구성

Node.js 환경에서 Playwright를 사용하려면, 다음 명령어로 프로젝트 초기화를 진행합니다.

npm init -y
npm install -D @playwright/test

-D 옵션은 개발 의존성(DevDependency)으로 설치함을 의미합니다.

Playwright Test 구성

Playwright에서 제공하는 테스트 러너를 사용하려면 npx playwright install 명령어를 통해 필요한 브라우저 바이너리를 설치합니다.

npx playwright install

설치가 끝나면, Playwright가 Chromium, Firefox, WebKit 세 가지 브라우저를 자동으로 다운로드하며 테스트 환경을 준비합니다.

3.2 폴더 구조 예시

my-playwright-project/
  ├─ tests/
  │   └─ example.spec.ts
  ├─ package.json
  └─ playwright.config.ts

tests/: 테스트 파일을 저장하는 디렉토리
playwright.config.ts: Playwright 러너 설정 (테스트 타임아웃, 브라우저 종류, 리포트 옵션 등)

4. Playwright 간단 예제

아래 예시는 Google 검색 페이지에서 “Playwright”라는 키워드를 검색하고, 검색 결과가 노출되는지 확인하는 테스트 코드입니다.

tests/example.spec.ts

import { test, expect } from '@playwright/test';
 
test('구글 검색 테스트', async ({ page }) => {
  // 구글 메인 페이지로 이동
  await page.goto('https://www.google.com');
 
  // 검색어 입력
  const searchBox = page.getByRole('combobox', { name: '검색' });
  await searchBox.fill('Playwright');
 
  // 검색 버튼 클릭
  await page.keyboard.press('Enter');
  
  // 결과 페이지 대기
  await page.waitForTimeout(2000);
  
  // 검색 결과의 타이틀에 'Playwright'가 포함되어 있는지 테스트
  await expect(page).toHaveTitle(/Playwright/i);
});

test 함수로 테스트 케이스 정의
page 객체로 브라우저 페이지 제어 (링크 이동, 키보드 입력, 요소 찾기 등)
**expect**를 통해 테스트 결과를 검증

5. Cursor로 자동화 코드 작성해 보기

5.1 Cursor 설치

Cursor 공식 웹사이트에서 에디터를 다운로드
회원 가입 혹은 GitHub, Google 계정 연동
워크스페이스 생성 후, Playwright 프로젝트 폴더를 오픈

5.2 AI 보조 기능 활용

자동완성: 테스트 시나리오를 작성하는 중 describe, test, page.goto 등 키워드를 입력하면 AI가 문맥에 맞는 코드 스니펫을 추천
시나리오 확장: “회원가입 시나리오 코드 생성” 등 구체적 명령으로 AI에게 일부 로직을 위임
리팩토링 제안: 코드가 복잡해질 경우, AI에게 “함수를 분리해줘”, “테스트 속성을 파라미터화해줘” 등의 제안 가능

6. 테스트 실행 및 리포트

6.1 테스트 실행

Playwright는 자체 테스트 러너를 제공하므로, 간단히 다음 명령어를 통해 모든 테스트를 실행할 수 있습니다.

npx playwright test

모든 브라우저를 테스트하려면 --browser=all 옵션 추가
특정 브라우저만 실행하려면 --browser=chromium 등으로 지정

6.2 테스트 리포트

테스트가 완료되면, 콘솔에 성공/실패 결과가 표시되며, 추가로 HTML 리포트를 생성할 수 있습니다.

npx playwright test --reporter=html

생성된 playwright-report 폴더에서 테스트 결과, 스크린샷, 동영상 등을 확인

7. CI/CD에 통합하기 (선택)

Playwright 테스트는 GitHub Actions, GitLab CI, Jenkins 등 다양한 CI/CD 환경에 쉽게 통합할 수 있습니다.
GitHub Actions 예시:

.github/workflows/test.yml

name: Playwright Tests
 
on: [push, pull_request]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
 
      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 16
 
      - name: Install dependencies
        run: npm install
 
      - name: Run Playwright Tests
        run: npx playwright test --reporter=dot

actions/setup-node: Node.js 환경 세팅
npx playwright test: Push나 Pull Request 시점마다 자동으로 E2E 테스트 수행

8. 디버깅 & 문제 해결

브라우저 다운로드 실패
- 방화벽이나 프록시 문제로 브라우저 다운로드가 안 될 수 있음
- PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 환경 변수를 사용해 직접 브라우저를 설치하거나, 다운로드 경로를 변경
엘리먼트 찾기 실패
- 요소에 달린 Selector나 Role이 잘못되었을 수 있음
- 개발자 도구를 통해 실제 요소와 일치하는지 확인하고, page.getByRole(), page.getByText(), page.locator() 등 다양한 방식 시도
속도 문제
- 페이지 로드 전에 테스트가 진행되어 실패하는 경우, page.waitForNavigation(), await page.waitForTimeout() 등의 대기 로직을 적절히 배치
- Playwright는 기본적으로 자동 대기를 지원하지만, 네트워크 상태나 페이지 구조에 따라 추가 대기가 필요할 수 있음

9. 결론

Playwright는 크로스 브라우저 호환과 사용자 시나리오 재현에 최적화된 E2E 테스트 프레임워크로,
빠른 속도와 풍부한 기능을 제공하기 때문에 최근 많은 개발자에게 각광받고 있습니다.
여기에 Cursor 같은 AI 보조 코드 에디터를 활용하면,
테스트 코드 작성부터 리팩토링, 디버깅까지 효율적으로 진행할 수 있습니다.

Playwright: 안정적인 크로스 브라우저 테스트, 강력한 자동화 API, CI/CD 연동 용이
Cursor: AI 기반 코드 작성 및 리팩토링 보조, 반복 업무 감소, 생산성 향상
추천 활용 시나리오: UI/UX 테스트, 회원가입·로그인 시나리오, 상품 결제 플로우, 대화형 웹앱 검증 등

지속적인 테스트 자동화를 통해 버그 발생을 조기에 발견하고,
개발 주기의 품질을 한 단계 높여 보시길 바랍니다.

추가 정보와 자세한 사용법은 Playwright 공식 문서와
Cursor 공식 사이트를 참고하시길 권장합니다.

Playwright와 Cursor로 테스트 자동화하기