JOURMOLY

Si hay algo que me aburre es hacer Testing de sistemas, sobre todo si se trata de probar el funcionamiento de varios formularios varias veces seguidas. Las pruebas son muy repetitivas, aburridas, pero imprescindibles y es por eso que, salvo que tengas un equipo de gente dedicada al testing a tu disposición, la siguiente herramienta te interesará si o si.

Selenium es, en pocas palabras, un juego de herramientas que permite probar sistemas web de manera automatizada. Las pruebas que realiza son como las que haría cualquier usuario desde un navegador, con la ventaja de que las hace mucho mas rápido y nos evita el trabajo repetitivo de probar una y otra vez lo mismo “a mano”.

¿Cómo funciona?

No hace magia y no adivina lo que queremos probar, por lo tanto debemos enseñarle de alguna manera que es lo que queremos para que después pueda reproducirlo automáticamente las veces que necesitemos.

¿Cómo le enseñamos?

Selenium provee unas api en diferentes lenguajes (PHP, Ruby, JAVA, Javascript, etc) que nos permiten indicarle mediante comandos que pruebas debe hacer. Cada comando es del estilo “Haz click aquí”, “Espera a que se recargue la pagina”, “Completa tal campo de formulario”, “Haz Click en el Botón enviar”, “Verifica el resultado”, etc.

Como toda herramienta nueva es necesario aprender sus trucos y las apis tienen bastantes detalles que pueden lograr ahogarnos antes de empezar. La buena noticia es que además de las api posee un IDE (aún en version Beta) que automatiza aun más la tarea, es sencillo y nos ayuda a aprender los comandos mas rápidamente, no es tan flexible como las apis pero de todos modos es una herramienta muy potente y es lo que pretendo mostrarles en este artículo.

Descargando e instalando el IDE

El IDE es un plugin para Firefox. Se descarga y se instala desde aquí. Reinician Firefox y listo. Para visualizar el IDE vamos a Ver -> Panel lateral -> Selenium IDE y nos lo mostrará como un Panel dentro de la ventana principal de Firefox.

Nuestra primer prueba

Para nuestra primer prueba utilizaremos a Google, le enseñaremos al IDE de Selenium que queremos que busque y luego este será capaz de repetir los mismos pasos la cantidad de veces que queramos. ¿Y cómo le enseñamos? Fácil, Selenium tiene una pequeña gran utilidad que es “Grabar” y lo que hace es simplemente eso, grabar cada uno de nuestros movimientos en el navegador. Para que se entienda mejor iremos directo a la prueba.

En una pestaña de Firefox abrimos www.google.com y seguido abrimos el IDE. Habilitamos el botón grabar (debe quedar de color rojo claro) y luego escribimos la URL que vamos a usar de base para nuestra prueba tal y como se puede ver en la siguiente imagen:

Ahora navegaremos un poco por google para que Selenium vaya registrando cada acción:

• Escribimos en el cuadro de búsqueda la palabra ‘Selenium’.
• Hacemos click en el botón ‘Google Search’ y esperamos a que se cargue la pagina con los resultados.
• Hacemos click en el primer resultado que es la página oficial de Selenium.
• Desactivamos el botón grabar del IDE.

Habrán notado que a medida que hacían clicks, el IDE iba generando algunos comandos… y si siguieron todos los pasos deberían haber logrado algo como lo que muestra la siguiente imagen:

Como se puede ver en la imagen se han generado 4 comandos, el primero es open y lo único que hace es reiniciar la prueba yendo a la dirección de inicio. Los siguientes 3 comandos indican exactamente lo que nosotros hicimos manualmente hace un momento pero de manera mas específica.

• El comando type escribe la palabra ‘Selenium’ en el input de nombre ‘q’.
• clickAndWait, hace click en el boton de nombre ‘btnG’ y espera a que se recargue la página.
• Nuevamente clickAndWait, pero en este caso se hace click en el enlace indicado.

Nota: Si por alguna razon en lugar de ClickAndWait les aparece Click a secas, cambienlo manualmente seleccionando el comando y editándolo un poco mas abajo. Si usamos click con enlaces a veces tira errores porque éste no espera a que se recargue la página, cosa que si hace el comando ClickAndWait.

