Testovanie stavov používateľského rozhrania a animácií pomocou Playwright
Ako písať stabilné testy pre animované používateľské rozhranie so Playwright: ovládanie času pomocou page.clock, emulácia zníženého pohybu a tmavého režimu a snímky obrazovky s vypnutými animáciami.
Core Takeaway
Urobte testy animácií deterministickými: kontrolujte čas pomocou page.clock, ktorý pokrýva časovače, requestAnimationFrame a výkon; emulovať používateľské nastavenia pomocou page.emulateMedia({ reductionMotion, colorScheme }); uplatňovať skôr stavy než pixely strednej animácie; a urobte snímky obrazovky s vypnutými animáciami. Otestujte cestu so zníženým pohybom ako prvotriedny prípad.
Prečo sú animačné testy nekvalitné
Animácie závisia od času a reálny čas sa medzi behom a strojmi líši. Snímka obrazovky urobená o 10 milisekúnd skôr alebo neskôr zobrazuje inú snímku. Opravou je ovládanie času a nastavení a testovanie animácií stavov, ktoré sa pohybujú medzi jednotlivými snímkami, nie medzi jednotlivými snímkami.
Kontrolný čas
Rozhranie Clock API Playwright umožňuje testom nainštalovať falošné hodiny a potom ich pozastaviť, previnúť dopredu alebo spustiť na nastavenú dobu. Zahŕňa nastavenia setTimeout, setInterval, requestAnimationFrame a výkon, takže môžete napríklad rýchlo prejsť po oneskorení načítania a skontrolovať, či sa zobrazuje stav úspechu.
Emulovať používateľské nastavenia
page.emulateMedia() môže nastaviť Znížený pohyb na "zmenšiť" a colorScheme na "tmavý" alebo "svetlý". Spúšťajte kľúčové toky so zníženým pohybom, aby ste potvrdili, že nič dôležité nezávisí od animácie a v oboch témach, aby ste zachytili problémy s kontrastom.
Stabilné snímky obrazovky
Test Playwright dokáže porovnať snímky obrazovky s programom expect(page).toHaveScreenshot() a možnosti snímky obrazovky zahŕňajú animácie: „disabled“, ktoré zastavia animácie a prechody CSS na zachytenie. Použite vizuálne porovnania pre koncové stavy a DOM alebo tvrdenia dostupnosti pre správanie.
Testovanie komponentov na báze plátna
Animácie plátna, ako napríklad tie, ktoré boli nakreslené runtimemi Lottie, Rive alebo ExodeUI, nie sú v DOM viditeľné. Otestujte vstupy, ktoré váš kód odosiela, a udalosti, ktoré prijíma, ponechajte reálne prístupné prvky vedľa plátna a použite snímky obrazovky na vizuálne kontroly po kontrole času.
Snippet implementácie 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' });
});Kľúč Principle na zapamätanie
- Ovládanie času pomocou page.clock (časovače, requestAnimationFrame, výkon)
- Emulujte redukovaný pohyb a colorScheme pomocou page.emulateMedia
- Uplatnite sa na stavoch a dostupnom texte, nie na pixeloch uprostred animácie
- Snímka obrazovky s animáciami: "zakázané"
- Otestujte cestu so zníženým pohybom ako prvotriedny prípad
Často kladené otázky
Zdroje
- Clock — Dokumenty Playwright
- Page.emulateMedia and screenshot options — Dokumenty Playwright
- Visual comparisons — Dokumenty Playwright