Testování stavů uživatelského rozhraní a animací pomocí Playwright
Jak psát stabilní testy pro animované uživatelské rozhraní pomocí Playwright: ovládání času pomocí page.clock, emulace sníženého pohybu a tmavého režimu a snímky obrazovky s vypnutými animacemi.
Core Takeaway
Udělejte z testů animací deterministické: ovládejte čas pomocí page.clock, který pokrývá časovače, requestAnimationFrame a výkon; emulovat uživatelská nastavení pomocí page.emulateMedia({ limitedMotion, colorScheme }); tvrdit spíše stavy než pixely uprostřed animace; a pořizovat snímky obrazovky s vypnutými animacemi. Otestujte cestu se sníženým pohybem jako prvotřídní případ.
Proč jsou animační testy nespolehlivé
Animace závisí na čase a reálný čas se mezi běhy a stroji liší. Snímek obrazovky pořízený o 10 milisekund dříve nebo později ukazuje jiný snímek. Oprava spočívá v ovládání času a nastavení a v testování stavů, kdy se animace pohybují mezi jednotlivými snímky, nikoli mezi jednotlivými snímky.
Kontrolní čas
Playwright's Clock API umožňuje test nainstalovat falešné hodiny a poté je pozastavit, převinout vpřed nebo spustit čas po nastavenou dobu. Pokrývá setTimeout, setInterval, requestAnimationFrame a výkon, takže můžete například rychle přejít přes zpoždění načítání a zkontrolovat, zda se objeví stav úspěchu.
Emulovat uživatelská nastavení
page.emulateMedia() může nastavit limitedMotion na "reduce" a colorScheme na "dark" nebo "light". Spusťte klíčové toky se sníženým pohybem, abyste potvrdili, že na animaci nezávisí nic důležitého, a v obou tématech zachytíte problémy s kontrastem.
Stabilní snímky obrazovky
Test Playwright dokáže porovnat snímky obrazovky s funkcí expect(page).toHaveScreenshot() a možnosti snímku obrazovky zahrnují animace: "disabled", která zastaví animace a přechody CSS pro zachycení. Použijte vizuální srovnání pro koncové stavy a DOM nebo prohlášení o usnadnění pro chování.
Testování komponent na bázi plátna
Animace plátna, jako jsou ty nakreslené běhovými moduly Lottie, Rive nebo ExodeUI, nejsou v DOM viditelné. Otestujte vstupy, které váš kód odesílá, a události, které přijímá, udržujte na plátně skutečně přístupné prvky a po kontrole času používejte snímky obrazovky pro vizuální kontrolu.
Fragment implementace výroby
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' });
});Klíč Principle k zapamatování
- Ovládání času pomocí page.clock (časovače, requestAnimationFrame, výkon)
- Emulujte limitedMotion a colorScheme pomocí page.emulateMedia
- Zaměřte se na stavy a přístupný text, nikoli na pixely uprostřed animace
- Snímek obrazovky s animacemi: "zakázáno"
- Otestujte cestu se sníženým pohybem jako prvotřídní případ
Často kladené otázky
Zdroje
- Clock — Dokumenty Playwright
- Page.emulateMedia and screenshot options — Dokumenty Playwright
- Visual comparisons — Dokumenty Playwright