🎭 Un primer vistazo a Playwright

🎭 Un primer vistazo a Playwright

Ya entendemos qué es E2E testing y por qué importa. Ahora toca conocer la herramienta con la que vamos a trabajar en todo el curso. No vamos a instalar nada todavía —eso lo hacemos en el siguiente módulo— pero sí vamos a entender qué es Playwright, de dónde viene y qué lo hace diferente a lo que probablemente ya conocés.


¿Qué es Playwright?

Playwright es una herramienta de automatización de browsers desarrollada y mantenida por Microsoft. Permite controlar navegadores como Chromium, Firefox y WebKit de forma programática, es decir: podés escribir código que abre un browser, navega a una URL, hace clic en botones, completa formularios y valida que el resultado sea el esperado.

Todo eso que haría un usuario real, lo hace tu test. Automáticamente. Cada vez que querés.

Playwright fue lanzado en 2020 y en muy poco tiempo se convirtió en una de las herramientas más populares para E2E testing. No es casualidad: llegó a resolver problemas concretos que otras herramientas arrastraban desde hacía años.


Un poco de contexto: ¿de dónde viene?

Para entender por qué Playwright existe, ayuda saber quiénes lo crearon. El equipo detrás de Playwright es en gran parte el mismo que creó Puppeteer, la herramienta de automatización de Google basada en Chrome.

Cuando ese equipo se mudó a Microsoft, no empezaron desde cero: tomaron lo que habían aprendido con Puppeteer y construyeron algo más ambicioso: una herramienta multi-browser, con una API más expresiva y con soluciones nativas para los problemas más comunes del E2E testing.

El resultado es Playwright: más rápido, más robusto y con soporte para los tres motores de browser principales desde el día uno.


¿Qué lo diferencia de otras herramientas?

Si ya trabajaste con Selenium o Cypress, esta pregunta probablemente ya se te cruzó. La respuesta corta: Playwright no es solo "otro framework de testing". Tiene algunas características que cambian bastante la experiencia de escribir y mantener tests.

Soporte multi-browser real

Playwright corre tests en Chromium (la base de Chrome y Edge), Firefox y WebKit (el motor detrás de Safari). Y no de cualquier manera: los tres están soportados de forma oficial, con el mismo nivel de mantenimiento y con la misma API.

Eso significa que podés escribir un test una sola vez y ejecutarlo en los tres browsers sin cambiar nada. Para equipos que necesitan cobertura cross-browser, esto es enorme.

Auto-waiting incorporado

Este es uno de los grandes dolores del E2E testing tradicional: los elementos no siempre están listos cuando el test los necesita. Con Selenium, la respuesta era agregar esperas explícitas, Thread.sleep() o complejos WebDriverWait. Con Playwright, eso casi nunca hace falta.

Cuando le pedís a Playwright que haga clic en un botón, primero verifica que el botón exista, que esté visible, que esté habilitado y que no haya otra cosa bloqueando la interacción. Todo eso pasa automáticamente, antes de ejecutar la acción. Si el elemento no está listo todavía, Playwright espera. Si nunca llega a estarlo, el test falla con un error claro.

Aislamiento por defecto

Cada test corre en un contexto de browser completamente aislado. Cookies, almacenamiento local, sesiones: todo empieza desde cero en cada test. Esto elimina una de las fuentes más comunes de flakiness: el estado compartido entre pruebas.

Herramientas incluidas

Playwright no es solo el runner de tests. Viene con un conjunto de herramientas integradas que hacen la vida mucho más fácil:

  • Playwright Inspector: para debuggear tests paso a paso

  • Codegen: para grabar interacciones y generar código automáticamente

  • Trace Viewer: para revisar exactamente qué pasó en un test fallido, con capturas de pantalla y logs de red

  • UI Mode: una interfaz visual para correr y debuggear tests interactivamente

Vamos a usar todas estas herramientas a lo largo del curso.

TypeScript como ciudadano de primera clase

Playwright fue diseñado con TypeScript en mente. No es un agregado tardío ni una integración opcional: los tipos están incorporados, el autocompletado funciona sin configuración extra y los errores de tipo te ayudan a escribir tests más correctos desde el inicio.

Por eso en este curso trabajamos con TypeScript. No porque sea obligatorio —Playwright también soporta JavaScript, Python, Java y C#— sino porque es la combinación que mejor experiencia de desarrollo ofrece.


¿Para qué sirve Playwright además de E2E testing?

Aunque en este curso nos enfocamos en testing, vale la pena saber que Playwright también se usa para:

  • Web scraping: extraer datos de páginas web de forma automatizada

  • Generación de PDFs y capturas de pantalla: útil para reportes o previews automáticos

  • Testing de APIs: Playwright puede hacer requests HTTP directamente, lo que lo convierte en una herramienta válida también para el nivel de integración

Esa versatilidad es parte de por qué creció tan rápido en popularidad.


¿Cómo se compara con Cypress?

Cypress es probablemente la otra herramienta que más escuchás en el mundo del E2E testing moderno. Las dos son buenas opciones, pero tienen filosofías distintas:

Cypress está muy orientado al developer experience dentro del browser: su runner visual es excelente y el feedback inmediato es uno de sus puntos fuertes. Sin embargo, durante mucho tiempo estuvo limitado a Chromium y tiene restricciones en ciertos escenarios como múltiples tabs o iframes complejos.

Playwright es más flexible: multi-browser de verdad, sin restricciones de dominio, con soporte nativo para escenarios complejos y con un modelo de ejecución que escala mejor en CI/CD.

Ninguna es "la ganadora" en todos los contextos. Pero para un curso que busca prepararte para el mundo real del E2E testing moderno, Playwright es hoy la opción que tiene más momentum, mejor soporte y mayor adopción en la industria.


