Cuando un test falla, la pregunta más difícil no es qué salió mal, sino en qué momento exacto ocurrió el problema. Playwright ofrece una herramienta poderosa llamada Tracing que permite reconstruir paso a paso todo lo que sucedió durante la ejecución de un test, desde capturas de pantalla hasta las llamadas de red y el DOM completo. Entender cómo funciona puede ahorrarte horas de frustración al depurar pruebas automatizadas.
¿Cómo se activa Playwright Tracing desde la terminal?
Por defecto, la funcionalidad de tracing viene desactivada en Playwright. Para habilitarla, se utiliza un comando específico en la terminal de Visual Studio Code [01:10]:
bash
npx playwright test tiendaonline.spec.ts --trace on
El parámetro --trace on es la clave. Sin él, Playwright ejecuta los tests normalmente pero no genera los archivos de rastreo. Una vez que los tests terminan de correr, se genera un archivo .zip que contiene toda la información del trace.
Para visualizar los resultados, se abre el reporte con el comando que ya conocemos:
bash
npx playwright show-report
Al abrir el reporte, aparece un pequeño ícono con tres barras que indica que los archivos de trace se han generado correctamente [02:05]. Al hacer clic, se despliegan los pasos del test y una nueva sección llamada Traces, desde donde puedes descargar el archivo o abrir directamente la vista interactiva.
¿Qué información revela la vista de Traces?
La vista de Traces presenta una línea de tiempo visual que muestra screenshots secuenciales de todo lo que hizo el test desde el inicio hasta el final [02:30]. Puedes pasar el mouse sobre cada momento y observar exactamente qué estaba ocurriendo en pantalla.
¿Por qué el panel central no es una simple captura de pantalla?
Esto es probablemente lo más sorprendente de la herramienta. El panel central muestra un DOM renderizado real, no una imagen estática [03:45]. Esto significa que puedes:
- Inspeccionar elementos HTML como si estuvieras en el navegador.
- Ver la jerarquía de etiquetas: contenedores, listas, imágenes y enlaces.
- Identificar qué elemento exacto recibió el clic, señalado con un punto rojo.
Esta capacidad permite detectar si un elemento no se pintó correctamente o si algo no terminó de cargarse durante la ejecución.
¿Qué diferencia hay entre before y after en cada acción?
Cada acción en el menú izquierdo tiene dos estados: before y after [04:40]. El estado before muestra cómo se veía la aplicación antes de ejecutar la acción, mientras que after muestra el resultado inmediato. Si el after aparece en blanco, puede significar que la aplicación web estaba tardando en cargar después de un clic, lo cual es información valiosa para depurar problemas de rendimiento.
¿Qué datos adicionales ofrece el panel derecho?
El panel derecho del visor de Traces contiene pestañas con información detallada [05:15]:
- Duración y tiempos de espera: cuánto tiempo tomó cada acción y cuánto esperó el test.
- Logs: los pasos internos que Playwright ejecutó automáticamente, como verificar que un elemento sea visible, esté estable y habilitado antes de hacer autoscroll y clic [05:30].
- Consola: errores o mensajes del navegador en ese instante.
- Network: todas las llamadas de red realizadas durante la acción, incluyendo archivos CSS y otros recursos que se estaban cargando [06:00].
- Source: la línea exacta de tu archivo de prueba que disparó la acción, por ejemplo
await page.locator(...).click() [06:20].
Además, la metadata incluye información como el navegador utilizado, si fue ejecutado en modo móvil, el tamaño del viewport y la ubicación del archivo de test.
Toda esta información combinada te da una visión completa para diagnosticar errores con profundidad. Vale la pena recordar que en el trabajo real con pruebas automatizadas, vas a pasar mucho más tiempo leyendo y entendiendo tests de otras personas que escribiendo los tuyos propios [06:50]. Dominar herramientas como Tracing junto con las funciones de debugging y logging marca la diferencia entre buscar un error durante minutos o durante horas.
¿Ya probaste Tracing en tus propios tests? Comparte en los comentarios el comando alternativo para acceder a esta funcionalidad desde la terminal.
