Comment tester automatiquement les animations dans Playwright
Découvrez comment tester les animations et machines d'état dans Playwright : instantanés visuels fiables, émulation du mouvement réduit et contrôle temporel.
À retenir
Pour tester des animations avec fiabilité dans Playwright, combinez deux modes : d'abord, désactivez les animations pour des captures de régression visuelle déterministes sans faux positifs ; ensuite, testez les interactions en attendant que les machines d'état atteignent leur repos via page.waitForFunction() ou locator.toBeVisible(). Validez l'accessibilité en émulant prefers-reduced-motion avec page.emulateMedia().
Le piège des tests visuels sur animations en cours
Capturer une page pendant qu'une animation se déroule génère des échecs aléatoires permanents car les images varient de quelques millisecondes entre chaque exécution. Playwright neutralise cela par défaut avec animations: 'disabled' lors des captures, forçant les éléments sur leur image finale.
Attendre la stabilisation des ressorts et machines d'état
Contrairement aux transitions CSS à durée fixe, les ressorts physiques s'arrêtent dès que la vélocité passe sous un seuil. Pour vous assurer qu'un dialogue ou panneau a fini de s'ouvrir avant d'interagir, attendez que sa matrice transform se stabilise ou vérifiez les attributs d'état.
- Utilisez toHaveScreenshot({ animations: 'disabled' }) contre les faux positifs
- Émulez prefers-reduced-motion: 'reduce' pour valider les modes accessibles
- Contrôlez les attributs d'état plutôt que d'insérer des délais arbitraires setTimeout
- Validez des attributs ARIA comme aria-expanded plutôt que des positions en pixels
Émuler prefers-reduced-motion dans Playwright
Assurez-vous que votre application respecte les préférences utilisateur en écrivant des tests dédiés avec page.emulateMedia({ reducedMotion: 'reduce' }). Vérifiez que les boîtes de dialogue s'affichent immédiatement sans glissement.
Virtualisation de l'horloge pour tester les lignes de temps
Playwright permet d'avancer le temps système artificiellement via page.clock.fastForward('00:02'). Cela permet de tester des séquences de fête de plusieurs secondes en quelques millisecondes sans ralentir vos pipelines d'intégration continue.
Principes clés à retenir
- Désactivez les transitions lors des captures visuelles pour fiabiliser la CI
- Attendez les attributs d'état (aria-expanded) plutôt que des temporisations fixes
- Testez les modes standard et réduit grâce à emulateMedia
- Employez le contrôle d'horloge de Playwright pour accélérer les tests d'animation
Questions fréquentes
Sources
- Playwright Visual Comparisons — Microsoft
- Playwright Clock API — Microsoft