En esta sesión presentaremos como estamos utilizando CasperJS (http://casperjs.org/) para asegurar la calidad de algunos de nuestros desarrollos y evitar los tan temidos (y comunes) bugs de regresión. Mostraremos el uso básico de CasperJS y veremos un caso real en el que estamos testando la lógica principal de un portal con procesos complejos que involucran submits de formularios multipaso, testeo con multiples roles, etc...

1. Casper js
Asegurando la calidad en front-­end

2. David gil
Desarrollador Drupal en
david.gil@biko2.com
@david_gil_biko2

3. ¿ en
proyectos
Drupal ?
Test funcionales
Aseguran que el
sw cumple los
requisitos

4. ¿Para qué?
* Test de regresión automatizados
- Automatizamos los test manuales.
- Grabaciones de navegación + aserciones
* Test de bugs de regresión automatizados
- Al resolver un bug creamos test para
garantizar que no se reproduce

5. ¿Para qué?
* Pruebas de humo automatizadas
- Prueban automáticamente que una serie de
funcionalidades clave siguen funcionando después
de un deploy
* refactoring

6. Show me the code!

7. Phantom js
PhantomJS es un navegador headless basado en
WebKit que proporciona un API JavaScript para
controlarlo.
Dispone de soporte nativo para: Manejo del DOM,
selectores CSS, JSON, Canvas y SVG.
¡Además, es rápido!.

8. Casper js
CasperJS es una librería javascript que permite
realizar scripts de navegación y tests usando
PhantomJS (y SlimerJS).
Permite realizar test de front-end del estilo a los
que se realizan con frameworks como PHPUnit
para testear código.

9. Casper js
Syntactic Sugar para:
• Definir pasos de navegación
• Rellenar y enviar formularios
• Click y seguir links
• Capturar pantallazos
• Testear el DOM
• Descargar recursos
• Escribir test funcionales y exportar los resultados
a JUnit XML
• scraping de Webs

10. Pruebas de humo en
www.museoreinasofia.es
Ej.1

12. Verde que te quiero verde!

13. Test de regresión en
www.museoreinasofia.es
Ej.2

14. Asegurando el css: phantom css
https://github.com/Huddle/PhantomCSS

16. La primera vez es distinto

17. La primera vez es distinto

18. Verde que te quiero verde!

19. Vamos a hacerlo fallar

20. Soy un artista!

21. chapucero

22. Test con drupal
Ej.3
www.internetacademi.com

23. ¡titan juampy!
Utilidades para casper en drupal
https://www.drupal.org/project/casperjs

24. internetAcademi vive de
vender cursos. ¡Que no se
rompa el proceso de
compra!
test de funcionalidades clave
• Hago una compra como anónimo y hago
verificaciones en el front
• Me conecto al backend como admin
• ¿Esta la compra? ¿importe correcto? ¿estado
correcto?
• ¿No vale solo el front?. Tenemos procesos
complejos de sincronización con salesforce

31. Verde que te quiero verde!

32. Resurrectio: Grabación de test
https://github.com/ebrehault/resurrectio

33. ¡Muchas gracias!
david.gil@ biko2.com
@david_gil_biko2