En este módulo, aprenderás a trabajar con selectores en Playwright, una habilidad esencial para interactuar con elementos en una página web. Los selectores son fundamentales para automatizar pruebas, ya que permiten identificar y manipular elementos de la interfaz de usuario.
Conceptos Clave
- Selectores CSS: Son los más comunes y se utilizan para seleccionar elementos basados en sus clases, IDs, atributos, etc.
- Selectores XPath: Utilizan una sintaxis de ruta para navegar por la estructura del documento XML/HTML.
- Selectores de Texto: Permiten seleccionar elementos basados en el texto visible.
- Selectores de Rol: Útiles para seleccionar elementos basados en su rol de accesibilidad.
- Selectores de Cadena: Permiten seleccionar elementos usando una cadena de texto que coincide con el contenido del elemento.
Ejemplos Prácticos
- Uso de Selectores CSS
Los selectores CSS son directos y se utilizan ampliamente debido a su simplicidad y eficacia.
// Selecciona un elemento por su clase
await page.click('.boton-enviar');
// Selecciona un elemento por su ID
await page.fill('#campo-usuario', 'miUsuario');
// Selecciona un elemento por su atributo
await page.check('input[type="checkbox"]');
- Uso de Selectores XPath
Los selectores XPath son más potentes y flexibles, pero también más complejos.
- Uso de Selectores de Texto
Estos selectores son útiles cuando el texto visible es único y constante.
- Uso de Selectores de Rol
Los selectores de rol son útiles para pruebas de accesibilidad.
- Uso de Selectores de Cadena
Estos selectores son útiles para seleccionar elementos que contienen una cadena específica.
Ejercicio Práctico
Objetivo: Escribir un script que interactúe con una página de ejemplo utilizando diferentes tipos de selectores.
Instrucciones
- Configura tu entorno: Asegúrate de tener Playwright instalado y configurado.
- Crea un nuevo script: Escribe un script que navegue a una página de ejemplo y realice las siguientes acciones:
- Rellena un campo de texto usando un selector CSS.
- Haz clic en un botón usando un selector XPath.
- Marca una casilla de verificación usando un selector de texto.
- Selecciona un elemento usando un selector de rol.
Solución
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://ejemplo.com');
// Rellena un campo de texto usando un selector CSS
await page.fill('.campo-texto', 'Texto de ejemplo');
// Haz clic en un botón usando un selector XPath
await page.click('//button[text()="Enviar"]');
// Marca una casilla de verificación usando un selector de texto
await page.check('text="Acepto los términos"');
// Selecciona un elemento usando un selector de rol
await page.click('role=button[name="Enviar"]');
await browser.close();
})();Errores Comunes y Consejos
- Selector Incorrecto: Asegúrate de que el selector que estás utilizando es único y correcto. Usa herramientas de desarrollo del navegador para verificar los selectores.
- Elementos Dinámicos: Si un elemento se carga dinámicamente, espera a que esté presente antes de interactuar con él.
- Roles de Accesibilidad: Asegúrate de que los roles de accesibilidad estén correctamente definidos en el HTML para usar selectores de rol.
Conclusión
En esta sección, has aprendido a utilizar diferentes tipos de selectores en Playwright para interactuar con elementos de una página web. Los selectores son una herramienta poderosa para automatizar pruebas y manipular la interfaz de usuario de manera efectiva. En el próximo módulo, exploraremos cómo manejar múltiples páginas y marcos en Playwright.
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