En este módulo, aprenderás a manejar múltiples páginas y marcos (frames) en Playwright. Esta habilidad es crucial para automatizar pruebas en aplicaciones web complejas que utilizan ventanas emergentes, pestañas adicionales o iframes. Vamos a desglosar los conceptos clave y proporcionar ejemplos prácticos para que puedas aplicar estos conocimientos en tus proyectos.
Conceptos Clave
-
Páginas Múltiples:
- Las aplicaciones web pueden abrir nuevas pestañas o ventanas. Playwright permite manejar estas páginas adicionales de manera eficiente.
- Cada página en Playwright es una instancia de
Page, que proporciona métodos para interactuar con el contenido de la página.
-
Marcos (Frames):
- Los marcos son documentos HTML anidados dentro de una página principal. Los iframes son un ejemplo común.
- Playwright permite interactuar con estos marcos de manera similar a como se interactúa con la página principal.
Trabajando con Múltiples Páginas
Abrir y Manejar Nuevas Páginas
Cuando una acción en tu aplicación abre una nueva pestaña o ventana, puedes manejarla usando el evento page del contexto del navegador.
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
// Escuchar el evento de nueva página
context.on('page', async newPage => {
console.log('Nueva página abierta');
await newPage.waitForLoadState();
console.log(await newPage.title());
});
await page.goto('https://example.com');
// Simular una acción que abre una nueva página
await page.click('a[target="_blank"]');
await browser.close();
})();Explicación del Código
context.on('page', callback): Escucha el evento de apertura de una nueva página.newPage.waitForLoadState(): Espera a que la nueva página se cargue completamente.newPage.title(): Obtiene el título de la nueva página para verificar que se ha cargado correctamente.
Trabajando con Marcos (Frames)
Interactuar con Iframes
Para interactuar con un iframe, primero debes obtener una referencia al marco y luego puedes realizar acciones como si fuera la página principal.
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com/iframe-page');
// Obtener el marco por su nombre o selector
const frame = page.frame({ name: 'my-frame' });
if (frame) {
// Interactuar con el contenido del marco
const frameContent = await frame.textContent('h1');
console.log(`Contenido del marco: ${frameContent}`);
}
await browser.close();
})();Explicación del Código
page.frame({ name: 'my-frame' }): Obtiene el marco por su nombre. También puedes usar un selector CSS.frame.textContent('h1'): Obtiene el texto de un elemento dentro del marco.
Ejercicios Prácticos
Ejercicio 1: Manejar una Nueva Pestaña
- Crea un script que abra una página que contenga un enlace que abra una nueva pestaña.
- Captura la nueva pestaña y verifica su título.
Ejercicio 2: Interactuar con un Iframe
- Crea un script que navegue a una página con un iframe.
- Cambia el contenido de un elemento dentro del iframe y verifica el cambio.
Soluciones
Solución al Ejercicio 1
Solución al Ejercicio 2
Errores Comunes y Consejos
- Error: No se encuentra el marco: Asegúrate de que el nombre o selector del marco es correcto y que el marco está completamente cargado antes de interactuar con él.
- Consejo: Usa
waitForLoadState()para asegurarte de que las páginas y marcos están completamente cargados antes de realizar acciones.
Conclusión
En esta sección, has aprendido a manejar múltiples páginas y marcos en Playwright. Estas habilidades son esenciales para automatizar pruebas en aplicaciones web complejas. Asegúrate de practicar los ejercicios para consolidar tus conocimientos. En el próximo módulo, exploraremos cómo interceptar y simular tráfico de red, lo que te permitirá realizar pruebas aún más sofisticadas.
Playwright con TypeScript: De Principiante a Avanzado
Módulo 1: Introducción a Playwright y TypeScript
- ¿Qué es Playwright?
- Configuración de tu Entorno de Desarrollo
- Introducción a TypeScript
- Sintaxis Básica de TypeScript
Módulo 2: Comenzando con Playwright
- Instalando Playwright
- Creando tu Primer Script de Playwright
- Entendiendo los Conceptos Básicos de Playwright
- Ejecutando Pruebas de Playwright
Módulo 3: Fundamentos de Playwright y TypeScript
- Escribiendo Pruebas en TypeScript
- Usando Interfaces y Tipos de TypeScript
- Depurando Pruebas de Playwright
- Manejando Código Asíncrono
Módulo 4: Funciones Avanzadas de Playwright
- Trabajando con Selectores
- Manejando Múltiples Páginas y Marcos
- Intercepción de Red y Simulación
- Emulación de Dispositivos y Geolocalización
Módulo 5: Estrategias de Automatización de Pruebas
- Organización de Pruebas y Suites de Pruebas
- Uso de Fixtures y Hooks
- Ejecución Paralela de Pruebas
- Integración Continua con Playwright
Módulo 6: Técnicas Avanzadas de TypeScript
- Genéricos en TypeScript
- Tipos Avanzados de TypeScript
- Decoradores de TypeScript
- Mejores Prácticas de TypeScript y Playwright
Módulo 7: Aplicaciones Reales de Playwright
- Pruebas de Extremo a Extremo con Playwright
- Pruebas Visuales con Playwright
- Pruebas de Rendimiento con Playwright
- Estudio de Caso: Implementación de Playwright en un Proyecto