Ya le hemos enseñado a Selenium la prueba que deseamos hacer y estamos listos para indicarle que la ejecute, para ello hacemos click en el botón ‘Reproducir prueba’, el play, y observamos. (Les recomiendo que antes muevan el selector de velocidad de Fast a Slow para que puedan apreciar la prueba).

Selenium ira ejecutando comando por comando, recargará la pagina, escribirá en el cuadro de búsqueda y luego entrará al enlace que le indicamos. En el panel de comandos se irán marcando en verde los que se ejecutaron correctamente y en rojo los que no. A su vez en la parte de Log (abajo) aparecerán los mismos pasos pero más detallados.

¿No es genial? En realidad no mucho con esta prueba, pero imaginen hacer esto mismo con 5 formularios que incluyen todo tipo de opciones (texto, combobox, campos para subir archivos, checkboxes, etc). Solo debemos realizar una prueba bien completa y luego Selenium la repite cuando se lo indicamos.

Para avanzar un poquito más les mostraré como hacer para que Selenium verifique la existencia de un texto. Con el IDE abierto y teniendo el foco de Firefox en la pestaña de la prueba vamos a verificar la existencia del texto ‘Selenium is a test tool for web applications’ en la pagina oficial de Selenium.

• En el IDE hacemos click en la fila siguiente a la del último comando para indicar que el próximo debe ir ahí y no mezclado con los que ya tenemos.
• En la pagina oficial de Selenium, seleccionamos el texto que indique recien, hacemos click derecho sobre él y seleccionamos la opcion “VerifyTextPresent Selenium is a test tool for web applications” como se muestra en la imagen.

Luego de estos pasos se habrá agregado un nuevo comando al listado que ya teníamos, y si ejecutamos la prueba podremos ver el resultado.

Ahora para jugar un poco haremos fallar la prueba, en el IDE hacemos click sobre el ultimo comando (VerifyTextPresent) y veremos que un poco mas abajo hay un espacio donde podremos editarlo cambiando la frase que debe buscar. Sacamos la frase actual y colocamos una que no aparece en el sitio de Selenium, por ejemplo ‘Jourmoly’.

Ejecutamos la prueba y observamos el resultado:

Y como esperábamos, el último comando se ha marcado en rojo porque no encontró el texto que indicamos.

Reutilizando las pruebas

Si queremos utilizar esta prueba mañana nuevamente va a ser necesario guardarla, para eso vamos a Archivo y luego hacemos click en ‘Save Test Case’. Mañana cuando la queramos utilizar abriremos el archivo que guardamos tal y como hacemos en cualquier aplicación.

También podemos crear una Test Suite que no es mas que un conjunto de pruebas, la ventaja es que nos permitirá tener, por ejemplo, 10 pruebas diferentes para un mismo sistema y ejecutarlas una por vez automáticamente mientras tomamos un café.

Si por alguna razón no pudiste seguir esta prueba aqui te comparto el archivo de mi prueba, solo descomprímelo, ábrelo con el IDE y ya podrás utilizarlo.

Practicando

Si desean practicar y no tienen nada mejor a mano pueden usar el siguiente script:

http://www.jourmoly.com.ar/ejemplos/selenium/

Es un sencillo login con usuario ’selenium’ y password ‘ide’, la idea es que prueben todo lo que se les ocurra, experimenten alguno de los otros (muchos) comandos que brinda Selenium IDE, etc.

Desde aqui pueden descargar la prueba que he hecho yo: click.

Notas finales

Vimos con unos pocos comandos como se puede hacer una prueba del tipo ‘¿Anda o no anda?’ pero muy básica, para cosas mas completas hay una pila de comandos por investigar :-D. Espero que les haya parecido interesante y como siempre, si tienen alguna duda pueden usar los comentarios de este artículo

PD:

Sí, como se ve en las capturas sigo con Ubuntu :-D. El proximo cambio será en la oficina, en breve… pero aún estoy viendo como me las voy a arreglar con el tema de Flash/Actionscript, no es muy sencillo desde Linux y me parece que aun dependeré un poco de WinXP.

Articulos Relacionados

• W3C Validator se renueva?
• PHP Data Objects - PDO
• Introducción a MVC con PHP, segunda parte