Test des états et des animations de l'interface utilisateur avec Playwright
Comment écrire des tests stables pour une interface utilisateur animée avec Playwright : contrôler le temps avec page.clock, émuler le mouvement réduit et le mode sombre, et captures d'écran avec les animations désactivées.
À retenir
Rendre les tests d'animation déterministes : contrôlez le temps avec page.clock, qui couvre les minuteries, requestAnimationFrame et les performances ; émuler les paramètres utilisateur avec page.emulateMedia({ réduitMotion, colorScheme }); affirmer sur les états plutôt que sur les pixels en cours d'animation ; et prenez des captures d'écran avec les animations désactivées. Testez la trajectoire à mouvement réduit comme cas de première classe.
Pourquoi les tests d'animation sont instables
Les animations dépendent du temps et le temps réel varie selon les exécutions et les machines. Une capture d'écran prise 10 millisecondes plus tôt ou plus tard montre une image différente. Le correctif consiste à contrôler le temps et les paramètres, et à tester les états où les animations se déplacent entre les images plutôt qu'entre les images individuelles.
Temps de contrôle
L'API Clock de Playwright permet à un test d'installer une fausse horloge, puis de mettre en pause, d'avancer rapidement ou d'exécuter le temps pendant une durée définie. Il couvre setTimeout, setInterval, requestAnimationFrame et les performances, afin que vous puissiez, par exemple, avancer rapidement après un délai de chargement et vérifier que l'état de réussite apparaît.
Émuler les paramètres utilisateur
page.emulateMedia() peut définir ReductionMotion sur "réduire" et colorScheme sur "dark" ou "light". Exécutez les flux clés avec un mouvement réduit pour confirmer que rien d'important ne dépend de l'animation, et dans les deux thèmes pour détecter les problèmes de contraste.
Captures d'écran stables
Playwright Test peut comparer les captures d'écran avec expect(page).toHaveScreenshot(), et les options de capture d'écran incluent des animations : "désactivées", qui arrête les animations et les transitions CSS pour la capture. Utilisez des comparaisons visuelles pour les états finaux et des assertions DOM ou d'accessibilité pour le comportement.
Test des composants basés sur le canevas
Les animations de canevas, telles que celles dessinées par les runtimes Lottie, Rive ou ExodeUI, ne sont pas visibles dans le DOM. Testez les entrées que votre code envoie et les événements qu'il reçoit, conservez les éléments réels accessibles à côté du canevas et utilisez des captures d'écran pour les contrôles visuels une fois le temps contrôlé.
Extrait d’implémentation en production
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' });
});Principes clés à retenir
- Contrôlez le temps avec page.clock (minuteries, requestAnimationFrame, performances)
- Émulez réduitMotion et colorScheme avec page.emulateMedia
- Affirmez les états et le texte accessible, et non les pixels en cours d'animation
- Capture d'écran avec animations : "désactivé"
- Testez la trajectoire à mouvement réduit comme cas de première classe
Questions fréquentes
Sources
- Clock — Documents Playwright
- Page.emulateMedia and screenshot options — Documents Playwright
- Visual comparisons — Documents Playwright