Playwright Automatización Moderna (AI-Enhanced)

Playwright es un framework de automatización de navegadores de código abierto creado por Microsoft. A diferencia de Selenium, Playwright fue diseñado desde cero para los navegadores modernos, ofreciendo una API unificada para Chromium, Firefox y WebKit con capacidades que antes requerían herramientas separadas: auto-wait nativo, trazabilidad, testing visual, interceptación de redes y ejecución en múltiples contextos sin necesidad de drivers externos.

En pocos años se ha convertido en el estándar de facto para equipos que necesitan pruebas confiables y rápidas, especialmente en entornos de integración continua.

En este curso potenciado por IA, usarás Continue.dev con DeepSeek como un copiloto de automatización: la IA te ayudará a escribir selectores robustos, depurar trazas de ejecución, diseñar page objects y crear pruebas visuales sin perder el control de la lógica de negocio.

Nota: Si tu interés está en el ecosistema clásico de Selenium WebDriver o trabajas con lenguajes como Java o C#, consulta nuestro curso de Selenium.

Objetivos🔗

• Comprender la arquitectura de Playwright y sus ventajas frente a Selenium con apoyo de un tutor de IA.
• Automatizar navegadores múltiples (Chromium, Firefox, WebKit) con un solo comando.
• Diseñar suites de pruebas confiables usando auto-wait, interceptación de redes y trazabilidad.
• Implementar testing visual y de componentes con asistencia inteligente para depuración de diferencias.

Temario🔗

Instalación y configuración🔗

• Visual Studio Code + extensión Continue.dev conectada a la API de DeepSeek.
• Node.js y npm.
• Instalación de Playwright (npm init playwright@latest).
• Navegadores incluidos: Chromium, Firefox, WebKit.
• Práctica con IA: Primer prompt: "Configura mi asistente para que reconozca la estructura de proyectos de Playwright y sugiera selectores por rol de accesibilidad."

Introducción a Playwright🔗

• ¿Qué hace diferente a Playwright? — Arquitectura sin WebDriver.
• Auto-wait nativo: cómo elimina los sleep() y WebDriverWait.
• Primer test: navegar, hacer clic, verificar texto.
• Práctica con IA: La IA explica por qué no necesitas time.sleep() ni WebDriverWait en Playwright, mostrando el concepto de auto-wait con ejemplos.

Selectores modernos🔗

• Selectores de texto: text=, getByText().
• Selectores por rol de accesibilidad: getByRole() — estándar ARIA.
• Selectores por etiqueta: getByLabel(), getByPlaceholder(), getByTestId().
• Selectores CSS y XPath (compatibilidad).
• Práctica con IA: La IA revisa tus selectores y te pregunta: "Este selector CSS es frágil, ¿puedes reescribirlo usando getByRole? ¿Qué dice el estándar ARIA sobre este elemento?"

Page Object Model con TypeScript🔗

• Estructura de Page Objects con tipos.
• Fixtures en Playwright: contexto, página, petición.
• Organización del proyecto: pages/, tests/, fixtures/.
• Práctica con IA: Tutor socrático: "Diseña un Page Object para un formulario de login. La IA te guiará preguntando qué métodos y selectores necesita."

Interceptación de redes y mocking🔗

• page.route(): interceptar y modificar peticiones.
• Mocking de APIs: simular respuestas sin servidor.
• Esperar peticiones específicas: page.waitForResponse().
• Práctica con IA: Prompt para interceptar una petición a un API externa y simular un error 500, verificando que la UI muestre el mensaje correcto.

Testing visual🔗

• Captura de pantalla de elementos y páginas enteras.
• Comparación de snapshots visuales.
• Umbral de tolerancia para diferencias.
• Práctica con IA: La IA analiza diferencias visuales fallidas y sugiere si el cambio es intencional o un bug real.

Trazabilidad y depuración🔗

• --trace mode: grabación de video, línea por línea.
• Playwright Inspector: paso a paso interactivo.
• Reportería: HTML, JSON, línea de comandos.
• Práctica con IA: Depuración interactiva: la IA analiza una traza de ejecución y detecta por qué un test falla intermitentemente.

Pruebas en múltiples navegadores y dispositivos🔗

• Configuración de proyectos en playwright.config.ts.
• Chromium, Firefox, WebKit en paralelo.
• Emulación de dispositivos móviles (iPhone, Android).
• Geolocalización y permisos simulados.
• Práctica con IA: Prompt para configurar la suite en 3 navegadores + 2 dispositivos móviles, y la IA optimiza la configuración para ejecución paralela.

Integración continua🔗

• GitHub Actions: playwright.yml oficial.
• Ejecución en GitLab CI, Jenkins.
• Artefactos: reportes HTML y trazadas en fallo.
• Sharding: dividir pruebas en múltiples jobs.
• Práctica con IA: La IA genera un pipeline de CI/CD completo y explica cada paso, adaptándolo al repositorio del alumno.

Temas selectos (opcionales)🔗

• Playwright Component Testing (Storybook, React, Vue).
• Pruebas de API con APIRequestContext.
• WebSocket y eventos en tiempo real.
• Migración desde Selenium a Playwright.
• Práctica con IA: Ingeniería de prompts: "Toma este script de Selenium y ayúdame a migrarlo a Playwright. Explícame cada cambio."