Test af brugergrænsefladetilstande og animationer med Playwright
Sådan skriver du stabile tests til animeret brugergrænseflade med Playwright: styring af tid med page.clock, emulering af reduceret bevægelse og mørk tilstand og skærmbilleder med animationer deaktiveret.
Core Takeaway
Gør animationstests deterministiske: styr tid med page.clock, som dækker timere, requestAnimationFrame og ydeevne; emuler brugerindstillinger med page.emulateMedia({redMotion, colorScheme }); hævde på tilstande snarere end midt-animation pixels; og tag skærmbilleder med animationer deaktiveret. Test den reducerede bevægelsesbane som en førsteklasses sag.
Hvorfor animationstests er skæve
Animationer afhænger af tid, og realtid varierer mellem løb og maskiner. Et skærmbillede taget 10 millisekunder for tidligt eller sent viser et andet billede. Rettelsen er at kontrollere tid og indstillinger, og at teste tilstandene, animationer bevæger sig mellem i stedet for individuelle frames.
Kontroltid
Playwright's Clock API lader en test installere et falsk ur og derefter pause, spole frem eller køre tid i en bestemt varighed. Det dækker setTimeout, setInterval, requestAnimationFrame og ydeevne, så du for eksempel kan spole frem forbi en indlæsningsforsinkelse og kontrollere, at succestilstanden vises.
Efterlign brugerindstillinger
page.emulateMedia() kan indstille reductionMotion til "reducere" og colorScheme til "mørk" eller "lys". Kør nøgleflows med reduceret bevægelse for at bekræfte, at intet vigtigt afhænger af animation, og i begge temaer for at fange kontrastproblemer.
Stabile skærmbilleder
Playwright Test kan sammenligne skærmbilleder med expect(page).toHaveScreenshot(), og skærmbilleder inkluderer animationer: "deaktiveret", som stopper CSS-animationer og overgange for optagelsen. Brug visuelle sammenligninger for sluttilstande og DOM eller tilgængelighedspåstande for adfærd.
Test af lærredsbaserede komponenter
Lærredsanimationer, såsom dem tegnet af Lottie, Rive eller ExodeUI runtimes, er ikke synlige i DOM. Test de input, din kode sender, og de begivenheder, den modtager, hold rigtige tilgængelige elementer ved siden af lærredet, og brug skærmbilleder til visuelle kontroller, efter at tiden er kontrolleret.
Snippet til produktionsimplementering
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 for at huske
- Styr tid med page.clock (timere, requestAnimationFrame, ydeevne)
- Efterlign reduceret bevægelse og farveskema med page.emulateMedia
- Hævd på tilstande og tilgængelig tekst, ikke midt-animationspixel
- Skærmbillede med animationer: "deaktiveret"
- Test den reducerede bevægelsesbane som en førsteklasses sag
Ofte stillede spørgsmål
Kilder
- Clock — Playwright dokumenter
- Page.emulateMedia and screenshot options — Playwright dokumenter
- Visual comparisons — Playwright dokumenter