Playwright ile Kullanıcı Arayüzü Durumlarını ve Animasyonları Test Etme
Playwright ile animasyonlu kullanıcı arayüzü için kararlı testler nasıl yazılır: page.clock ile zamanı kontrol etmek, azaltılmış hareket ve karanlık modu taklit etmek ve animasyonlar devre dışı bırakılmış ekran görüntüleri.
Ana nokta
Animasyon testlerini belirleyici hale getirin: zamanlayıcıları, requestAnimationFrame'i ve performansı kapsayan page.clock ile zamanı kontrol edin; page.emulateMedia({ azaltılmışMotion, colorScheme }); ile kullanıcı ayarlarını taklit edin animasyonun ortasındaki pikseller yerine durumlar üzerinde iddiada bulunun; ve animasyonlar devre dışıyken ekran görüntüleri alın. Azaltılmış hareket yolunu birinci sınıf bir durum olarak test edin.
Animasyon testleri neden düzensiz?
Animasyonlar zamana bağlıdır ve gerçek zaman, çalıştırmalar ve makineler arasında farklılık gösterir. 10 milisaniye erken veya geç alınan bir ekran görüntüsü farklı bir kareyi gösteriyor. Çözüm, zamanı ve ayarları kontrol etmek ve animasyonların tek tek kareler arasında hareket ettiği durumları test etmektir.
Kontrol süresi
Playwright'in Saat API'si, bir testin sahte bir saat yüklemesine ve ardından belirli bir süre boyunca süreyi duraklatmasına, ileri sarmasına veya çalıştırmasına olanak tanır. setTimeout, setInterval, requestAnimationFrame ve performansı kapsar; böylece örneğin bir yükleme gecikmesini hızlı ileri sarabilir ve başarı durumunun göründüğünü kontrol edebilirsiniz.
Kullanıcı ayarlarını taklit edin
page.emulateMedia(), azaltılmışMotion'ı "reduce" ve colorScheme'i "dark" veya "light" olarak ayarlayabilir. Önemli hiçbir şeyin animasyona bağlı olmadığını doğrulamak ve kontrast sorunlarını yakalamak için her iki temada da anahtar akışlarını azaltılmış hareketle çalıştırın.
Kararlı ekran görüntüleri
Playwright Test, ekran görüntülerini wait(page).toHaveScreenshot() ile karşılaştırabilir ve ekran görüntüsü seçenekleri, yakalama için CSS animasyonlarını ve geçişlerini durduran "disabled" animasyonlarını içerir. Son durumlar için görsel karşılaştırmaları, davranış için ise DOM veya erişilebilirlik iddialarını kullanın.
Tuval tabanlı bileşenleri test etme
Lottie, Rive veya ExodeUI çalışma zamanları tarafından çizilenler gibi tuval animasyonları DOM'da görünmez. Kodunuzun gönderdiği girdileri ve aldığı olayları test edin, gerçek erişilebilir öğeleri tuvalin yanında tutun ve zaman kontrol edildikten sonra görsel kontroller için ekran görüntülerini kullanın.
Üretim için uygulama örneği
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' });
});Hatırlanacak temel ilkeler
- page.clock ile kontrol süresi (zamanlayıcılar, requestAnimationFrame, performans)
- Page.emulateMedia ile azaltılmışMotion ve colorScheme'i taklit edin
- Orta animasyon pikselleri değil, durumlar ve erişilebilir metin konusunda iddiada bulunun
- Animasyonlu ekran görüntüsü: "devre dışı"
- Azaltılmış hareket yolunu birinci sınıf bir durum olarak test edin
Sık sorulan sorular
Kaynaklar
- Clock — Playwright belgeleri
- Page.emulateMedia and screenshot options — Playwright belgeleri
- Visual comparisons — Playwright belgeleri