시각적 회귀 테스트

시각적 회귀 테스트는 DOM에 무엇이 있는지가 아니라 페이지가 어떻게 보이는지를 확인합니다. 첫 실행에서 기준(baseline) 스크린샷을 캡처하고, 이후 실행에서는 새 스크린샷을 찍어 그 기준과 픽셀 단위로(또는 지각 기반 알고리즘으로) 비교합니다. 차이가 임곗값을 넘으면 테스트가 실패하고, 무엇이 바뀌었는지 강조한 diff 이미지가 생성됩니다. CSS 변경으로 버튼이 화면 밖으로 밀려나는 것처럼 기능 어설션이 놓치는 문제를 잡아냅니다.

예시 (Playwright)

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

test('dashboard looks right', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page).toHaveScreenshot('dashboard.png', {
    fullPage: true,
    mask: [page.getByTestId('last-updated')],
    maxDiffPixels: 100,
  });
});

test('pricing card', async ({ page }) => {
  await page.goto('/pricing');
  await expect(page.getByTestId('pro-plan')).toHaveScreenshot();
});

첫 실행은 기준 이미지가 없으므로 실패하면서 기준 이미지를 새로 기록합니다. 의도적으로 디자인을 바꾼 뒤에는 다음 명령으로 기준 이미지를 다시 생성합니다.

npx playwright test --update-snapshots

toHaveScreenshot은 웹 퍼스트 어설션입니다. 연속된 두 캡처가 일치할 때까지 스크린샷을 다시 찍으므로, 애니메이션 도중의 프레임을 비교하는 일을 피할 수 있습니다.

안정적으로 만드는 방법

• 기준 이미지와 실행 환경을 같게 맞추십시오. 폰트와 안티앨리어싱은 운영체제마다 다르기 때문에 Playwright는 브라우저와 플랫폼별로 기준 이미지를 저장합니다. CI에서 쓰는 것과 같은 Docker 이미지에서 생성하십시오.
• 동적 콘텐츠는 마스킹하십시오. 타임스탬프, 아바타, 광고, 실시간 데이터 차트는 항상 달라집니다.
• 시간과 데이터를 고정하십시오. 고정된 테스트 데이터를 쓰고, 필요하면 시계를 mock 처리하십시오.
• 애니메이션을 끄십시오. Playwright는 스크린샷을 찍을 때 기본적으로 CSS 애니메이션을 비활성화합니다.
• 전체 페이지보다 컴포넌트를 선호하십시오. 카드 하나의 스크린샷은 한 가지 이유로 실패하지만, 전체 페이지는 스무 가지 이유로 실패합니다.

흔한 실수

• diff를 보지도 않고 승인하는 것. 기준 이미지를 일괄 업데이트하면 스위트가 형식적인 도장 찍기가 됩니다.
• 모든 곳에 허용 오차 0을 적용하는 것. 미세한 렌더링 차이가 노이즈를 만듭니다. 작은 임곗값을 두되, 실제 회귀를 가릴 만큼 크게 잡지는 마십시오.
• 기능 테스트 대신 사용하는 것. 스크린샷은 합계가 올바른 위치에 있다는 것은 보여 줄 수 있어도, 올바른 숫자라는 것은 보여 주지 못합니다.