Caso práctico
-
Comenzar a crear tests de aceptación de aplicaciones web con Selenium IDE.
-
Probar una aplicación funcional que implemente la autenticación y registro de usuarios.
-
Diseñar los casos de prueba para los escenarios de éxito y los escenarios de error.
Autenticación y registro de usuarios
Para comenzar a realizar las pruebas necesitamos una aplicación web funcional. En este caso práctico vamos a probar una aplicación que implemente la autenticación y registro de usuarios, así que vamos a comenzar por implementar esta funcionalidad. Tenemos dos alternativas: elegir una plantilla de proyecto que ya implemente la funcionalidad deseada, o bien hacerlo nosotros mismos.
Elige una plantilla
Aquí tienes una (o varias) plantilla(s) de aplicación web, en distintas tecnologías, que implementan un login y registro de usuarios.
-
Elege una de las plantillas. Si lo deseas puedes usar alguna otra plantilla en otra tecnología, así que toma una decisión y comentalo con el profesor antes para validar que implemente la funcionalidad básica requerida.
-
En local, crear el proyecto basado en la plantilla. Probar que funciona.
Usa tu propio proyecto
Como alternativa, si ya has desarrollado o estás desarrollando un proyecto similar en alguna tecnología que conozcas, y que implemente:
-
un login de usuario,
-
un registro de usuario, y
-
una modificación del perfil del usuario logueado
puedes usarlo en lugar de alguna de alguna de las plantillas propuestas. Pero asegúrate de que tu proyecto es funcional, es decir, implementa las 3 características indicadas y estas funcionan, ya que el objetivo es probarlas. Y además tu proyecto debe implementar los casos de error mediante los mensajes de validación oportunos. Si tu proyecto no es funcional, o no implementa esas 3 características o los casos de error, entonces mejor usa una plantilla de las propuestas.
Creación de los tests Selenium
Crear en Selenium los test cases necesarios para probar, tanto escenarios correctos como escenarios de error, de las siguientes funcionalidades:
Guardar los test cases en una test suite (formato .side).
Puesto que para realizar una prueba exhaustiva, cubriendo todos los posibles escenarios, el número de casos de prueba es elevado, la forma de trabajar es dividir las funcionalidades entre los miembros del equipo y así repartir el trabajo: Una persona que haga los tests de Registro de usuario + Editar perfil, y otra los de login de usuario + cambio de contraseña.
Implementación del test Registro de usuario (Caso correcto)
Para que el test de registro de usuario lo podamos ejecutar repetidamente sin que nos de el error de "usuario ya existe", tenemos que usar un email aleatorio en cada ejecución del test. Eso se consigue definiendo una variable en Selenium, llamado al comando execute script, escribiendo la función de JavaScript que genere ese email aleatorio, y guardándolo en una variable que luego usaremos en en paso que escribe el valor en el campo email del registro.
El paso sería del test case de Selenium IDE es:
-
Command: execute script
-
Target:
return "ual-" + Math.floor(Math.random()*1500000)+"@ual.es"` -
Value:
emailramdon
Implementación del test de email incorrecto
En aquellos formularios en los que se debe introducir una dirección de email y el campo está definido como tal en HTML5 mediante <input type="email" …>, el valor introducido se valida en el navegador de manera que cuando el valor introducido no es un email válido muestra un pop-up con el texto "Introduzca una dirección de correo." Este tipo de pop-ups no se pueden capturar con el menú contextual de Selenium IDE (botón derecho sobre el texto a validar), por lo que debemos usar un método alternativo.
Para ello, tras hacer click sobre el botón de enviar, debemos usar el comando execute script de Selenium IDE para que guarde el valor del atributo validationMessage del campo tipo email en una variable, y a continuación comprobamos el valor almacenado en esa variable. El resultado sería tal que así:
| 1 | Guarda el contenido del atributo validationMessage del campo con id email-address en la variable message:
|
| 2 | Muestra la variable message en el log de Selenium IDE. |
| 3 | Validación de que el valor de message es el esperado. |
El comando execute script permite acceder a los elementos y propiedades del DOM del documento HTML, y llamar a los métodos del mismo, en concreto en el ejemplo llama a getElementById("fieldId").
En caso de que el elemento no se pueda identificar por su id, como alternativa se usar el método getElementsByName("fieldName"), pero ten en cuenta que getElementsByName devuelve una colección de objetos HTMLCollection en lugar de un único objeto, por lo que si queremos acceder al primer elemento de la colección simplemente tenemos que añadir la posición entre corchetes: getElementsByName("fieldName")[0].
Otras alternativas son getElementsByClassName(), y getElementsByTagName().
Esta solución también se puede aplicar a otros campos de HTML5 que también crean este tipo de pop-ups para la validación, por ejemplo los campos que se establecen como requeridos, o con una longitud mínima y máxima, definidos por ejemplo así: <input type="password" required minlength="6" maxlength="10"/>
Otro ejemplo son los campos de fecha definidos como <input type="date" …>
|
Los mensajes de validación son distintos en cada navegador (Firefox, Chrome), tenlo en cuenta a la hora de definir el
|
Control de flujo en Selenium IDE
Como acabamos de ver en el punto anterior, puede ser necesario que en función del navegador que estemos usando o del idioma en que esté configurado dicho navegador, nuestro assert deba validar un mensaje u otro.
Selenium IDE permite añadir sentencias de control de flujo como condicionales y bucles.
El siguiente ejemplo usa de la propiedad navigator.userAgent que incluye información del navegador que se está utilizando en la ejecución del test.
execute script | return navigator.userAgent | valor_navigatoruserAgent
if | ${navigatoruserAgent}.includes("Firefox")
assert | message | Ajústese al formato solicitado: 8 character password.
end |
if | ${navigatoruserAgent}.includes("Chrome")
assert | message | Utiliza un formato que coincida con el solicitado
end |
De igual forma, la propiedad navigator.language puede ayudarnos a identificar el idioma del navegador: es_ES para español, en_GB para inglés.
Desplegar la aplicación en la nube
La aplicación que hemos probado localmente, debemos ponerla "en producción", es decir, desplegarla en la nuve para que esté disponible por nuestros usuarios (ficticios).
Dependiendo de la plantilla elegida, el despliegue será distinto. Puedes desplegar en un servicio de contenedores, o bien en una máquina virtual.
Adaptar los test a la URL de despliegue
Los test que hemos creado en el entorno de desarrollo, es decir, en nuestro equipo local, deben adaptarse para que funcionen en entorno de (pre)producción es decir, deben atacar a la aplicación desplegada.
Para ello simplemente tendrás que cambiar la URL base.