En esta charla se revisará los requerimientos para poder crear un set de pruebas utilizando el poder de varias herramientas como: Selenium WebDriverJS, NodeJS, TypeScript, Protractor, Cucumber y Chai, las cuales al ser combinadas resultan en la fácil creación de frameworks de automatización útiles en la industria. Presentada por: Gilberto Sánchez

1. Automatización de pruebas con
Selenium, Typescript, Protractor &
Cucumber
Presenta:
Gilberto Sánchez Mares

2. Hola!
Mi nombre es Gilberto Sanchez
Estoy aquí porque soy un profesional apasionado
por los temas de QA y Testing.
Puedes encontrarme en:
gilberto.sanchez@titaniumsolutions.org

3. Contenido
1. Beneficios de la automatización de pruebas
2. Introducción a Selenium
3. ¿Qué es TypeScript?
4. Protractor, ¿amigo o enemigo?
5. Behavior Driven Development con Cucumber
6. Demo

4. Beneficios de la
Automatización de
Pruebas1

5. Pruebas Automatizadas
Realizar pruebas automatizadas significa
utilizar una herramienta de
automatización para ejecutar una suite
de casos de prueba.
El software de automatización también
puede introducir datos de prueba en el
sistema bajo prueba, comparar los
resultados esperados y reales y generar
informes de prueba detallados.

6. “Objetivo de la automatización es reducir el número de
casos de prueba que se ejecutan manualmente y no
eliminar la prueba manual”

7. Beneficios de Automatizar
▪ La prueba manual de todos los flujos de trabajo, todos los campos, los escenarios
negativos, etc. es tiempo y costo.
▪ Es difícil probar sitios multilingües manualmente.
▪ La automatización no requiere intervención humana. Puede ejecutar la prueba
automatizada desatendida.
▪ La automatización aumenta la velocidad de ejecución de la prueba.
▪ La automatización ayuda a aumentar la cobertura de la prueba.
▪ Las pruebas manuales pueden llegar a ser aburridas y, por lo tanto, propensas a errores.

8. Introducción a
Selenium2

9. ¿Qué es Selenium?
Selenium es una suite de prueba automatizada gratuita
y de código abierto para aplicaciones web en diferentes
navegadores y plataformas

10. “Selenium removes
Mercury from the body”

11. Selenium Suite
01
IDE
Integrated
Development
Environment
02 RC
Remote Control
03 WebDriver
04 Grid

12. ¿Qué es TypeScript?3

13. TypeScript es un superset hecho por Microsoft el cual tiene una
sintaxis muy intuitiva y que nos recuerda a otros lenguajes orientados
a objetos

14. TypeScript a JavaScript
TypeScript convierte su código en Javascript común
ya que cuenta con un 'transpiler' que convierte todo
ese código a JavaScript e inclusive puede elegir entre
ES2015 o ES2016.
Es llamado también Superset de Javascript, lo que
significa que si el navegador está basado en
Javascript, este nunca llegará a saber que el código
original fue realizado con TypeScript y ejecutará el
Javascript como lenguaje original.
¿Qué es un superset?
Se trata de un lenguaje escrito sobre otro lenguaje. En este
caso Typescript es un lenguaje basado en JavaScript,
ofreciéndonos grandes beneficios.
Mientras otros superset de JavaScript (Elm, PureScript,
CoffeScript) nos alejan del código original, Typescript, por
el contrario, es muy similar a Javascript y a C# gracias a
que el arquitecto Anders Hejlsberg posee conocimientos
de ambos lenguajes
TypeScript, el Superset

15. ¿Porqué TypeScript?
▪ TypeScript es verdaderamente orientado a objetos, trayendo herramientas como la
herencia, sobrecarga, etc.
▪ Es de tipado estático, este tipado estático es opcional, pero obviamente su uso es muy
recomendado.
▪ Se tienen las herramientas de Javascript ES6 (EcmaScript 6) y muchas de la futura
especificación ES7.
▪ Es de fácil mantenimiento.
▪ Tiene soporte multi plataforma.

16. ¿Porqué TypeScript?

17. Protractor, ¿Amigo o
Enemigo?
4

18. Protractor es un framework para pruebas E2E diseñado para evaluar
aplicaciones escritas en AngularJS. No esta límitado a este framework
partícular, y es capaz de evaluar cualquier aplicación que se ejecute en un
navegador web

19. Características
▪ Está construido sobre WebDriverJS, que usa eventos nativos y controladores específicos
del navegador para interactuar con su aplicación como lo haría un usuario.
▪ Introduce una nueva sintaxis sencilla para los casos de prueba.
▪ Es una aplicación escrita en NodeJS.
▪ Las aplicaciones AngularJS son dínamicas, pero protractor se encarga de la sincronización.
▪ Interactúa con varios frameworks de pruebas unitarias automatizadas como Jasmie o
Mocha.

20. Ejemplo
Configuración Test

21. Behavior Driven
Development con
Cucumber5

22. ¿Qué es BDD?
▪ Aplicar el principio "Cinco ¿por qué?" a cada historia de usuario propuesta, de modo que
su propósito esté claramente relacionado con los resultados comerciales.
▪ Implementar solo aquellos comportamientos que contribuyen más directamente a estos
resultados comerciales, a fin de minimizar el desperdicio.
▪ Describir comportamientos en una sola notación que sea directamente accesible para los
expertos del negocio, testers y desarrolladores, a fin de mejorar la comunicación.
▪ Aplicar estas técnicas hasta los niveles más bajos de abstracción del software.
Es una síntesis y refinamiento de las prácticas derivadas del Test-Driven Development (TDD)
y Acceptance Test-Driven Development (ATDD).

23. ¿Qué es Cucumber?
es una herramienta de software para ejecuta pruebas
de aceptación automatizados escritas en un estilo
Behavior-Driven development (BDD)

24. Reduciendo la Brecha de
Cominicación
Business, cliente,
stakeholders
Equipo de
Desarrollo

25. Caracterísiticas
▪ Escribir pruebas que el negocio puede entender fácilmente.
▪ Mejor comunicación entre el equipo de negocio y desarrollo.
▪ Lenguaje común hablado (sin código), ejemplo: Inglés, francés, etc.
▪ Generalmente no técnico.
▪ Combina la especificación y la documentación de prueba en un todo.
▪ Asegura de cubrir diferentes escenarios.
▪ Se utiliza con cualquier tipo de prueba, no sólo de UI.

26. Cucumber y Selenium
Given I’m on the home page
When I choose more info
Then I should be taken to new page
WebDriver API
Go to … / home
Click more info link
Get browser URL

27. Estilos de Automatización
Declarative
Style
Code Style
Imperative
Style
Más detallado
Cercano a los
desarrolladores

28. Estilos de Automatización
Declarative
Style
Code Style
Imperative
Style
Más detallado
Cercano al negocio

29. Estilos de Automatización
Declarative
Style
Code Style
Imperative
Style
Menos detallado
El más cercano al negocio
Menos técnico

30. Demo
6

31. Gracias!
¿Alguna Pregunta?

32. @GilbertoSnchezM
Titanuim Solutions
Gilberto Sánchez Mares
Gilberto Sánchez Mares
gilberto.sanchez@titaniumsolutions.org
https://titaniumsolutions.org/
gilberto_gsm@hotmail.com