En aquest tema, aprendrem com depurar proves de Playwright utilitzant diverses tècniques i eines. La depuració és una habilitat essencial per a qualsevol desenvolupador, ja que permet identificar i corregir errors en el codi de manera eficient.

• Comprendre la importància de la depuració en el desenvolupament de proves.
• Aprendre a utilitzar les eines de depuració de Playwright.
• Aplicar tècniques de depuració per identificar i solucionar problemes en les proves.

1. Depuració Bàsica amb Consola:

   • Utilitzar console.log() per imprimir valors i estats durant l'execució de les proves.
   • Exemple:

     console.log('Iniciant la prova...');
     const pageTitle = await page.title();
     console.log(`El títol de la pàgina és: ${pageTitle}`);
     

2. Mode de Depuració de Playwright:

   • Executar Playwright en mode de depuració per pausar l'execució i inspeccionar l'estat de l'aplicació.
   • Com activar el mode de depuració:

     npx playwright test --debug
     

3. Utilització de Breakpoints:

   • Inserir breakpoints en el codi per pausar l'execució i examinar variables i l'entorn.
   • Com utilitzar breakpoints en editors com Visual Studio Code.

4. Eines de Desenvolupament del Navegador:

   • Accedir a les eines de desenvolupament del navegador per inspeccionar elements, veure la consola i depurar JavaScript.
   • Exemple d'ús:
     • Obrir les eines de desenvolupament amb F12 o Ctrl+Shift+I.
     • Utilitzar la pestanya "Elements" per inspeccionar el DOM.
     • Utilitzar la pestanya "Console" per veure missatges de registre.

5. Captura de Pantalles i Vídeos:

   • Capturar captures de pantalla i vídeos durant les proves per analitzar l'estat visual de l'aplicació.
   • Exemple de codi per capturar una captura de pantalla:

     await page.screenshot({ path: 'screenshot.png' });
     

Objectiu: Practicar la depuració d'una prova de Playwright que falla.

1. Configura una Prova que Falla:

   • Escriu una prova que intenti verificar el títol d'una pàgina web, però introdueix un error intencionat en l'expectativa.
   • Exemple:

     test('Verifica el títol de la pàgina', async ({ page }) => {
       await page.goto('https://example.com');
       const title = await page.title();
       expect(title).toBe('Títol Incorrecte');
     });
     

2. Depura la Prova:

   • Executa la prova en mode de depuració.
   • Utilitza console.log() per imprimir el títol real de la pàgina.
   • Insereix un breakpoint abans de l'expectativa per pausar l'execució i inspeccionar el valor de title.

3. Corregeix l'Error:

   • Ajusta l'expectativa per coincidir amb el títol correcte de la pàgina.
   • Torna a executar la prova per assegurar-te que passa correctament.

En aquesta secció, hem après com depurar proves de Playwright utilitzant diverses tècniques, com ara el mode de depuració, breakpoints i eines de desenvolupament del navegador. La depuració és una part crucial del procés de desenvolupament, ja que ens ajuda a identificar i corregir errors de manera eficient. Practicar aquestes tècniques millorarà la teva capacitat per escriure proves més robustes i fiables.