En esta sección, aprenderás a crear tu primer script utilizando Playwright con TypeScript. Este es un paso fundamental para comenzar a automatizar pruebas de interfaz de usuario. Asegúrate de haber completado la configuración de tu entorno de desarrollo antes de continuar.

• Comprender la estructura básica de un script de Playwright.
• Aprender a lanzar un navegador y abrir una página web.
• Realizar una interacción simple con la página.
• Ejecutar y verificar el resultado de tu script.

Antes de escribir tu primer script, asegúrate de que Playwright y TypeScript estén instalados en tu proyecto. Si no lo has hecho, sigue estos pasos:

1. Inicializa un proyecto de Node.js si aún no lo has hecho:

   npm init -y
   

2. Instala Playwright:

   npm install playwright
   

3. Instala TypeScript:

   npm install typescript --save-dev
   

4. Configura TypeScript creando un archivo tsconfig.json:

   {
     "compilerOptions": {
       "target": "ES6",
       "module": "commonjs",
       "strict": true,
       "esModuleInterop": true,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true
     }
   }
   

Ahora que tu entorno está configurado, es hora de escribir tu primer script de Playwright.

1. Crea un archivo llamado firstScript.ts en tu directorio de proyecto.

2. Escribe el siguiente código en firstScript.ts:

   import { chromium } from 'playwright';
   
   (async () => {
     // 1. Lanzar un navegador
     const browser = await chromium.launch({ headless: false });
     const context = await browser.newContext();
     const page = await context.newPage();
   
     // 2. Navegar a una página web
     await page.goto('https://example.com');
   
     // 3. Interactuar con la página
     const title = await page.title();
     console.log(`El título de la página es: ${title}`);
   
     // 4. Cerrar el navegador
     await browser.close();
   })();
   

• Importación de Chromium: Importamos el módulo chromium de Playwright para lanzar un navegador Chromium.
• Función Asíncrona: Usamos una función asíncrona para manejar las operaciones asíncronas de Playwright.
• Lanzar el Navegador: chromium.launch({ headless: false }) lanza un navegador visible. Cambia headless a true para ejecutar en modo sin cabeza.
• Abrir una Nueva Página: Creamos un nuevo contexto y una nueva página para interactuar.
• Navegar a una URL: page.goto('https://example.com') navega a la URL especificada.
• Obtener el Título de la Página: page.title() obtiene el título de la página actual.
• Cerrar el Navegador: browser.close() cierra el navegador al finalizar.

Para ejecutar tu script, utiliza el siguiente comando en la terminal:

Este comando ejecuta el script TypeScript usando ts-node, que compila y ejecuta TypeScript en tiempo real.

Tarea: Modifica el script para navegar a una página diferente y extraer un elemento específico de la página, como un encabezado o un párrafo.

Solución:

• Error Común: Asegúrate de que el navegador se cierra correctamente usando await browser.close(). Dejar navegadores abiertos puede consumir recursos innecesarios.
• Consejo: Usa headless: true para pruebas automatizadas en entornos de integración continua.

Has creado y ejecutado tu primer script de Playwright con TypeScript. Este es un paso crucial en el camino hacia la automatización de pruebas. En el próximo tema, profundizaremos en los conceptos básicos de Playwright para que puedas escribir scripts más complejos y efectivos.