Herramientas de depuración de Playwright
Este capítulo presenta las tres principales herramientas de depuración de Playwright: Modo UI, Trace Viewer y el modo Debug de línea de comandos.
Introducción completa al Modo UI
El Modo UI es la interfaz gráfica de pruebas integrada de Playwright, que ofreceexploración, ejecución y depuración de pruebasen una experiencia integral.
Iniciar el Modo UI
npx playwright test --ui
Exploración de la lista de pruebas
Después de iniciarlo, la barra lateral izquierda muestra todos los archivos de prueba.
Puedes expandir cada archivo ydescribebloque, para ejecutar, ver, observar (Watch) o depurar cada prueba individualmente.
Watch Mode
Después de hacer clic en el botón Watch, Playwright supervisa los cambios en los archivos y, cuando el código de prueba o el código fuente se actualiza, vuelve a ejecutar automáticamente las pruebas afectadas.
Vista de línea de tiempo (Timeline)
Después de que la prueba se ejecuta, la vista de línea de tiempo se muestra en la parte superior, marcando la navegación y las operaciones con diferentes colores.
Puedes pasar el cursor para ver la instantánea de cada paso, hacer doble clic para seleccionar un período de tiempo y ver los registros detallados de ese período.
DOM Snapshot
Al hacer clic en un paso en la línea de tiempo, se muestra la instantánea del DOM en ese momento en el lado derecho.
Puedes ver el estado real de la página antes y después de la operación para localizar rápidamente el problema.
Filtrado de pruebas
El Modo UI admite varios métodos de filtrado:
- Buscar por nombre de prueba
- según
@tag
Filtrar - Filtrar por proyecto (Project)
- Filtrar por estado: aprobada (passed), fallida (failed), omitida (skipped)
Depuración avanzada con Trace Viewer
Trace Viewer es la herramienta de reproducción de grabaciones de Playwright, que te permiteinspeccionar cada paso de la prueba como si estuvieras depurando una grabación。
Configurar la recopilación de Trace
Ejemplo
export default defineConfig({
use: {
// Recopilar Trace solo en reintentos por fallo
trace: 'on-first-retry',
// Valores opcionales:
// 'off' — no recopilar
// 'on' — recopilar siempre
// 'on-first-retry' — recopilar solo en el primer reintento (recomendado)
// 'retain-on-failure' — conservar el Trace solo en caso de fallo
},
});
Abrir Trace
# 本地打开 npx playwright show-trace path/to/trace.zip
También se puede subir atrace.playwright.devpara verlo en línea.
Información que contiene el Trace
| Contenido | Descripción |
|---|---|
| Instantánea del DOM | Instantánea completa del DOM de la página antes y después de cada paso |
| Solicitudes de red | Todas las solicitudes y respuestas HTTP (URL, código de estado, encabezados, cuerpo) |
| Registros de consola | Todos los mensajes generados por la consola del navegador |
| Capturas de pantalla | Capturas de pantalla de la página en cada paso |
| Registro de operaciones | Parámetros de llamada y tiempo de ejecución de todas las operaciones de Playwright |
| Código fuente | Ubicación del código fuente de la prueba correspondiente a cada operación |
Usar Trace para localizar fallos
En la línea de tiempo de Trace Viewer, encuentra el paso fallido, revisa el estado del DOM y las solicitudes de red de la página antes y después de ese paso, y localiza la causa del fallo.
Trace es la herramienta de depuración más potente. Cuando una prueba falla en CI pero no puedes reproducirla localmente, descarga el archivo Trace generado por CI y podrás analizar la causa del fallo sin conexión.
Modo --debug y page.pause()
Modo de línea de comandos --debug
npx playwright test --debug
Funciones:
- Abre automáticamente la ventana de Playwright Inspector
- Ejecuta paso a paso cada operación
- Depura en las DevTools del navegador
- Usa
F10
(Step Over) yF11
(Step Into) para controlar la ejecución
page.pause() pausa la ejecución
Ejemplo
test('prueba de depuración', async ({ page }) => {
await page.goto('https://www.example.com/');
// Pausar la ejecución y abrir Inspector
await page.pause();
// En Inspector se pueden ejecutar las siguientes operaciones paso a paso
await page.getByText('Tutorial EJEMPLO').click();
});
Usandopage.pause()Después de ejecutar las pruebas con esto, Playwright abrirá automáticamente la ventana de Inspector para que puedas revisar el estado de la página paso a paso.
Elección entre los tres métodos de depuración
| Método | Escenario de aplicación |
|---|---|
| UI Mode | Desarrollo diario, explorar la lista de pruebas y ver rápidamente el estado de las pruebas |
| Trace Viewer | Localizar fallos de CI, analizar cada paso de pruebas complejas |
| --debug / page.pause() | Desarrollar nuevas pruebas, depurar a fondo pasos específicos |