Version curso.2024
Ejercicios de tests de aceptación con Selenium.
-
Desplegar una plantilla de proyecto web con base de datos en Azure.
-
Comenzar a crear tests de aceptación de aplicaciones web con Selenium IDE.
1. Test de la web del equipo
Realiza con Selenium IDE los tests de la web del equipo de la sesión 04 que verifiquen que la web incorpora todos los elementos que se pedían que se incluyeran en la misma.
Como siempre, crea un repositorio (privado) en GitHub para guardar los archivos creados. Se trata de una actividad en equipo, así que aplica el método de colaboración habitual. Comparte el repositorio con el profesor para que pueda tener acceso al mismo.
2. Aplicación web con base de datos
Desde ahora hasta el final de la asignatura vamos a iniciar un proyecto de equipo consistente en el desarrollo de una aplicación web dinámica (con base de datos) sobre el que aplicar las herramientas y métodos que vamos introduciendo durante el curso. El proyecto tendrá diversa funcionalidad, como las operaciones CRUD (Create, Read, Update, Delete) sobre una o varias entidades, un login y registro de usuarios, etc., 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.
2.1. Elige una plantilla
El objetivo de esta práctica es diseñar e implementar pruebas de aceptación con Selenium IDE para una aplicación web que sea funcional y que implemente, al menos, las siguientes funcionalidades:
-
Registro de usuarios
-
Login de usuarios
-
CRUD (Create, Read, Update, Delete) sobre una entidad (por ejemplo, tareas, usuarios, eventos, etc).
Para ello, puedes elegir una (o varias) plantilla(s) de proyecto que ya implemente(n) estas funcionalidades. Es indiferente en que lenguaje esté implementada. Lo que sí es importante es que, además de ejecutar la aplicación web en tu entorno de desarrollo local, también debes desplegar la aplicación en Azure. Por tanto, sea cual sea la plantilla que elijas, asegúrate de que podrás desplegarla en Azure.
2.2. Plantillas Vaadin
Como propuesta, os dejo algunos ejemplos en Vaadin, que es un framework que conocéis de la asignatura MDS2. Además, estas plantillas usan una base de datos H2 en memoria, lo que facilita el despliegue y reduce los gastos de Azure.
-
Vaadin Registro de usuarios: Project example for creating a signup form with Vaadin Flow
-
Vaadin Login de usuarios y CRUD:
-
Inicia https://start.vaadin.com/. Sobre un proyecto en blanco añade una vista de tipo Java / Master-Detail.
-
En las propiedades, elige tu entidad favorita entre las 3 disponibles.
-
-
En la propiedad View access elige Users who have logged in. Esto te añadirá una página de Login.
-
Guarda el proyecto y descárgalo. Elije Java 17.
| Esta plantilla no implementa la eliminación. Puedes usarla en cualquier caso. |
Despliegue en Azure
Si has elegido una plantilla de Vaadin, puedes seguir la siguiente documentación: Azure deploy. Durante la ejecución del asistente, elije Java 17. Asegúrate que usa la capa F1 (gratis).
La ejecución del asistente modifica automáticamente el archivo pom.xml para añadir la configuración necesaria para desplegar en Azure.
<plugin>
<groupId>com.microsoft.azure</groupId>
<artifactId>azure-webapp-maven-plugin</artifactId>
<version>2.13.0</version>
<configuration>
<schemaVersion>v2</schemaVersion>
<resourceGroup>my-app-1715855750474-rg</resourceGroup> (1)
<appName>my-app-1715855750474</appName> (2)
<pricingTier>F1</pricingTier>
<region>centralus</region> (3)
<runtime>
<os>Linux</os>
<javaVersion>Java 17</javaVersion>
<webContainer>Java SE</webContainer>
</runtime>
<deployment>
<resources>
<resource>
<directory>${project.basedir}/target</directory>
<includes>
<include>*.jar</include>
</includes>
</resource>
</resources>
</deployment>
</configuration>
</plugin>| 1 | Puedes editar el nombre del grupo de recursos si lo deseas. |
| 2 | Puedes editar el nombre de la aplicación si lo deseas. |
| 3 | Puedes editar la región si lo deseas. |
2.3. 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 las funcionalidades indicadas, puedes usar tu propio proyecto.
|
Asegúrate de que tu proyecto es funcional, es decir, implementa las características indicadas y estas funcionan, ya que el objetivo es probarlas con Selenium. 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 características o los casos de error, entonces mejor usa alguna de las plantillas propuestas. |
Despliegue en Azure
En la documentación de Azure existen diversos tutoriales que describen como desplegar en Azure aplicaciones web con base de datos implementadas en distintas tecnologías. También dispones de ejemplos de despliegue en webapps. Estos tutoriales pueden servir de orientación para el despliegue de tu propio proyecto, aunque hay que tener cuidado al seguirlos paso a paso porque las instrucciones crean recursos relacionados con las bases de datos de elevado coste.
Por ello se recomienda que, si decides usar tu proyecto personal, configures una base de datos en memoria como H2 o SQLite.
En caso de duda consulta al profesor.
3. 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 CRUD sobre la entidad elegida:
|
En función de la tecnología que hayas elegido, tu plantilla de aplicación web tendrá todas estas funcionalidades, alguna de las indicadas anteriormente no estará implementada, o bien incorporará alguna funcionalidad adicional. En caso de que falte alguna, no te preocupes, crea los tests de las funcionalidades que estén incorporadas. Y si por el contrario la plantilla ofrece alguna funcionalidad adicional, puedes crear los tests de esa funcionalidad adicional de forma optativa. |
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 las dos primeras funcionalidades, y otra el resto.
|
Para equipos de 3 personas, como actividad adicional se pide probar el sitio demo disponible en https://opensource-demo.orangehrmlive.com, que es una aplicación web de gestión de recursos humanos. En este caso, se pide crear los tests de Selenium para las funcionalidades de Login, y Change password para el usuario logueado. |
4. Funciones avanzadas de Selenium IDE
Ciertos pasos de algunos casos de prueba no se podrán grabar grabar con Selenium IDE, sino que habrá que modificarlos manualmente. A continuación, se ponen algunos ejemplos, que pueden serte útiles. Dependiendo de tu proyecto necesitarás utilizarlos o no.
4.1. Creación de una tarea ya existente (Caso correcto)
Para que el test de creación de una tarea, si suponemos que el nombre de la tarea es un identificador único, no debería permitir crear una nueva tarea con el nombre de una tarea ya existente. La plantilla que estés usando puede que valide esta restricción o no. Si lo hace, para poder ejecutar este test repetidamente sin que de el error de "tarea ya existe", tenemos que usar un texto 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 valor te texto, por ejemplo un email aleatorio, y guardándolo en una variable que luego usaremos en en paso que escribe el valor en el campo tarea del formulario de creación.
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
4.2. Implementación del test incorrecto con validación HTML5
En aquellos formularios en los que se debe introducir un valor, por ejemplo 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
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 |
4.3. Control de flujo en Selenium IDE
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.
5. Desplegar la aplicación en Azure
La aplicación que hemos probado localmente, debemos ponerla "en producción", es decir, desplegarla en Azure para que esté disponible por nuestros usuarios (ficticios).
Dependiendo de la plantilla elegida, el despliegue será distinto. Los tutoriales indican como hacerlo mediante Web Apps.
Si los test los has creado en el entorno de desarrollo, es decir, en nuestro equipo local, deben adaptarse para que funcionen en entorno de producción es decir, deben atacar a la aplicación desplegada. Para ello simplemente tendrás que cambiar la URL base.