Lección 3 de 7 · 2 min
Trace viewer: debugging de nivel superior
El problema que resuelve
"Falló en CI pero local pasa" era, hasta Playwright, media jornada perdida. El trace graba todo: cada acción, snapshot del DOM antes/después, network, consola y video — y se explora offline.
Configuración recomendada
// playwright.config.ts
use: {
trace: 'on-first-retry', // graba solo cuando un test reintenta
screenshot: 'only-on-failure',
video: 'retain-on-failure',
},
retries: process.env.CI ? 2 : 0,
on-first-retry es el equilibrio correcto: cero overhead cuando todo pasa, evidencia completa cuando algo falla. En CI, sube la carpeta como artefacto:
- uses: actions/upload-artifact@v4
if: failure()
with:
name: playwright-report
path: playwright-report/
Leer un trace como un pro
npx playwright show-trace trace.zip
La rutina de diagnóstico (en este orden):
- Timeline superior — ¿dónde se detuvo el tiempo? Un hueco largo = una espera que agotó timeout.
- La acción roja — su snapshot before/after muestra qué veía Playwright exactamente. El 70% de las veces el elemento estaba tapado por un modal, cookie banner o toast.
- Pestaña Network — ¿la API respondió 500? ¿Nunca respondió? Ahí está tu flaky.
- Consola — errores JS de la app que el test destapó de rebote.
UI mode para el día a día
npx playwright test --ui
Es el trace viewer en vivo: corre tests con watch mode, time-travel por cada paso y re-ejecución instantánea del test que estás escribiendo. Desde su llegada, page.pause() y los console.log quedaron para casos raros.
Los tres diagnósticos más comunes
| Síntoma en el trace | Causa típica | Arreglo |
|---|---|---|
| Timeout en click, elemento visible | Otro elemento lo intercepta (banner, overlay) | Cerrar/esperar el overlay; no force: true |
| Assertion falla con texto viejo | Falta web-first assertion tras una mutación | await expect(...) sobre el estado nuevo |
| Network muestra request colgada | Backend de test inestable | Stub con page.route() o arreglar el entorno |
force: true merece mención: casi siempre es esconder el bug real bajo la alfombra. Si el usuario no puede clickear el botón, tu test tampoco debería.
Ejercicio
Rompe a propósito un test (cambia un texto esperado), córrelo con --trace on, y practica la rutina de 4 pasos en el trace resultante. Cronométrate: la meta es diagnosticar en menos de 3 minutos.