1.2 설치와 Configuration

새 프로젝트는 공식 initializer로 시작할 수 있습니다.

npm init playwright@latest
npx playwright --version

Initializer는 @playwright/test, configuration, example test와 선택한 browser binary를 준비합니다. Package version과 browser binary는 함께 업데이트합니다.

npm install -D @playwright/test@latest
npx playwright install --with-deps chromium

기본 configuration

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

export default defineConfig({
  testDir: './tests',
  timeout: 30_000,
  expect: { timeout: 5_000 },
  fullyParallel: true,
  forbidOnly: Boolean(process.env.CI),
  retries: process.env.CI ? 2 : 0,
  reporter: [['html', { open: 'never' }], ['list']],
  use: {
    baseURL: 'http://127.0.0.1:4173',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
});

Test timeout, assertion timeout, action timeout, navigation timeout은 역할이 다릅니다. 처음부터 모두 크게 늘리면 느린 failure를 숨깁니다. 실패한 단계와 application latency를 보고 가장 좁은 범위에서 조정합니다.

참고: Installation, Configuration

설정을 읽는 순서

1. testDir, testMatch로 어떤 file이 발견되는지 봅니다.
2. projects로 browser, device, environment matrix를 봅니다.
3. Top-level workers, retries, reporter를 봅니다.
4. use의 baseURL, trace, screenshot, storage state를 봅니다.
5. webServer와 environment variable이 local/CI에서 같은지 봅니다.

최소 config에서 시작하기

export default defineConfig({
  testDir: './tests',
  use: { baseURL: 'http://127.0.0.1:4173', trace: 'on-first-retry' },
  webServer: {
    command: 'npm run serve',
    url: 'http://127.0.0.1:4173/health',
  },
});

Option을 복사해 한꺼번에 넣지 않습니다. Suite에서 실제로 해결하는 문제와 owner가 있는 설정만 추가합니다.

설치 실패 진단

• Package install 실패와 browser binary install 실패를 분리합니다.
• Corporate proxy에서는 npm registry와 browser download host 접근을 각각 확인합니다.
• Docker image tag와 @playwright/test version을 맞춥니다.
• CI cache에 오래된 browser binary가 섞이지 않는지 확인합니다.
• Linux에서는 --with-deps가 필요한 system library를 설치하는지 확인합니다.

실습

1. npx playwright test --list로 발견된 test 목록을 확인합니다.
2. 잘못된 testDir을 넣어 discovery failure를 경험합니다.
3. Local과 CI에서 reporter, worker가 어떻게 달라지는지 출력합니다.
4. Chromium만 설치한 상태에서 Firefox project를 실행해 error를 읽습니다.