Lo que viene

En el próximo módulo instalamos Node.js, NPM y Playwright, configuramos el entorno de trabajo y escribimos nuestro primer test. A partir de ahí, todo lo que vimos en estas clases de introducción deja de ser teoría y empieza a ser código.

E2E Testing con Playwright y TypeScript

Comprar ahoraSaber más

Introducción al curso

  • 🤔 ¿Cómo consultar tus dudas?
  • 🤓 Recomendaciones para hacer el curso9
  • 🫵🏻 Actividades en el curso
  • 🤔 ¿Qué es E2E Testing?2
  • 🧑🏻‍💻 E2E: Beneficios y desafíos de implementarlo.
  • 🎭 Un primer vistazo a Playwright
  • ❔ Cuestionario módulo 1
  • 🔥 Asignación4

Instalación y configuración de nuestro espacio de trabajo

  • 🧑🏻‍💻 Instalación de Node.JS, NPM y Playwright7
  • 🤖 Extensiones útiles para trabajar con Playwright y VSCode5
  • ❔ Cuestionario rápido para este módulo
  • 🔥 Asignación2

TypeScript como lenguaje

  • 🤯 Los tipos y TypeScript: ¿En qué se diferencia con JavaScript?2
  • 🧑🏻‍🎓 Clases y funciones en TypeScript2
  • 😱 El uso de Async y Await en Playwright3
  • ❔ Cuestionario módulo 3
  • 🔥 Asignación1

Introducción a Playwright

  • 🚀 Arquitectura y componentes
  • 📍 Navegando a una URL15
  • ☕️ Nuestro primer Test: Validando el título de una web.
  • 🙌🏻 Bonus: Un solo test para validar todos los links del header de forma separada.10
  • ❔ Cuestionario módulo 4
  • 🔥 Asignación4

Encontrar elementos en una página web: Locators

  • 🪲 Introducción a los Locators
  • 📕 locators: getByRole()3
  • 💎 locators: getByText()
  • 💡 locators: getByLabel y getByPlaceholder
  • 📎 locators: getByAltText()4
  • 🪔 locators: getByTitle()4
  • 🔆 locators: getByTestId()2
  • ♨️ Extra: Configurar el TestID con otro nombre
  • 📢 Locators: CSS y Path
  • 💢 Locators: El uso de { exact : true }
  • 🗣️ Shadow DOM4
  • 📚 Filtrando nuestros locators por Texto
  • 📗 Filtrando por otro locator
  • 🙏🏻 Filtrando por elemento visible
  • 👻 ¿Qué hacer con las listas y sus elementos?
  • ❔ Cuestionario
  • 🔥 Asignación1

Interactuar con Elementos web.

  • 🖲️ El click: El comando que más vamos a usar.10
  • 🧩 El comando Fill: Interactuando con campos de texto1
  • 🏄🏻 BONUS: Type, presionar teclas4
  • 🤖 Checkboxes y Radio Buttons: Cómo trabajar con estos elementos?
  • 🤫 Dropdowns: ¿Cómo trabajar con ellos?4
  • 🔥 Upload y Drag and Drop: No tan frecuentes, pero útiles comandos para interactuar con el Front End1
  • ❓ Cuestionario
  • 🔥 Asignación1

Validando el estado de nuestro sistema

  • 📍 Qué son los Assertions?
  • 🚀 Creando nuestras primeras validaciones: Checked y Unchecked4
  • 👀 Validando un texto visible luego de una operación asíncrona
  • 🎁 Validando que el campo tiene el valor esperado
  • 🔍 Un ejercicio sencillo que se complica: Validando los items en un dropdown engañoso15
  • 🔨 Validaciones tabla estatica: ¿Cómo lo hacemos?6
  • 🖥️ Validaciones en una tabla dinámica1
  • ⌨️ Soft Assertions: ¿Qué son y para qué sirven?2
  • 💻 Validando el popup en Free Range Sandbox: El approach oficial y qué hacer cuando no funciona
  • ❓ Cuestionario
  • 🔥 Asignación: Validaciones4

Ejecución y su control

  • 🫨 Anotaciones: Skip, Only y Tags4
  • 🧠 Anotaciones: Fail, Fix me y Screenshots!5
  • 🏹 playwright.config.ts
  • 🧉 Creando configuraciones con Projects1
  • 🏆 Modo UI: El mejor compañero de trabajo!
  • 🛹 Dos maneras de crear Tests sin (casi) escribir código
  • ❓ Cuestionario
  • 🔥 Asignación del Módulo: Ejecución y Control de Tests con Playwright

Playwright y las APIs

  • 🎯 Es Playwright una herramienta para API Testing?
  • ⛳️ Configurando nuestras pruebas de API31
  • 🥊 Completando un flujo de pruebas API
  • 🎣 Integrando E2E y API Testing2
  • ❓ Cuestionario
  • 🔥 Asignación del Módulo: API Testing con Playwright

Playwright avanzado y mejores prácticas

  • 👓 Page Object Model: ¿Qué es y por qué implementarlo?3
  • 🫶🏻 Creando respuestas falsas con mocks3
  • 🙃 Agregando elementos extra a una respuesta real de una API con mocks
  • 🧛🏻‍♂️ El reporte de Playwright y algunas configuraciones extra para hacerlo más completo
  • 🔛 Múltiples ambientes con los mismos tests4
  • 🦶🏻 Mejores prácticas con Playwright
  • ❓ Cuestionario
  • 🔥 Asignación del Módulo: Playwright Avanzado - Page Object Model, Mocking, Reportes y Mejores Prácticas

Palabras finales

  • 🙌🏻 Despedida y conclusión final
  • 📝 Dejá tu testimonio inmortalizado en la web!