7.1 Project와 device emulation

Project는 같은 test를 browser, device, locale, permission, environment별 configuration으로 실행합니다.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile', use: { ...devices['iPhone 15'] } },
  ],
});

Device descriptor는 viewport, user agent, touch 같은 속성을 묶습니다. 실제 mobile hardware, OS browser와 완전히 같다는 뜻은 아닙니다. 중요 flow는 실제 device 전략과 보완합니다.

Project 활용

• Chromium, Firefox, WebKit compatibility
• 로그인 setup project와 dependency
• Staging, local baseURL
• Locale, timezone
• Authenticated role
• Feature flag 조합

모든 test를 모든 조합으로 실행하면 비용이 폭발합니다. Pull request에는 핵심 browser, flow, nightly에는 전체 matrix처럼 risk에 따라 나눕니다.

참고: Projects, Emulation

Project를 browser 이상으로 쓰기

projects: [
  { name: 'guest', use: { ...devices['Desktop Chrome'] } },
  { name: 'member', use: { storageState: 'playwright/.auth/user.json' } },
  { name: 'mobile-ko', use: { ...devices['iPhone 13'], locale: 'ko-KR' } },
]

Project는 browser, device, auth role, environment, feature flag, test group을 표현할 수 있습니다. 축을 무작정 곱하지 말고 business 위험이 있는 조합만 만듭니다.

Emulation과 실제 기기

Device descriptor는 viewport, user agent, touch 등 browser-level emulation입니다. 실제 mobile hardware 성능, OS browser chrome, sensor, native keyboard를 완전히 재현하지 않습니다.

실습

1. Guest/member project를 분리합니다.
2. Mobile viewport에서 Todo form visual을 확인합니다.
3. Locale/timezone 조합을 두 개만 선택한 이유를 기록합니다.
4. Project별 ignoreSnapshots 또는 testMatch가 필요한지 검토합니다.