UI-statussen en animaties testen met Playwright
Hoe stabiele tests voor geanimeerde gebruikersinterface te schrijven met Playwright: tijd controleren met page.clock, verminderde beweging en donkere modus emuleren, en schermafbeeldingen met animaties uitgeschakeld.
Kern afhaalmaaltijd
Maak animatietests deterministisch: controleer de tijd met page.clock, die timers, requestAnimationFrame en prestaties omvat; emuleer gebruikersinstellingen met page.emulateMedia({reductieMotion, colorScheme }); beweren op staten in plaats van pixels in het midden van de animatie; en maak screenshots met animaties uitgeschakeld. Test het gereduceerde bewegingspad als een eersteklas geval.
Waarom animatietests schilferig zijn
Animaties zijn tijdsafhankelijk en de realtime varieert tussen runs en machines. Een screenshot dat 10 milliseconden te vroeg of te laat is gemaakt, toont een ander frame. De oplossing is om de tijd en instellingen te controleren, en om de toestanden te testen waar animaties tussen bewegen in plaats van individuele frames.
Controle tijd
Met de Clock API van Playwright kan een test een nepklok installeren en vervolgens gedurende een bepaalde tijd pauzeren, vooruitspoelen of draaien. Het omvat setTimeout, setInterval, requestAnimationFrame en prestaties, zodat u bijvoorbeeld snel vooruit kunt spoelen voorbij een laadvertraging en kunt controleren of de successtatus verschijnt.
Emuleer gebruikersinstellingen
page.emulateMedia() kan ReduceMotion instellen op "reduce" en colorScheme op "dark" of "light". Voer sleutelstromen uit met verminderde beweging om te bevestigen dat niets belangrijks afhangt van animatie, en in beide thema's om contrastproblemen op te vangen.
Stabiele schermafbeeldingen
Playwright Test kan schermafbeeldingen vergelijken met wait(page).toHaveScreenshot(), en schermafdrukopties omvatten animaties: "disabled", waardoor CSS-animaties en overgangen voor de opname worden gestopt. Gebruik visuele vergelijkingen voor eindtoestanden, en DOM- of toegankelijkheidsbeweringen voor gedrag.
Op canvas gebaseerde componenten testen
Canvasanimaties, zoals die getekend door de runtimes Lottie, Rive of ExodeUI, zijn niet zichtbaar in de DOM. Test de invoer die uw code verzendt en de gebeurtenissen die deze ontvangt, houd echt toegankelijke elementen naast het canvas en gebruik schermafbeeldingen voor visuele controles nadat de tijd is gecontroleerd.
Productie-implementatiefragment
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' });
});Toets Principles in om te onthouden
- Beheer de tijd met page.clock (timers, requestAnimationFrame, prestaties)
- Emuleer ReducedMotion en ColorScheme met page.emulateMedia
- Zet in op statussen en toegankelijke tekst, niet op pixels in het midden van de animatie
- Screenshot met animaties: "uitgeschakeld"
- Test het gereduceerde bewegingspad als een eersteklas geval
Veelgestelde vragen
Bronnen
- Clock — Playwright-documenten
- Page.emulateMedia and screenshot options — Playwright-documenten
- Visual comparisons — Playwright-documenten