Playwright

핵심 개념

Browser Context

독립된 브라우저 세션 환경으로, 쿠키와 로컬 스토리지가 격리됩니다. 하나의 브라우저 인스턴스에서 여러 Context를 생성해 병렬 테스트를 효율적으로 실행할 수 있습니다.

Page

브라우저 탭 하나를 나타내는 객체로, 모든 자동화 작업의 기본 단위입니다. 페이지 내에서 요소 선택, 클릭, 입력 등의 액션을 수행합니다.

Locator

DOM 요소를 찾기 위한 선택자로, 실제 액션 수행 시점까지 요소 탐색을 지연시켜 동적 콘텐츠에 안정적으로 대응합니다.

Auto-waiting

Playwright가 자동으로 요소가 준비될 때까지 기다리는 기능입니다. 클릭 전 요소가 보이고 활성화될 때까지, 입력 전 요소가 편집 가능할 때까지 대기하여 불안정한 테스트를 방지합니다.

Headless Mode

브라우저 UI 없이 백그라운드에서 실행하는 모드로, CI/CD 환경에서 빠르게 테스트를 수행할 때 사용합니다. 디버깅 시에는 headed 모드로 실제 브라우저 창을 띄울 수 있습니다.

로그인 시나리오 E2E 테스트

로그인 페이지에서 폼을 작성하고 제출한 뒤, 성공적으로 대시보드로 이동하는지 검증하는 기본적인 E2E 테스트 예시입니다.

const { test, expect } = require('@playwright/test');

test('사용자 로그인 테스트', async ({ page }) => {
  // 로그인 페이지로 이동
  await page.goto('https://example.com/login');
  
  // 이메일과 비밀번호 입력
  await page.fill('input[name="email"]', 'user@example.com');
  await page.fill('input[name="password"]', 'password123');
  
  // 로그인 버튼 클릭
  await page.click('button[type="submit"]');
  
  // 대시보드로 리다이렉트 되었는지 확인
  await expect(page).toHaveURL(/.*dashboard/);
  await expect(page.locator('h1')).toContainText('환영합니다');
});