Menguji Status dan Animasi UI dengan Playwright
Cara menulis pengujian stabil untuk UI animasi dengan Playwright: mengontrol waktu dengan page.clock, meniru gerakan yang dikurangi dan mode gelap, serta tangkapan layar dengan animasi dinonaktifkan.
Pengambilan Inti
Jadikan pengujian animasi bersifat deterministik: kontrol waktu dengan page.clock, yang mencakup pengatur waktu, requestAnimationFrame, dan kinerja; meniru pengaturan pengguna dengan page.emulateMedia({ dikurangiMotion, colorScheme }); menegaskan status daripada piksel pertengahan animasi; dan ambil tangkapan layar dengan animasi dinonaktifkan. Uji jalur gerak tereduksi sebagai kasus kelas satu.
Mengapa tes animasi tidak stabil
Animasi bergantung pada waktu, dan waktu nyata bervariasi antara proses dan mesin. Tangkapan layar yang diambil 10 milidetik lebih awal atau lebih lambat menunjukkan bingkai yang berbeda. Cara mengatasinya adalah dengan mengontrol waktu dan pengaturan, serta menguji status pergerakan animasi di antara frame, bukan frame individual.
Kontrol waktu
API Jam Playwright memungkinkan pengujian memasang jam palsu dan kemudian menjeda, mempercepat, atau menjalankan waktu untuk durasi tertentu. Ini mencakup setTimeout, setInterval, requestAnimationFrame, dan kinerja, sehingga Anda dapat, misalnya, mempercepat melewati penundaan pemuatan dan memeriksa status keberhasilan yang muncul.
Meniru pengaturan pengguna
page.emulateMedia() dapat menyetel ReduceMotion menjadi "reduce" dan colorScheme menjadi "dark" atau "light". Jalankan alur utama dengan gerakan yang dikurangi untuk memastikan bahwa tidak ada hal penting yang bergantung pada animasi, dan di kedua tema untuk mengatasi masalah kontras.
Tangkapan layar yang stabil
Playwright Test dapat membandingkan tangkapan layar dengan ekspektasi(halaman).toHaveScreenshot(), dan opsi tangkapan layar menyertakan animasi: "dinonaktifkan", yang menghentikan animasi dan transisi CSS untuk pengambilan. Gunakan perbandingan visual untuk status akhir, dan pernyataan DOM atau aksesibilitas untuk perilaku.
Menguji komponen berbasis kanvas
Animasi kanvas, seperti yang digambar oleh runtime Lottie, Rive, atau ExodeUI, tidak terlihat di DOM. Uji input yang dikirimkan kode Anda dan peristiwa yang diterimanya, pertahankan elemen nyata yang dapat diakses di samping kanvas, dan gunakan tangkapan layar untuk pemeriksaan visual setelah waktu dikontrol.
Cuplikan Implementasi Produksi
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' });
});Kunci Principles untuk Diingat
- Kontrol waktu dengan page.clock (timer, requestAnimationFrame, kinerja)
- Tirulah ReduceMotion dan ColorScheme dengan page.emulateMedia
- Tegaskan pada status dan teks yang dapat diakses, bukan piksel pertengahan animasi
- Tangkapan layar dengan animasi: "dinonaktifkan"
- Uji jalur gerak tereduksi sebagai kasus kelas satu
Pertanyaan yang Sering Diajukan
Sumber
- Clock — dokumen Playwright
- Page.emulateMedia and screenshot options — dokumen Playwright
- Visual comparisons — dokumen Playwright