Playwright와 시각 테스트: 전체 튜토리얼

Source: Dev.to

버전 1.22부터 Microsoft의 Playwright는 기본 시각 테스트 기능인 toHaveScreenshot() 메서드를 포함합니다. 이 메서드는 스크린샷을 캡처하고 자동으로 레퍼런스 이미지와 비교하며, 외부 플러그인이 필요하지 않습니다. 기존 스택에 시각 테스트를 추가하고자 하는 개발 팀에게 강력한 옵션입니다. 튜토리얼에서는 설치, 구성, 모범 사례 및 CI/CD 통합을 다룹니다.

설치 및 첫 번째 테스트

Setup is quick with an existing Node.js project:

npm install -D @playwright/test
npx playwright install

Create your first visual test in tests/visual.spec.ts:

import { test, expect } from '@playwright/test';

test('homepage visual test', async ({ page }) => {
  await page.goto('https://your-site.com');
  await expect(page).toHaveScreenshot('homepage.png');
});

The first run generates the baseline. Subsequent runs compare against it.

허용오차 설정

기본적으로 Playwright는 단일 픽셀 차이도 플래그합니다. 실제로는 오탐지를 방지하기 위해 임계값을 설정합니다:

// playwright.config.ts
export default defineConfig({
  expect: {
    toHaveScreenshot: {
      maxDiffPixelRatio: 0.01,
      animations: 'disabled',
      scale: 'device',
    },
  },
});

동적 콘텐츠 처리

세 가지 일반적인 해결책:

1. 동적 영역 마스킹 – mask 옵션을 사용하여 페이지의 변하는 부분을 무시합니다.
2. page.evaluate()를 통한 콘텐츠 교체 – 스크린샷을 찍기 전에 결정론적 데이터를 주입합니다.
3. 주입된 CSS로 숨기기 – 애니메이션 요소를 숨기거나 안정화하는 스타일 블록을 추가합니다.

각 접근 방식은 신뢰성과 유지 관리 노력 사이의 균형을 맞춥니다.

테스트 안정화

• 캡처하기 전에 네트워크가 유휴 상태가 되고, 폰트가 로드되며, 중요한 요소가 표시될 때까지 기다립니다.
• 위에 표시된 대로 Playwright 설정에서 애니메이션을 전역적으로 비활성화합니다.
• 필요할 때 명시적 대기 또는 page.waitForLoadState('networkidle')를 사용합니다.

다중 해상도 테스트

Playwright 프로젝트를 활용하여 동일한 테스트 스위트를 다양한 뷰포트와 디바이스에서 실행하고, 각각 고유한 기준선을 설정합니다:

// playwright.config.ts
export default defineConfig({
  projects: [
    {
      name: 'Desktop',
      use: { viewport: { width: 1920, height: 1080 } },
    },
    {
      name: 'Tablet',
      use: { viewport: { width: 768, height: 1024 } },
    },
    {
      name: 'Mobile',
      use: { device: 'iPhone 13' },
    },
  ],
});

CI/CD 통합

GitHub Actions(또는 기타 CI 시스템)를 사용하면 시각적 테스트를 자동으로 실행할 수 있습니다. 테스트가 실패하면 Playwright가 세 가지 이미지를 생성합니다:

• Baseline – 저장된 기준 스크린샷.
• Actual – 새로 캡처된 스크린샷.
• Diff – 픽셀 차이를 빨간색으로 강조 표시한 이미지.

HTML 보고서는 이러한 이미지를 나란히 표시하여 파이프라인에서 실패를 쉽게 검토할 수 있게 합니다.

제한 사항

• TypeScript/JavaScript 지식이 필요합니다.
• 내장된 리뷰 대시보드가 없으며, 생성된 HTML 보고서에 의존합니다.
• 픽셀 비교가 기본적이며, 브라우저 간 안티앨리어싱 및 글꼴 렌더링 차이로 인해 노이즈가 발생할 수 있습니다.
• 여러 브라우저에서 많은 테스트의 베이스라인을 관리하면 파일 수가 크게 증가할 수 있습니다 (예: 200 개 이상의 테스트 × 3개의 브라우저 = 600 개 이상의 베이스라인 이미지).

코드 없는 접근 방식을 선호하는 팀은 Delta‑QA를 고려해 보세요. 이 서비스는 코드를 작성하지 않고, 베이스라인을 관리하거나 거짓 양성 결과에 대처할 필요 없이 시각적 회귀 테스트를 제공합니다.

FAQ

Playwright는 시각 테스트에 무료인가요?

예. toHaveScreenshot()은 Playwright에 내장되어 있으며, 오픈소스이자 무료로 사용할 수 있습니다.

시각 테스트에 Playwright와 Cypress 중 어느 것이 좋나요?

Playwright는 기본적인 시각 테스트를 제공하는 반면, Cypress는 외부 플러그인이 필요합니다. 또한 Playwright는 Chromium, Firefox, WebKit 세 가지 브라우저 엔진을 지원하지만 Cypress는 단일 엔진에만 집중합니다. 따라서 시각 테스트에서는 Playwright가 더 강력한 선택입니다.

Playwright와 Delta‑QA를 함께 사용할 수 있나요?

물론입니다. 복잡한 개발자 중심 테스트에는 Playwright를 사용하고, QA 팀이 수행하는 일상적인 시각 검증에는 Delta‑QA를 사용하세요.