La depuración es una habilidad esencial para cualquier desarrollador, especialmente cuando se trabaja con pruebas automatizadas. En este tema, aprenderás cómo depurar pruebas de Playwright utilizando TypeScript, lo que te permitirá identificar y corregir errores de manera eficiente.

1. Puntos de Interrupción (Breakpoints): Permiten pausar la ejecución del código en un punto específico para inspeccionar el estado del programa.
2. Consola de Depuración: Herramienta que permite ejecutar comandos y evaluar expresiones durante la depuración.
3. Registro de Mensajes (Logging): Uso de console.log para imprimir información útil sobre el estado de la aplicación.

• Visual Studio Code (VSCode): Un editor de código que ofrece potentes herramientas de depuración integradas.
• Playwright Inspector: Una herramienta visual que permite inspeccionar y depurar scripts de Playwright.

Para depurar pruebas de Playwright en VSCode, sigue estos pasos:

1. Instala la Extensión de Playwright:

   • Abre VSCode y ve a la sección de extensiones.
   • Busca "Playwright" e instala la extensión oficial.

2. Configura el Archivo launch.json:

   • Ve a la pestaña de depuración en VSCode y selecciona "Crear un archivo launch.json".
   • Añade la siguiente configuración para depurar pruebas de Playwright:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Debug Playwright Tests",
         "program": "${workspaceFolder}/node_modules/.bin/playwright",
         "args": ["test"],
         "console": "integratedTerminal",
         "internalConsoleOptions": "neverOpen"
       }
     ]
   }
   

3. Ejecuta la Depuración:

   • Coloca un punto de interrupción en el código de prueba.
   • Inicia la depuración seleccionando "Debug Playwright Tests" en la lista de configuraciones de depuración.

Playwright Inspector es una herramienta visual que te permite:

• Pausar la Ejecución: Detener la ejecución en cualquier paso para inspeccionar el estado.
• Inspeccionar Elementos: Ver y seleccionar elementos en la página.
• Reproducir y Pausar: Controlar la ejecución de las pruebas.

Para usar Playwright Inspector, ejecuta tus pruebas con el siguiente comando:

Esto abrirá el Inspector, permitiéndote interactuar con la prueba en tiempo real.

Supongamos que tienes el siguiente script de prueba en TypeScript:

1. Coloca un Punto de Interrupción:

   • Abre el archivo de prueba en VSCode.
   • Haz clic en el margen izquierdo junto a la línea await page.goto('https://example.com'); para colocar un punto de interrupción.

2. Inicia la Depuración:

   • Selecciona "Debug Playwright Tests" y ejecuta la depuración.

3. Inspecciona el Estado:

   • Cuando la ejecución se detenga en el punto de interrupción, usa la consola de depuración para inspeccionar variables y el estado de la página.

Ejercicio: Crea un script de prueba que navegue a una página web, interactúe con un elemento y verifique un resultado. Usa la depuración para identificar y corregir un error en la prueba.

Solución:

1. Escribe el Script:

   import { test, expect } from '@playwright/test';
   
   test('interact with element', async ({ page }) => {
     await page.goto('https://example.com');
     const button = await page.$('button#submit');
     await button?.click();
     const result = await page.$eval('#result', el => el.textContent);
     expect(result).toBe('Success');
   });
   

2. Depura el Script:

   • Coloca un punto de interrupción en await button?.click();.
   • Inicia la depuración y verifica si el botón existe antes de hacer clic.

3. Corrige el Error:

   • Si el botón no existe, revisa el selector o asegúrate de que la página esté completamente cargada antes de interactuar.

La depuración es una parte crucial del desarrollo de pruebas automatizadas. Con las herramientas adecuadas y un enfoque sistemático, puedes identificar y resolver problemas de manera eficiente. En el siguiente módulo, exploraremos cómo manejar código asíncrono en Playwright, lo que te permitirá escribir pruebas más robustas y eficientes.