Cómo probar animaciones automáticamente en Playwright
Aprende a probar animaciones y máquinas de estado en Playwright: capturas visuales sin errores intermitentes, emulación de movimiento reducido y control de tiempo.
Idea clave
Para probar animaciones de forma fiable en Playwright, combina dos enfoques: desactiva las animaciones para capturas de regresión visual deterministas sin falsos positivos, y prueba el comportamiento interactivo esperando a que las máquinas de estado alcancen reposo mediante page.waitForFunction() o locator.toBeVisible(). Comprueba la accesibilidad emulando prefers-reduced-motion con page.emulateMedia().
El problema de las pruebas visuales con animaciones en marcha
Tomar capturas mientras una animación transcurre produce fallos intermitentes constantes porque los fotogramas varían por milisegundos entre ejecuciones. Playwright soluciona esto por defecto con animations: 'disabled' al capturar pantallas, forzando los elementos a su fotograma final.
Esperar a muelles físicos y máquinas de estado
A diferencia de las transiciones CSS con tiempos fijos, los muelles se estabilizan cuando la velocidad cae bajo un umbral. Para asegurar que un modal o panel terminó de abrirse antes de interactuar, espera a que la matriz transform se estabilice o comprueba los atributos de estado.
- Usa toHaveScreenshot({ animations: 'disabled' }) para evitar fallos intermitentes
- Emula prefers-reduced-motion: 'reduce' para probar modos accesibles
- Comprueba salidas de estado en lugar de usar pausas arbitrarias de setTimeout
- Verifica atributos como aria-expanded en lugar de posiciones en píxeles
Emulación de prefers-reduced-motion en Playwright
Verifica que tu aplicación respeta las preferencias del usuario creando un conjunto de pruebas con page.emulateMedia({ reducedMotion: 'reduce' }). Comprueba que los diálogos abren de forma inmediata sin desplazamientos.
Virtualización del reloj para probar líneas temporales
Playwright permite avanzar el tiempo del sistema artificialmente mediante page.clock.fastForward('00:02'). Esto permite validar secuencias complejas de varios segundos en milisegundos sin alargar la integración continua.
Principios clave para recordar
- Desactiva transiciones durante capturas visuales para evitar pruebas inestables
- Verifica atributos de estado como aria-expanded en lugar de pausas temporales fijas
- Prueba tanto el modo normal como el reducido mediante emulateMedia
- Usa el control de reloj de Playwright para acelerar secuencias en CI
Preguntas frecuentes
Fuentes
- Playwright Visual Comparisons — Microsoft
- Playwright Clock API — Microsoft