El documento compara diferentes frameworks de pruebas E2E como Selenium WebDriver, WebDriverIO, Puppeteer, Playwright y Cypress. Explica sus arquitecturas, ventajas y desventajas. Recomienda elegir un framework en función del contexto del proyecto, como el alcance de la automatización, el uso de múltiples navegadores, el lenguaje de programación y las funcionalidades requeridas.

1. E2E Testing Frameworks:
lo bueno, lo malo y lo feo
Ing. Abel Quintana Lopez
@beloquintana

2. E2E Testing Frameworks: lo bueno, lo malo y lo feo
¿Qué ha sucedido con los frameworks
de automatización de pruebas en los
últimos años?

3. E2E Testing Frameworks: lo bueno, lo malo y lo feo

4. E2E Testing Frameworks: lo bueno, lo malo y lo feo

5. E2E Testing Frameworks: lo bueno, lo malo y lo feo

6. E2E Testing Frameworks: lo bueno, lo malo y lo feo

7. E2E Testing Frameworks: lo bueno, lo malo y lo feo

8. Agenda
❏ Arquitectura de frameworks E2E
❏ Frameworks E2E
❏ ¿Cuál framework E2E usar?

11. E2E Testing Frameworks: lo bueno, lo malo y lo feo
¿Por qué necesitamos conocer la
diferencia entre los frameworks de
pruebas E2E?

12. E2E Testing Frameworks: lo bueno, lo malo y lo feo

13. E2E Testing Frameworks: lo bueno, lo malo y lo feo

14. Agenda
❏ Arquitectura de frameworks E2E
❏ Frameworks E2E
❏ ¿Cuál framework E2E usar?

15. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Arquitectura de frameworks de automatización
❏ WebDriver
❏ Chrome Devtools Protocol (CDP)
❏ Javascript Injection

16. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriver
ChromeDriver
GeckoDriver
SafariDriver
EdgeDriver
WebDriver

17. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriver
ChromeDriver
GeckoDriver
SafariDriver
EdgeDriver
WebDriver

18. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriver
ChromeDriver
GeckoDriver
SafariDriver
EdgeDriver
WebDriver
HTTP

19. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriver - Lo bueno
❏ W3C Standard soportado por los navegadores web
❏ Maneja el navegador de forma nativa como un usuario real
❏ Permite simular todas las acciones de un usuario
❏ Ejecución local y remota
❏ Ejecución de dispositivos móviles, Smart TV, etc
❏ Protocolo de automatización más usado

20. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriver - Lo malo
❏ Limitaciones de funcionalidades de automatización
❏ No soporta intercepción en la red
❏ No soporta simulación de velocidad de red
❏ No soporta métricas de performance

21. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Chrome Devtools Protocol
Chrome Devtools Protocol

22. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Chrome Devtools Protocol
Chrome Devtools Protocol
Bidireccional

23. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Chrome Devtools Protocol - Lo bueno
❏ Soporta más funcionalidades automatización
❏ Soporta intercepción en la red
❏ Soporta simulación de velocidad de red
❏ Soporta métricas de performance
❏ Bidireccional
❏ Velocidad

24. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Chrome Devtools Protocol - Lo malo
❏ Soporta un solo navegador
❏ No soporta ejecución en la nube
❏ Sauce Labs
❏ BrowserStack

25. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Javascript Injection
Javascript Injection

26. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Javascript Injection
Javascript Injection
JS
JS
JS

27. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Javascript Injection - Lo bueno
❏ Se ejecuta en el navegador
❏ Control sobre DOM
❏ Velocidad
❏ Manejo de esperas
❏ Funcionalidades adicionales

28. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Javascript Injection - Lo malo
❏ No soporta eventos nativos
❏ Limitaciones para automatizar todas las acciones de usuario
❏ No tienen buen soporte para múltiples navegadores

29. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Arquitectura de frameworks de automatización
❏ WebDriver ❏ CDP ❏ Javascript Injection

30. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Arquitectura de frameworks de automatización

31. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Frameworks de automatización

32. Agenda
❏ Arquitectura de frameworks E2E
❏ Frameworks E2E
❏ ¿Cuál framework E2E usar?

33. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Selenium WebDriver
ChromeDriver
GeckoDriver
SafariDriver
EdgeDriver
WebDriver
HTTP
Script

34. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Selenium WebDriver
ChromeDriver
GeckoDriver
SafariDriver
EdgeDriver
WebDriver
HTTP
Script

35. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Selenium WebDriver - Lo bueno
❏ Ventajas de WebDriver
❏ W3C Standard soportado por los navegadores web
❏ Maneja el navegador de forma nativa como un usuario real
❏ Permite simular todas las acciones de un usuario
❏ Ejecución local y remota
❏ Integración con herramientas de automatización
❏ Documentación y comunidad de testing extensa

36. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Selenium WebDriver - Lo malo
❏ Desventajas de WebDriver
❏ Limitaciones de funcionalidades de automatización
❏ Configuración del proyecto
❏ Drivers
❏ Reportes

37. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriverIO
ChromeDriver
GeckoDriver
SafariDriver
EdgeDriver
WebDriver
HTTP
Script

38. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriverIO
ChromeDriver
GeckoDriver
SafariDriver
EdgeDriver
WebDriver
HTTP
Script
CDP

39. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriverIO - Lo bueno
❏ Ventajas de WebDriver
❏ W3C Standard soportado por los navegadores web
❏ Maneja el navegador de forma nativa como un usuario real
❏ Permite simular todas las acciones de un usuario
❏ Ejecución local y remota
❏ Ventajas de Chrome Devtools Protocol
❏ Configuración del proyecto, reportes

40. E2E Testing Frameworks: lo bueno, lo malo y lo feo
WebDriverIO - Lo malo
❏ Documentación
❏ Debug
❏ Soporta solo Javascript

41. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Puppeteer
Script
Chrome Devtools Protocol

42. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Puppeteer - Lo bueno
❏ Ventajas de Chrome Devtools Protocol
❏ Soporta intercepción en la red
❏ Soporta simulación de velocidad de red
❏ Soporta métricas de performance

43. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Puppeteer - Lo malo
❏ Soporta un solo navegador
❏ No soporta ejecución en la nube
❏ Sauce Labs
❏ BrowserStack
❏ Soporta solo Javascript

44. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Playwright
Script
Chrome Devtools Protocol

45. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Playwright
Script
Chrome Devtools Protocol

46. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Playwright - Lo bueno
❏ Ventajas de Chrome Devtools Protocol
❏ Soporta intercepción en la red
❏ Soporta simulación de velocidad de red
❏ Soporta métricas de performance
❏ Soporta múltiples navegadores
❏ Soporta Javascript, Java, C#, Python

47. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Playwright - Lo malo
❏ Muy nuevo
❏ API está evolucionando
❏ La comunidad no es grande
❏ No soporta ejecución en la nube
❏ Sauce Labs
❏ BrowserStack

48. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Cypress
https://www.toolsqa.com/cypress/what-is-cypress/

49. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Cypress- Lo bueno
https://www.cypress.io/

50. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Cypress- Lo bueno
❏ Developer friendly
❏ Se ejecuta en el navegador
❏ Control sobre DOM
❏ Velocidad
❏ Manejo de esperas
❏ Funcionalidades adicionales
https://docs.cypress.io/guides/overview/key-differences

51. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Cypress- Lo malo
❏ Se ejecuta en el navegador
❏ No soporta eventos nativos
❏ Limitaciones para automatizar todas las acciones de usuario
❏ Múltiples tabs
❏ Múltiples navegadores al mismo tiempo
❏ Same-origin
❏ Código externo de Javascript
https://docs.cypress.io/guides/references/trade-offs

52. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Frameworks de automatización
❏ WebDriver ❏ CDP ❏ Javascript Injection

53. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Framework E2E a seguir
2021

54. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Selenium WebDriver 4

55. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Selenium WebDriver 4
❏ Soporte para Chrome Devtools Protocol
❏ Intercepción de request
❏ Métricas de performance
❏ Simulación de velocidad de red
❏ Mejoras de Selenium Grid
❏ Localizadores relativos
❏ Propuesta de WebDriver BiDi

56. Agenda
❏ Arquitectura de frameworks E2E
❏ Frameworks E2E
❏ ¿Cuál framework E2E usar?

57. E2E Testing Frameworks: lo bueno, lo malo y lo feo
https://applitools.com/blog/2020-front-end-automation-testing/
Frameworks más usados - Applitools
5-
4-
3-
2-
1- 75% de los usuarios
41% de crecimiento
10% de crecimiento

58. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Frameworks más usados

59. E2E Testing Frameworks: lo bueno, lo malo y lo feo
¿Cuál framework E2E usar?
1. Contexto
2. Frameworks más usados

60. E2E Testing Frameworks: lo bueno, lo malo y lo feo
¿Cuál framework E2E usar?
1. Scope Automatización
a. Amplio, complejo y largo plazo
2. Múltiples navegadores
1. Javascript
2. Funcionalidades de CDP
1. Flexibilidad y extensibilidad
2. Comunidad

61. E2E Testing Frameworks: lo bueno, lo malo y lo feo
¿Cuál framework E2E usar?
1. Javascript
2. CDP / Chrome
1. Muy nuevo
2. Futuro
1. Javascript
2. App simple y moderna
3. Colaboración con desarrollo

62. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Recurso - Testim - Comparación
https://www.testim.io/blog/puppeteer-selenium-playwright-cypress-how-to-choose/

63. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Cómo seguir...
Abel Quintana Lopez
https://youtube.com/playlist?list=PLQxDOQ6Qm9Uzinj9vTQ4It1Xhl7nDjYGm

64. E2E Testing Frameworks: lo bueno, lo malo y lo feo
Fórmula - E2E Testing Frameworks

65. E2E Testing Frameworks:
lo bueno, lo malo y lo feo
Ing. Abel Quintana Lopez
@beloquintana
¡Muchas Gracias!