Playwright로 UI 상태 및 애니메이션 테스트
Playwright를 사용하여 애니메이션 UI에 대한 안정적인 테스트를 작성하는 방법: page.clock으로 시간 제어, 모션 감소 및 다크 모드 에뮬레이션, 애니메이션이 비활성화된 스크린샷.
핵심 포인트
애니메이션 테스트를 결정적으로 만듭니다. 타이머, requestAnimationFrame 및 성능을 다루는 page.clock으로 시간을 제어합니다. page.emulateMedia({ ReducedMotion, colorScheme })로 사용자 설정을 에뮬레이트합니다. 애니메이션 중간 픽셀이 아닌 상태를 주장합니다. 애니메이션을 비활성화한 상태에서 스크린샷을 찍습니다. 일류 사례로 모션 감소 경로를 테스트합니다.
애니메이션 테스트가 불안정한 이유
애니메이션은 시간에 따라 달라지며 실제 시간은 실행과 기계에 따라 다릅니다. 10밀리초 일찍 또는 늦게 찍은 스크린샷은 다른 프레임을 보여줍니다. 해결 방법은 시간과 설정을 제어하고 개별 프레임이 아닌 애니메이션 간 이동 상태를 테스트하는 것입니다.
제어 시간
Playwright의 시계 API를 사용하면 테스트에서 가짜 시계를 설치한 다음 설정된 기간 동안 일시 중지, 빨리 감기 또는 실행 시간을 사용할 수 있습니다. 여기에는 setTimeout, setInterval, requestAnimationFrame 및 성능이 포함되어 있으므로 예를 들어 로딩 지연을 지나서 빨리 감고 성공 상태가 나타나는지 확인할 수 있습니다.
사용자 설정 에뮬레이션
page.emulateMedia()는 ReducedMotion을 "reduce"로 설정하고 colorScheme을 "dark" 또는 "light"로 설정할 수 있습니다. 모션을 줄인 상태에서 키 흐름을 실행하여 애니메이션에 중요한 것이 없는지 확인하고 두 테마 모두에서 대비 문제를 파악합니다.
안정적인 스크린샷
Playwright 테스트는 스크린샷을 Expect(page).toHaveScreenshot()과 비교할 수 있으며 스크린샷 옵션에는 CSS 애니메이션과 캡처 전환을 중지하는 애니메이션 "비활성화"가 포함됩니다. 최종 상태에 대해서는 시각적 비교를 사용하고 동작에 대해서는 DOM 또는 접근성 주장을 사용하세요.
캔버스 기반 구성 요소 테스트
Lottie, Rive 또는 ExodeUI 런타임으로 그린 것과 같은 캔버스 애니메이션은 DOM에 표시되지 않습니다. 코드가 보내는 입력과 수신하는 이벤트를 테스트하고, 캔버스 옆에 실제 액세스 가능한 요소를 유지하고, 시간이 제어된 후 시각적 확인을 위해 스크린샷을 사용하세요.
프로덕션 구현 예시
import { test, expect } from '@playwright/test';
test('save button shows success, also with reduced motion', async ({ page }) => {
await page.clock.install(); // fake timers + rAF
await page.emulateMedia({ reducedMotion: 'reduce' }); // test the calm path
await page.goto('/settings');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByRole('status')).toHaveText('Saving…');
await page.clock.runFor(2000); // skip the wait deterministically
await expect(page.getByRole('status')).toHaveText('Saved');
await expect(page).toHaveScreenshot('saved.png', { animations: 'disabled' });
});기억할 핵심 원칙
- page.clock으로 시간 제어(타이머, requestAnimationFrame, 성능)
- page.emulateMedia를 사용하여 ReducedMotion 및 colorScheme을 에뮬레이트합니다.
- 애니메이션 중간 픽셀이 아닌 상태 및 액세스 가능한 텍스트에 대해 어설션
- 애니메이션이 포함된 스크린샷: '비활성화됨'
- 일류 사례로 모션 감소 경로 테스트
자주 묻는 질문
출처
- Clock — Playwright 문서
- Page.emulateMedia and screenshot options — Playwright 문서
- Visual comparisons — Playwright 문서