Prueba de estados de interfaz de usuario y animaciones con Playwright
Cómo escribir pruebas estables para UI animada con Playwright: controlar el tiempo con page.clock, emular movimiento reducido y modo oscuro, y capturas de pantalla con animaciones deshabilitadas.
Idea clave
Haga que las pruebas de animación sean deterministas: controle el tiempo con page.clock, que cubre temporizadores, requestAnimationFrame y rendimiento; emular la configuración del usuario con page.emulateMedia({ reduceMotion, colorScheme }); afirmar en estados en lugar de píxeles en mitad de la animación; y tomar capturas de pantalla con las animaciones deshabilitadas. Pruebe la trayectoria de movimiento reducido como un caso de primera clase.
Por qué las pruebas de animación son inestables
Las animaciones dependen del tiempo y el tiempo real varía entre ejecuciones y máquinas. Una captura de pantalla tomada 10 milisegundos antes o después muestra un fotograma diferente. La solución es controlar el tiempo y la configuración, y probar los estados en que las animaciones se mueven entre fotogramas en lugar de fotogramas individuales.
controlar el tiempo
La API de reloj de Playwright permite que una prueba instale un reloj falso y luego pausar, adelantar o ejecutar el tiempo durante un período determinado. Cubre setTimeout, setInterval, requestAnimationFrame y rendimiento, por lo que puede, por ejemplo, adelantar un retraso de carga y comprobar que aparece el estado de éxito.
Emular la configuración del usuario
page.emulateMedia() puede configurar reduceMotion en "reducir" y colorScheme en "oscuro" o "claro". Ejecute flujos clave con movimiento reducido para confirmar que nada importante depende de la animación y en ambos temas para detectar problemas de contraste.
Capturas de pantalla estables
Playwright Test puede comparar capturas de pantalla con expect(page).toHaveScreenshot(), y las opciones de captura de pantalla incluyen animaciones: "disabled", que detiene las animaciones y transiciones de CSS para la captura. Utilice comparaciones visuales para estados finales y DOM o afirmaciones de accesibilidad para el comportamiento.
Prueba de componentes basados en lienzo
Las animaciones de lienzo, como las dibujadas por los tiempos de ejecución Lottie, Rive o ExodeUI, no son visibles en el DOM. Pruebe las entradas que envía su código y los eventos que recibe, mantenga elementos reales accesibles junto al lienzo y use capturas de pantalla para verificaciones visuales una vez controlado el tiempo.
Fragmento de implementación en producción
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' });
});Principios clave para recordar
- Controlar el tiempo con page.clock (temporizadores, requestAnimationFrame, rendimiento)
- Emule el movimiento reducido y el esquema de color con page.emulateMedia
- Afirmar los estados y el texto disponible, no los píxeles en mitad de la animación.
- Captura de pantalla con animaciones: "deshabilitado"
- Pruebe la trayectoria de movimiento reducido como un caso de primera clase
Preguntas frecuentes
Fuentes
- Clock — Documentos Playwright
- Page.emulateMedia and screenshot options — Documentos Playwright
- Visual comparisons — Documentos Playwright