Playwright を使用した UI 状態とアニメーションのテスト
Playwright を使用してアニメーション UI の安定したテストを作成する方法: page. Clock で時間を制御し、モーションを減らしてダーク モードをエミュレートし、アニメーションを無効にしたスクリーンショットを作成します。
核心
アニメーション テストを決定論的にします。タイマー、requestAnimationFrame、パフォーマンスをカバーする page. Clock で時間を制御します。 page.emulateMedia({ ReduceMotion, colorScheme }); でユーザー設定をエミュレートします。アニメーション中のピクセルではなく状態をアサートします。アニメーションを無効にしてスクリーンショットを撮ります。動きを減らしたパスを第一級のケースとしてテストします。
アニメーションのテストが不安定な理由
アニメーションは時間に依存し、実時間は実行とマシンによって異なります。 10 ミリ秒早くまたは遅く撮影されたスクリーンショットには、別のフレームが表示されます。修正方法は、時間と設定を制御し、アニメーションが個々のフレームではなくフレーム間で移動する状態をテストすることです。
制御時間
Playwright の Clock API を使用すると、テストで偽の時計をインストールし、設定した期間の一時停止、早送り、または実行時間を実現できます。 setTimeout、setInterval、requestAnimationFrame、およびパフォーマンスについて説明しているため、たとえば、読み込み遅延を過ぎて早送りし、成功状態が表示されることを確認できます。
ユーザー設定をエミュレートする
page.emulateMedia() は、reduceMotion を「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.クロックで時間を制御（タイマー、requestAnimationFrame、パフォーマンス）
- page.emulateMedia を使用して、reduceMotion と colorScheme をエミュレートします。
- アニメーション中のピクセルではなく、状態とアクセス可能なテキストに対してアサートします。
- アニメーション付きのスクリーンショット: 「無効」
- 動きを減らしたパスを第一級のケースとしてテストする
よくある質問
出典
- Clock — Playwright ドキュメント
- Page.emulateMedia and screenshot options — Playwright ドキュメント
- Visual comparisons — Playwright ドキュメント