🤔 ¿Qué es E2E Testing?

🤔 ¿Qué es E2E Testing?

Antes de escribir una sola línea de Playwright, conviene tomarse un momento para entender qué tipo de testing vamos a hacer y por qué existe. No es solo relleno teórico: saber qué estás haciendo y por qué lo hacés cambia completamente la forma en que diseñás tus pruebas.


Empecemos por el principio: ¿qué es testing de software?

Testing es el proceso de evaluar un sistema o sus componentes para verificar que se comporta como se espera. Simple de decir, no tan simple de hacer bien.

Ahora bien, no existe una sola forma de testear. Dependiendo de qué querés validar y desde qué nivel lo mirás, vas a usar distintos tipos de pruebas. Y acá es donde entra la famosa pirámide de testing.


La pirámide de testing: un mapa para no perderse

La pirámide de testing es un modelo que te ayuda a pensar en cómo distribuir tus esfuerzos de prueba. Tiene tres niveles:

Unit tests (base de la pirámide): testean la unidad más pequeña del sistema, típicamente una función o método aislado. Son rápidos, baratos y fáciles de escribir. Deberían ser la mayoría de tus tests.

Integration tests (medio): verifican que dos o más componentes funcionen bien juntos. Ya no testeás una función sola, sino cómo se comunican entre sí.

E2E tests (punta de la pirámide): validan flujos completos del sistema desde la perspectiva del usuario final. Son más lentos, más costosos de mantener, pero te dan una confianza que ningún otro nivel puede darte.


Entonces, ¿qué es E2E Testing?

E2E viene de End-to-End, de punta a punta. La idea es simple: simulás lo que haría un usuario real interactuando con tu aplicación a través de la interfaz, y verificás que todo el flujo funcione correctamente de principio a fin.

Cuando hacés un test E2E, no te importa cómo está implementado el backend, qué base de datos usa o cómo está estructurado el código. Lo que te importa es esto: ¿el sistema hace lo que se supone que tiene que hacer desde el punto de vista del usuario?

Un ejemplo concreto: si tenés un e-commerce, un test E2E podría ser:

  1. El usuario abre la página principal

  2. Busca un producto

  3. Lo agrega al carrito

  4. Completa el checkout

  5. Recibe la confirmación del pedido

Ese flujo entero, tal como lo viviría una persona real, es lo que un test E2E valida.


¿Por qué no alcanza con unit tests?

Excelente pregunta. Los unit tests son fundamentales, pero tienen un límite claro: pueden verificar que cada pieza funciona bien por separado, pero no garantizan que todo funcione bien junto.

Imaginate que el equipo de backend cambió cómo retorna el ID de un producto. Los unit tests del backend siguen pasando. Los unit tests del frontend también. Pero cuando el usuario intenta agregar ese producto al carrito... boom. El frontend esperaba otro formato y el flujo se rompe.

Un test E2E hubiera detectado exactamente eso.


¿Y por qué no hacer solo E2E tests?

Porque son costosos. Son más lentos de ejecutar, más difíciles de mantener y cuando fallan, puede ser complicado saber exactamente dónde está el problema. Si tenés 500 tests E2E y todos los días rompen 20 por razones distintas, el equipo termina ignorándolos. Y un test que se ignora es peor que no tener test.

Por eso la pirámide importa: la base ancha de unit tests te da velocidad y precisión; los E2E en la punta te dan confianza sobre el flujo real del usuario. Los dos se necesitan.


¿Qué vamos a testear con Playwright?

En este curso nos vamos a enfocar en el nivel E2E: vamos a simular interacciones reales de usuario sobre una interfaz web, verificar que los elementos estén donde tienen que estar, que los formularios funcionen, que los mensajes de error aparezcan cuando corresponde y que los flujos completos se ejecuten sin problemas.

Para eso vamos a usar Playwright, una herramienta moderna de automatización de browsers que hace que escribir y mantener tests E2E sea mucho más llevadero de lo que solía ser. Pero eso lo vemos en detalle más adelante.

Por ahora, lo importante es que te quede claro el concepto: E2E testing es la capa que cierra el círculo de confianza de tu estrategia de calidad. Es lo más cercano que podés estar de validar que tu producto realmente funciona antes de que lo haga un usuario real.


💡 En el video de esta clase exploramos el concepto con más detalle y lo ponemos en contexto dentro de una estrategia de testing real. Si todavía no lo viste, este es el momento ideal.


¿Te quedó alguna duda sobre qué es E2E testing antes de arrancar con la práctica? Podés dejarla en el foro del curso o en el canal de la comunidad.

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!