El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo manejar el código asíncrono en Playwright utilizando TypeScript. La programación asíncrona es fundamental para trabajar con Playwright, ya que muchas de sus operaciones, como la navegación y la interacción con elementos de la página, son asíncronas.

Conceptos Clave

Asincronía en JavaScript/TypeScript:
- JavaScript es un lenguaje de programación de un solo hilo, lo que significa que solo puede ejecutar una tarea a la vez. La asincronía permite que el código continúe ejecutándose mientras espera que se completen otras operaciones, como solicitudes de red o temporizadores.
Promesas:
- Una promesa es un objeto que representa la eventual finalización (o falla) de una operación asíncrona y su valor resultante.
- Estados de una promesa:
  - Pendiente: La operación aún no se ha completado.
  - Cumplida: La operación se completó con éxito.
  - Rechazada: La operación falló.
Async/Await:
- async y await son sintaxis de azúcar que facilitan el trabajo con promesas.
- async se utiliza para declarar una función asíncrona, que devuelve una promesa.
- await se utiliza para esperar a que una promesa se resuelva o rechace.

Ejemplo Práctico

Veamos un ejemplo de cómo manejar el código asíncrono en Playwright con TypeScript:

import { chromium, Browser, Page } from 'playwright';

async function run() {
  // Lanzar un navegador
  const browser: Browser = await chromium.launch();
  // Crear una nueva página
  const page: Page = await browser.newPage();
  // Navegar a una URL
  await page.goto('https://example.com');
  // Esperar a que un elemento esté visible
  await page.waitForSelector('h1');
  // Obtener el texto del elemento
  const headingText = await page.textContent('h1');
  console.log(`El texto del encabezado es: ${headingText}`);
  // Cerrar el navegador
  await browser.close();
}

run().catch(error => {
  console.error('Error durante la ejecución:', error);
});

Explicación del Código

Lanzar un navegador: await chromium.launch() inicia una instancia del navegador Chromium.
Crear una nueva página: await browser.newPage() abre una nueva pestaña en el navegador.
Navegar a una URL: await page.goto('https://example.com') carga la página web especificada.
Esperar a que un elemento esté visible: await page.waitForSelector('h1') espera a que el elemento <h1> esté presente en el DOM.
Obtener el texto del elemento: await page.textContent('h1') obtiene el texto del elemento <h1>.
Cerrar el navegador: await browser.close() cierra el navegador.

Ejercicio Práctico

Objetivo: Escribir un script que navegue a una página web, espere a que un botón esté visible, haga clic en él y luego capture el texto de un elemento que aparece después del clic.

Instrucciones

Navega a https://example.com.
Espera a que un botón con el texto "Click Me" esté visible.
Haz clic en el botón.
Espera a que un elemento con el texto "Success" aparezca.
Captura y muestra el texto del elemento.

Solución

import { chromium, Browser, Page } from 'playwright';

async function run() {
  const browser: Browser = await chromium.launch();
  const page: Page = await browser.newPage();
  await page.goto('https://example.com');

  // Esperar y hacer clic en el botón
  await page.waitForSelector('button:has-text("Click Me")');
  await page.click('button:has-text("Click Me")');

  // Esperar y capturar el texto del elemento de éxito
  await page.waitForSelector('div:has-text("Success")');
  const successText = await page.textContent('div:has-text("Success")');
  console.log(`El texto de éxito es: ${successText}`);

  await browser.close();
}

run().catch(error => {
  console.error('Error durante la ejecución:', error);
});

Retroalimentación y Consejos

Errores Comunes:
- No usar await antes de las operaciones asíncronas puede llevar a resultados inesperados.
- Asegúrate de que los selectores sean correctos y específicos para evitar errores de tiempo de espera.
Consejos Adicionales:
- Usa try-catch para manejar errores y evitar que el script falle sin control.
- Familiarízate con los selectores de Playwright para interactuar eficazmente con los elementos de la página.

Conclusión

En esta sección, hemos aprendido cómo manejar el código asíncrono en Playwright utilizando TypeScript. La comprensión de la asincronía es crucial para escribir scripts de prueba efectivos y eficientes. En el siguiente módulo, profundizaremos en las funciones avanzadas de Playwright, como trabajar con selectores y manejar múltiples páginas.

Manejando Código Asíncrono

Conceptos Clave

Ejemplo Práctico

Explicación del Código

Ejercicio Práctico

Instrucciones

Solución

Retroalimentación y Consejos

Conclusión

Playwright con TypeScript: De Principiante a Avanzado

Módulo 1: Introducción a Playwright y TypeScript

Módulo 2: Comenzando con Playwright

Módulo 3: Fundamentos de Playwright y TypeScript

Módulo 4: Funciones Avanzadas de Playwright

Módulo 5: Estrategias de Automatización de Pruebas

Módulo 6: Técnicas Avanzadas de TypeScript

Módulo 7: Aplicaciones Reales de Playwright

Módulo 8: Conclusión del Curso y Próximos Pasos