alinaqi/playwright-testing

playwright-testing은(는) 무엇을 하나요?

Playwright를 활용한 E2E 테스트 - 페이지 객체, 교차 브라우저, CI/CD

개요

이 스킬은 Playwright를 사용하여 웹 애플리케이션의 엔드투엔드(E2E) 테스트를 생성하고 실행하는 방법을 설명합니다. 페이지 객체 모델(Page Object Model), 교차 브라우저 테스트, CI/CD 파이프라인 통합을 중점적으로 다룹니다.

지원 플랫폼

• Claude Code
• Cursor
• Codex CLI
• Windsurf

사전 요구사항

• Node.js 18 이상
• npm 또는 yarn
• Playwright 설치: npm init playwright@latest

사용 방법

1. Playwright 설정

   playwright.config.ts 파일을 프로젝트 루트에 생성합니다.

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
     testDir: './tests',
     fullyParallel: true,
     forbidOnly: !!process.env.CI,
     retries: process.env.CI ? 2 : 0,
     workers: process.env.CI ? 1 : undefined,
     reporter: 'html',
     use: {
       baseURL: 'http://localhost:3000',
       trace: 'on-first-retry',
     },
     projects: [
       {
         name: 'chromium',
         use: { browserName: 'chromium' },
       },
       {
         name: 'firefox',
         use: { browserName: 'firefox' },
       },
       {
         name: 'webkit',
         use: { browserName: 'webkit' },
       },
     ],
   });
   

2. 페이지 객체 작성

   tests/pages/LoginPage.ts

   import { Page } from '@playwright/test';
   
   export class LoginPage {
     constructor(private page: Page) {}
   
     async navigate() {
       await this.page.goto('/login');
     }
   
     async fillUsername(username: string) {
       await this.page.fill('#username', username);
     }
   
     async fillPassword(password: string) {
       await this.page.fill('#password', password);
     }
   
     async submit() {
       await this.page.click('button[type="submit"]');
     }
   
     async login(username: string, password: string) {
       await this.fillUsername(username);
       await this.fillPassword(password);
       await this.submit();
     }
   }
   

3. 테스트 작성

   tests/login.spec.ts

   import { test, expect } from '@playwright/test';
   import { LoginPage } from './pages/LoginPage';
   
   test('유효한 자격 증명으로 로그인', async ({ page }) => {
     const loginPage = new LoginPage(page);
     await loginPage.navigate();
     await loginPage.login('testuser', 'password123');
     await expect(page).toHaveURL('/dashboard');
   });
   

4. 테스트 실행

   npx playwright test
   

   특정 브라우저에서만 실행하려면:

   npx playwright test --project=chromium
   

5. CI/CD 통합 (GitHub Actions 예시)

   .github/workflows/playwright.yml

   name: Playwright Tests
   on:
     push:
       branches: [ main, master ]
     pull_request:
       branches: [ main, master ]
   jobs:
     test:
       timeout-minutes: 60
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
       - name: Install dependencies
         run: npm ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Run Playwright tests
         run: npx playwright test
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
   

주요 기능

• 페이지 객체 모델: 테스트 유지보수성을 높이기 위해 UI 요소와 상호작용을 페이지 객체로 캡슐화합니다.
• 교차 브라우저 테스트: Chromium, Firefox, WebKit에서 동일한 테스트를 실행합니다.
• 자동 재시도: 실패한 테스트를 CI 환경에서 자동으로 재시도합니다.
• 리포터: HTML 리포터를 통해 테스트 결과를 시각적으로 확인할 수 있습니다.
• 트레이스: 첫 번째 재시도 시 트레이스를 캡처하여 디버깅을 용이하게 합니다.

환경 변수

변수명	설명	기본값
BASE_URL	테스트 대상 URL	http://localhost:3000
CI	CI 환경 여부	false

주의사항

• 테스트 전에 대상 애플리케이션이 실행 중이어야 합니다.
• Playwright 브라우저가 설치되어 있어야 합니다 (npx playwright install).
• CI 환경에서는 retries와 workers 설정이 자동으로 조정됩니다.