Test degli stati dell'interfaccia utente e delle animazioni con Playwright
Come scrivere test stabili per l'interfaccia utente animata con Playwright: controllo del tempo con page.clock, emulazione del movimento ridotto e della modalità oscura e screenshot con animazioni disabilitate.
Punto chiave
Rendi deterministici i test di animazione: controlla il tempo con page.clock, che copre timer, requestAnimationFrame e prestazioni; emulare le impostazioni dell'utente con page.emulateMedia({ reduceMotion, colorScheme }); affermare sugli stati anziché sui pixel a metà animazione; e acquisisci screenshot con le animazioni disabilitate. Testare il percorso a movimento ridotto come caso di prima classe.
Perché i test di animazione sono instabili
Le animazioni dipendono dal tempo e il tempo reale varia a seconda delle corse e delle macchine. Uno screenshot acquisito con 10 millisecondi di anticipo o di ritardo mostra un fotogramma diverso. La soluzione consiste nel controllare il tempo e le impostazioni e nel testare gli stati in cui le animazioni si spostano tra i singoli fotogrammi anziché tra i singoli fotogrammi.
Tempo di controllo
L'API Clock di Playwright consente a un test di installare un orologio falso e quindi di mettere in pausa, avanzare velocemente o eseguire il tempo per una durata prestabilita. Copre setTimeout, setInterval, requestAnimationFrame e prestazioni, quindi puoi, ad esempio, avanzare rapidamente oltre un ritardo di caricamento e verificare che venga visualizzato lo stato di successo.
Emula le impostazioni dell'utente
page.emulateMedia() può impostare reduceMotion su "ridurre" e colorScheme su "scuro" o "chiaro". Esegui i flussi chiave con movimento ridotto per confermare che nulla di importante dipende dall'animazione e in entrambi i temi per rilevare problemi di contrasto.
Screenshot stabili
Playwright Test può confrontare gli screenshot con wait(page).toHaveScreenshot() e le opzioni degli screenshot includono animazioni: "disabled", che interrompe le animazioni e le transizioni CSS per l'acquisizione. Utilizza confronti visivi per gli stati finali e DOM o affermazioni di accessibilità per il comportamento.
Test di componenti basati su Canvas
Le animazioni Canvas, come quelle disegnate dai runtime Lottie, Rive o ExodeUI, non sono visibili nel DOM. Testa gli input inviati dal tuo codice e gli eventi che riceve, mantieni elementi reali accessibili accanto all'area di disegno e utilizza screenshot per controlli visivi dopo il controllo del tempo.
Estratto di implementazione in produzione
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' });
});Principi chiave da ricordare
- Controlla il tempo con page.clock (timer, requestAnimationFrame, prestazioni)
- Emula ReduceMotion e colorScheme con page.emulateMedia
- Fai valere gli stati e il testo accessibile, non i pixel a metà dell'animazione
- Screenshot con animazioni: "disabilitato"
- Testare il percorso a movimento ridotto come caso di prima classe
Domande frequenti
Fonti
- Clock — Playwright documenti
- Page.emulateMedia and screenshot options — Playwright documenti
- Visual comparisons — Playwright documenti