Tester brukergrensesnitttilstander og animasjoner med Playwright
Hvordan skrive stabile tester for animert brukergrensesnitt med Playwright: kontroll av tid med page.clock, emulering av redusert bevegelse og mørk modus, og skjermbilder med animasjoner deaktivert.
Kjerne takeaway
Gjør animasjonstester deterministiske: kontroller tid med page.clock, som dekker tidtakere, requestAnimationFrame og ytelse; emuler brukerinnstillinger med page.emulateMedia({redusert bevegelse, fargeskjema }); hevde på tilstander i stedet for midtanimasjonspiksler; og ta skjermbilder med animasjoner deaktivert. Test den reduserte bevegelsesbanen som en førsteklasses sak.
Hvorfor animasjonstester er ustabile
Animasjoner avhenger av tid, og sanntid varierer mellom løp og maskiner. Et skjermbilde tatt 10 millisekunder tidlig eller sent viser en annen ramme. Løsningen er å kontrollere tid og innstillinger, og å teste tilstandene animasjoner beveger seg mellom i stedet for individuelle rammer.
Kontrolltid
Playwrights Clock API lar en test installere en falsk klokke og deretter pause, spole fremover eller kjøre tid for en bestemt varighet. Den dekker setTimeout, setInterval, requestAnimationFrame og ytelse, slik at du for eksempel kan spole fremover forbi en lasteforsinkelse og sjekke suksessstatusen vises.
Emuler brukerinnstillinger
page.emulateMedia() kan sette reductionMotion til "reduce" og colorScheme til "dark" eller "light". Kjør nøkkelflyt med redusert bevegelse for å bekrefte at ingenting viktig avhenger av animasjon, og i begge temaene for å fange opp kontrastproblemer.
Stabile skjermbilder
Playwright Test kan sammenligne skjermbilder med expect(page).toHaveScreenshot(), og skjermbildealternativer inkluderer animasjoner: "deaktivert", som stopper CSS-animasjoner og overganger for fangst. Bruk visuelle sammenligninger for slutttilstander, og DOM eller tilgjengelighetspåstander for atferd.
Testing av lerretsbaserte komponenter
Canvas-animasjoner, for eksempel de som er tegnet av Lottie, Rive eller ExodeUI kjøretider, er ikke synlige i DOM. Test inngangene koden din sender og hendelsene den mottar, hold ekte tilgjengelige elementer ved siden av lerretet, og bruk skjermbilder for visuelle kontroller etter at tiden er kontrollert.
Snippet for produksjonsimplementering
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' });
});Tast Principles å huske
- Kontroller tid med page.clock (tidtakere, requestAnimationFrame, ytelse)
- Emuler redusert bevegelse og fargeskjema med page.emulateMedia
- Påstå om tilstander og tilgjengelig tekst, ikke midtanimasjonspiksler
- Skjermbilde med animasjoner: "deaktivert"
- Test den reduserte bevegelsesbanen som en førsteklasses sak
Ofte stilte spørsmål
Kilder
- Clock — Playwright dokumenter
- Page.emulateMedia and screenshot options — Playwright dokumenter
- Visual comparisons — Playwright dokumenter