Testarea stărilor UI și a animațiilor cu Playwright
Cum să scrieți teste stabile pentru interfața de utilizare animată cu Playwright: controlul timpului cu page.clock, emularea mișcării reduse și a modului întunecat și capturi de ecran cu animațiile dezactivate.
Core Takeaway
Faceți testele de animație deterministe: controlați timpul cu page.clock, care acoperă cronometre, requestAnimationFrame și performanță; emulați setările utilizatorului cu page.emulateMedia({ reducedMotion, colorScheme }); afirmă mai degrabă stări decât pixelii de la mijlocul animației; și faceți capturi de ecran cu animațiile dezactivate. Testați calea cu mișcare redusă ca un caz de primă clasă.
De ce testele de animație sunt nesigure
Animațiile depind de timp, iar timpul real variază între rulări și mașini. O captură de ecran făcută cu 10 milisecunde mai devreme sau mai târziu arată un cadru diferit. Soluția este de a controla timpul și setările și de a testa stările în care animațiile se deplasează mai degrabă decât cadrele individuale.
Controlul timpului
API-ul Clock de la Playwright permite unui test să instaleze un ceas fals și apoi să întrerupă, să înainteze rapid sau să ruleze timp pentru o durată stabilită. Acesta acoperă setTimeout, setInterval, requestAnimationFrame și performanță, astfel încât, de exemplu, să puteți derula rapid înainte după o întârziere de încărcare și să verificați dacă apare starea de succes.
Emulați setările utilizatorului
page.emulateMedia() poate seta reducedMotion la „reduce” și colorScheme la „dark” sau „light”. Rulați fluxurile de taste cu mișcare redusă pentru a confirma că nimic important nu depinde de animație și, în ambele teme, pentru a detecta problemele de contrast.
Capturi de ecran stabile
Testul Playwright poate compara capturile de ecran cu expect(page).toHaveScreenshot(), iar opțiunile de captură de ecran includ animații: „dezactivat”, care oprește animațiile și tranzițiile CSS pentru captură. Utilizați comparații vizuale pentru stările finale și afirmațiile DOM sau de accesibilitate pentru comportament.
Testarea componentelor bazate pe canvas
Animațiile canvas, cum ar fi cele desenate de Lottie, Rive sau ExodeUI, nu sunt vizibile în DOM. Testează intrările pe care le trimite codul tău și evenimentele pe care le primește, păstrează elemente reale accesibile alături de pânză și folosește capturi de ecran pentru verificări vizuale după ce timpul este controlat.
Fragment de implementare a producției
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' });
});Cheie Principles de reținut
- Controlați timpul cu page.clock (cronometre, requestAnimationFrame, performanță)
- Emulați reducedMotion și colorScheme cu page.emulateMedia
- Afirmați asupra stărilor și a textului accesibil, nu asupra pixelilor din mijlocul animației
- Captură de ecran cu animații: „dezactivat”
- Testați calea cu mișcare redusă ca un caz de primă clasă
Întrebări frecvente
Surse
- Clock — Playwright documente
- Page.emulateMedia and screenshot options — Playwright documente
- Visual comparisons — Playwright documente