top of page
  • Foto del escritorJuan Fernández

Automatización Pruebas Web - Patrón Screenplay Cypress VS SerenityBDD


SerenityBDD  y Cypress  son sin duda 2 Frameworks para automatización de pruebas que son ampliamente conocidos y usados. Si a esto le adicionamos que Screenplay es uno de los patrones de diseño que como tiene sus seguidores, tiene sus detractores, se ha realizado esta charla/taller con el fin de implementar el patrón Screenplay con ambos frameworks y conocer sus ventajas y desventajas.


Cypress versus Serenity


No te nos lleves solo el código 🥺 Mira el video, Suscríbete a nuestro canal, dale Like y ahí si toma los links de interés, repositorio y consejos 😉


Todas tus dudas, postéalas en nuestro canal de Youtube o en esta entrada de Blog.




Antes de dejar los links de los repositorios, aquí un vistazo rápido del patrón Screenplay para entender la implementación que se hace con SerenityBDD usando Java y con Cypress usando Javascript.



patrón Screenplay

Este patrón nos indica entonces tener 4 capas en nuestro proyecto

  • Pages

  • Interactions

  • Tasks

  • Questions

Estas capas se relacionan por medio de un Actor el cual tiene unas habilidades (Abilities), estas habilidades le permiten Interactuar (Interactions) con los elementos de la pagina web, donde varias de esas Interacciones juntas se convierten en Tareas (Tasks), una vez esas Tareas se han completado, se debe validar el resultado de estas pruebas por medio de Preguntas (Questions) que dirán al final si la prueba es exitosa o no. Fácil no? 😅


Bueno, básicamente SerenityBDD ha adoptado este patrón como su hijo y por tal forma su integración con este Framework es muy “fácil” y conocida. No por nada tienen su propio espacio en la documentación.  


Sin embargo, han surgido herramientas que ayudan a optimizar el proceso de automatización de pruebas  como Cypress y el objetivo es ver como sería implementar este Patrón en esta herramienta que no ha sido concebida para esto. 


Se realizará una autenticación sencilla en la siguiente página https://www.saucedemo.com/v1/index.html pero pasando por todas las capas del patrón para entender su flujo de trabajo y luego lo mismo se va a implementar con Cypress pero usando las ventajas del Framework y de Javascript.



Implementación de Screenplay con

SerenityBDD - Cucumber - Gradle


Esta es la estructura del proyecto,en la capa main tenemos las 4 capas propuestas por el patrón y en la capa test Runners, StepDefinitions y Features relacionados a Cucumber (Lenguaje Gherkin)



Estructura del proyecto en la capa main

Para ver el detalle de la implementación puedes clonar el repositorio desde nuestra cuenta de Github. Github - Screenplay Con SerenityBDD 

Por favor referirte al README  para detalles adicionales y para contexto de las clases y automatización, recuerda el video.




Implementación de Screenplay con Cypress


Esta es la estructura del proyecto, dentro de la carpeta cypress tenemos las 4 capas propuestas por el patrón y adicionalmente, en la capa e2e generada por Cypress tendremos nuestro .cy.js para nuestro test.


Estructura del proyecto dentro de la carpeta cypress

Para ver el detalle de la implementación puedes clonar el repositorio desde nuestra cuenta de Github. Github - Screenplay Con Cypress 

Por favor referirte al README  para detalles de configuración y ejecución, bastante detallada para contexto de los archivos creados y la automatización, recuerda el video. Alli tienes todo el contexto.


Para esta implementación nos apoyamos de los Custom Commands que nos  brinda Cypress.



¡Importante!


En el ejemplo con SerenityBDD obviamente se usa Java y un enfoque de Programación Orientada a Objetos (POO). Esto no pasa en Javascript y por ende, la implementación que esta en el link anterior (en la rama main) es la implementación de Screenplay bajo las ventajas que nos brinda Javascript, sin embargo si quieres ver como sería esta implementación del patrón en Cypress pero usando POO. Puedes clonar esta rama Github - Screenplay Con Cypress usando POO  y comparar su implementación.


Otro detalle importante es que si bien la capa de Questions es propuesta por el Patrón, en este caso, ambas herramientas brindan soluciones para realizar Asserts evitando la creación de estas questions. Para este caso con SerenityBDD podemos usar Serenity Ensure y para Cypress sus Assertions.  



Conclusiones


Para concluir, les dejo algunos de los comentarios identificados en nuestra charla. 


Como se muestra en el video la implementación de Screenplay con SerenityBDD y Java puede ser un poco más larga y tediosa si no se tienen conceptos claros de POO como manejo de Interfaces, métodos estáticos, herencia etc. Sin embargo hay que reconocer que la documentación viva que genera SerenityBDD es muy robusta y clara, una ventaja que con Cypress debemos incorporar con librerias externas.


Un detalle que tal vez no paso desapercibido es que con SerenityBDD se uso Cucumber mientras que en Cypress no. Esto a nivel de tiempo es importante considerarlo, ya que la misma redacción de los escenarios en Lenguaje Gherkin toma tiempo. Asi que si somos lo bastante descriptivos con Cypress no necesitamos de Gherkin para hacer legibles nuestra automatización para todas las personas en el proyecto.


A nivel de aprendizaje, es claro que la curva de aprendizaje para SerenityBDD es mas larga VS Cypress, ya que sería ideal dominar POO y Selenium básico para entender las mejoras que SerenityBDD incorporo en su framework. Por otro lado Cypress reduce mucho la cantidad de codigo y al Javascript ser un lenguaje un poco mas flexible que Java, facilita el aprendizaje y manejo de los archivos que creamos para nuestros tests.



¿Tienes alguna conclusión, comentario o sugerencia sobre la charla?


Escribela en los comentarios entrada de Blog, sería genial debatir y compartir conocimiento entre todos.


Comments


bottom of page