From 2f1dcb9ca0b1d93deaf1d7d5290543a03b258637 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Joaqu=C3=ADn=20Ca=C3=B1adas=20Mart=C3=ADnez?= Date: Tue, 14 May 2024 11:07:58 +0200 Subject: [PATCH] selenium 2024 --- docs/index.adoc | 2 +- docs/index.html | 44 +------ docs/modules/ROOT/pages/index.adoc | 21 ---- .../pages/selenium-ide-ejercicios-crud.adoc | 65 +++++----- .../pages/selenium-ide-ejercicios-crud.html | 119 ++++++++---------- 5 files changed, 86 insertions(+), 165 deletions(-) diff --git a/docs/index.adoc b/docs/index.adoc index 4ba6015..c21c700 100644 --- a/docs/index.adoc +++ b/docs/index.adoc @@ -33,7 +33,7 @@ ifdef::backend-pdf[] :toc!: endif::[] -:page-component-display-version: curso.2023 +:page-component-display-version: curso.2024 // :leveloffset: 1 diff --git a/docs/index.html b/docs/index.html index ee7c640..bf4c818 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,7 +4,7 @@ - + Pruebas de aceptación con Selenium @@ -85,10 +85,10 @@ ul,ol,dl{line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit} ul,ol{margin-left:1.5em} ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0} +ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit} +ul.square{list-style-type:square} ul.circle{list-style-type:circle} ul.disc{list-style-type:disc} -ul.square{list-style-type:square} -ul.circle ul:not([class]),ul.disc ul:not([class]),ul.square ul:not([class]){list-style:inherit} ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0} dl dt{margin-bottom:.3125em;font-weight:bold} dl dd{margin-bottom:1.25em} @@ -444,7 +444,7 @@

Pruebas de aceptación con Selenium

-

Version curso.2023

+

Version curso.2024

    @@ -454,42 +454,10 @@

    Pruebas de aceptación con Selenium

  1. Ejercicios Parte 1 - Proyecto Aplicación Web con base de datos

    2. -
  2. -

    Tutoriales de Aplicacion Web con Base de datos para los Ejercicios Parte 1 (adaptados de los tutoriales de Azure)

    -
    -
      -
    1. -

      Aplicación Web DotNet Core con Base de datos SQL en Azure ← RECOMENDADO !!!

      -
      2. -
    2. -

      Aplicación Web ASP.NET con Base de datos SQL en Azure

      -
      3. -
    3. -

      Aplicación Web PHP con MySQL en Azure

      -
      4. -
    -
    -
    -
      -
    1. -

      Aplicación web de Node.js y MongoDB en Azure

      -
      2. -
    2. -

      Aplicación Web Ruby con Postgres en Azure

      -
      3. -
    3. -

      Aplicación Web Python con Postgres en Azure

      -
      4. -
    4. -

      Aplicación Web Java Spring con Cosmos DB en Azure

      -
      5. -
    -
    -
-
    +

    1. Parte 2: Selenium WebDriver

      @@ -511,4 +479,4 @@

      Pruebas de aceptación con Selenium

- + \ No newline at end of file diff --git a/docs/modules/ROOT/pages/index.adoc b/docs/modules/ROOT/pages/index.adoc index 3350428..58a6645 100644 --- a/docs/modules/ROOT/pages/index.adoc +++ b/docs/modules/ROOT/pages/index.adoc @@ -19,28 +19,7 @@ _Version_ *{page-component-display-version}* . link:{sectionPath}/selenium-ide-ejercicios-crud.html[Ejercicios Parte 1 - Proyecto Aplicación Web con base de datos] -. *Tutoriales de Aplicacion Web con Base de datos* para los Ejercicios Parte 1 (adaptados de los https://learn.microsoft.com/es-es/azure/app-service/tutorial-dotnetcore-sqldb-app[tutoriales de Azure]) -+ -:section: tutorial-dotnetcore-sql -:sectionPath: modules/{section}/pages -.. link:{sectionPath}/tutorial-dotnetcore.html[Aplicación Web DotNet Core con Base de datos SQL en Azure] <- RECOMENDADO !!! - -+ -[start=2] -.. link:modules/tutorial-aspnet-sql/pages/tutorial-aspnet.html[Aplicación Web ASP.NET con Base de datos SQL en Azure] [start=3] -.. Aplicación Web PHP con MySQL en Azure - -+ -[start=4] -:section: tutorial-node-mongo -:sectionPath: modules/{section}/pages -.. link:{sectionPath}/tutorial-node-mongo.html[Aplicación web de Node.js y MongoDB en Azure] -.. Aplicación Web Ruby con Postgres en Azure -.. Aplicación Web Python con Postgres en Azure -.. Aplicación Web Java Spring con Cosmos DB en Azure - -[start=4] :section: ROOT :sectionPath: modules/{section}/pages . *Parte 2: Selenium WebDriver* diff --git a/docs/modules/ROOT/pages/selenium-ide-ejercicios-crud.adoc b/docs/modules/ROOT/pages/selenium-ide-ejercicios-crud.adoc index 1ea58f2..b5f23e1 100644 --- a/docs/modules/ROOT/pages/selenium-ide-ejercicios-crud.adoc +++ b/docs/modules/ROOT/pages/selenium-ide-ejercicios-crud.adoc @@ -23,7 +23,7 @@ ifdef::env-github[] :figure-caption: Figura endif::[] -:page-component-display-version: curso.2022 +:page-component-display-version: curso.2024 _Version_ *{page-component-display-version}* [abstract] @@ -54,7 +54,7 @@ La realización de estas actividades se realizará *en equipo*. La entrega será 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 fork + pull request. Comparte el repositorio con el profesor para que pueda tener acceso al mismo. +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. == Aplicación web con base de datos @@ -64,51 +64,43 @@ Desde ahora hasta el final de la asignatura vamos a iniciar un proyecto de equip === Elige una plantilla -Os dejo aquí en enlace a la documentación oficial de https://docs.microsoft.com/es-es/azure/app-service/[Azure Web apps, window=_blank] varios ejemplos de plantillas de *aplicación web con base de datos*, en distintas tecnologías, que básicamente implementan una aplicación que permite crear tareas, listarlas, modificarlas y eliminarlas. Podrás encontralas en el menú _Tutoriales_ / _Aplicación con base de datos_. +*Vaadin*: +- Registro de usuarios +- Login de usuarios +- CRUD -.Tutoriales de Aplicación Web con base de datos -image::azure-tutoriales-basededatos.png[role="thumb", align="center"] - -.Proyecto TO-DO - Opciones -**** -Elige la tecnología que prefieras, os animo a elegir una que tengáis curiosidad por aprender. Seguramente seguirás usando esa tecnología para el proyecto hasta el final de la asignatura, así que tomad la decisión en equipo. En cualquier caso, si más adelante quieres cambiar de tecnología para alguna de las siguientes prácticas, no habrá problema. - -Como alternativa, si lo deseas, puedes usar alguna otra plantilla que conozcas que no esté entre los tutoriales de Azure, incluso en otra tecnología (por ejemplo, Go). En ese caso, comentádmelo antes para validar que implemente la funcionalidad básica requerida (CRUD). - -**** - -Sique las instrucciones del tutorial elegido, pero antes ten en cuenta lo siguiente: - -- En la mayoría de los tutoriales te indicará los pasos para probar que la aplicación funciona _en local_ antes de subirla a la Web App de Azure. Cuando sea necesario, el tutorial te indicará unos *Prerrequitos* que tendrás que tener en tu PC local, y ofrecerá dos opciones: - - * Use el entorno de Bash en https://docs.microsoft.com/es-es/azure/cloud-shell/quickstart[Azure Cloud Shell, window=_blank]: tiene la ventaja de que todo el software necesario ya está instalado en la Cloud Shell, por lo que no necesitarás instalar nada en local. - - * Si prefieres ejecutar la aplicación localmente, esta opción implica que debes instalar todo el software indicado como prerrequisitos que aun no tengas en tu PC (php, node, python, etc). - -- Comprueba el gasto que vas a realizar con la creación de la Web App y la base de datos del tutorial que elijas. El consumo de la Web App dependerá del tipo de SKU que crea tutorial. Los pasos para crear una web app gratuita (SKU Free) están buen detallados en el apartado https://docs.microsoft.com/es-es/azure/app-service/tutorial-dotnetcore-sqldb-app?tabs=azure-portal%2Cvisualstudio-deploy%2Cdeploy-instructions-azure-portal%2Cazure-portal-logs%2Cazure-portal-resources#2---create-the-app-service[2. Creación de la instancia de App Service] del tutorial de DotNet Core, así que consultalos si es necesario. - -- Los comandos que aparencen en los tutoriales que comienzan por `az` permiten interactuar con los servicios Azure utilizando la CLI (Command Line Interface) de Azure. Básicamente, la CLI es una alternativa a usar el Portal de Azure, de manera que en lugar de operar forma interactiva sobre la interfaz web del Portal Azure, utilizarás los comandos de la CLI para crear y configurar los servicios. Los comandos `az` los podrás ejecutar https://docs.microsoft.com/es-es/azure/cloud-shell/quickstart[Azure Cloud Shell, window=_blank] (recomendado) o bien en local, y en este último caso (https://docs.microsoft.com/es-ES/cli/azure/install-azure-cli[instale la CLI de Azure, window=_blank]). +Azure deploy +consulta la siguiente documentación para desplegar la aplicación en Azure: https://vaadin.com/docs/latest/production/cloud-providers/azure === 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: -- la funcionalidad de listado, creación, modificación y eliminación (CRUD) sobre al menos una determinada entidad (por ejemplo: tareas, usuarios, eventos, etc.) +- Debe incluir la funcionalidad de registro y login de usuarios. +- La funcionalidad de listado, creación, modificación y eliminación (CRUD) sobre al menos una determinada entidad (por ejemplo: tareas, usuarios, eventos, etc.) + Pero 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 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: +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: **** -- Listado de tareas (Caso correcto) -- Listado de tareas (Casos incorrectos) -- Creación de una tarea (Caso correcto) -- Creación de una tareas (Casos incorrectos) -- Modificación de una tarea (caso correcto) -- Modificación de una tarea (casos incorrectos) -- Eliminación de una tarea (caso correcto) -- Eliminación de una tarea (casos incorrectos) +- Registro de usuarios (caso correcto) +- Registro de usuarios (casos incorrectos) +- Login (caso correcto) +- Login (casos incorrectos) + +CRUD sobre una entidad (por ejemplo, tareas, usuarios, eventos, etc.): + + - Listado (Caso correcto) + - Listado (Casos incorrectos) + - Creación (Caso correcto) + - Creación (Casos incorrectos) + - Modificación (caso correcto) + - Modificación (casos incorrectos) + - Eliminación (caso correcto) + - Eliminación (casos incorrectos) **** [NOTE] ==== @@ -118,11 +110,10 @@ 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*, se pide elegir dos tecnologías y crear los tests de selenium para los dos proyectos. Al ser más carga de trabajo, en este caso se deja como optativo los tests de _Modificación de una tarea_. [WARNING] ==== -Como *alternativa a la segunda tecnología* para los equipos de 3 personas, y evitar el gasto Azure, se puede 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. +Para *equipos de 3 personas*, se puede 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. ==== == Funciones avanzadas de Selenium IDE diff --git a/docs/modules/ROOT/pages/selenium-ide-ejercicios-crud.html b/docs/modules/ROOT/pages/selenium-ide-ejercicios-crud.html index a3b093b..d80d7ec 100644 --- a/docs/modules/ROOT/pages/selenium-ide-ejercicios-crud.html +++ b/docs/modules/ROOT/pages/selenium-ide-ejercicios-crud.html @@ -471,7 +471,7 @@

Ejercicios Selenium. Aplicación con base de datos

-

Version curso.2022

+

Version curso.2024

@@ -503,7 +503,7 @@

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 fork + pull request. Comparte el repositorio con el profesor para que pueda tener acceso al mismo.

+

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.

@@ -516,50 +516,14 @@

2. Aplicación web con base de datos

2.1. Elige una plantilla

-

Os dejo aquí en enlace a la documentación oficial de Azure Web apps varios ejemplos de plantillas de aplicación web con base de datos, en distintas tecnologías, que básicamente implementan una aplicación que permite crear tareas, listarlas, modificarlas y eliminarlas. Podrás encontralas en el menú _Tutoriales / Aplicación con base de datos.

-
-
-
-azure tutoriales basededatos -
-
Figura 1. Tutoriales de Aplicación Web con base de datos
-
-
-
-
Proyecto TO-DO - Opciones
-
-

Elige la tecnología que prefieras, os animo a elegir una que tengáis curiosidad por aprender. Seguramente seguirás usando esa tecnología para el proyecto hasta el final de la asignatura, así que tomad la decisión en equipo. En cualquier caso, si más adelante quieres cambiar de tecnología para alguna de las siguientes prácticas, no habrá problema.

-
-
-

Como alternativa, si lo deseas, puedes usar alguna otra plantilla que conozcas que no esté entre los tutoriales de Azure, incluso en otra tecnología (por ejemplo, Go). En ese caso, comentádmelo antes para validar que implemente la funcionalidad básica requerida (CRUD).

-
-
+

Vaadin: +- Registro de usuarios +- Login de usuarios +- CRUD

-

Sique las instrucciones del tutorial elegido, pero antes ten en cuenta lo siguiente:

-
-
-
    -
  • -

    En la mayoría de los tutoriales te indicará los pasos para probar que la aplicación funciona en local antes de subirla a la Web App de Azure. Cuando sea necesario, el tutorial te indicará unos Prerrequitos que tendrás que tener en tu PC local, y ofrecerá dos opciones:

    -
    -
      -
    • -

      Use el entorno de Bash en Azure Cloud Shell: tiene la ventaja de que todo el software necesario ya está instalado en la Cloud Shell, por lo que no necesitarás instalar nada en local.

      -
      • -
    • -

      Si prefieres ejecutar la aplicación localmente, esta opción implica que debes instalar todo el software indicado como prerrequisitos que aun no tengas en tu PC (php, node, python, etc).

      -
      • -
    -
    -
    • -
  • -

    Comprueba el gasto que vas a realizar con la creación de la Web App y la base de datos del tutorial que elijas. El consumo de la Web App dependerá del tipo de SKU que crea tutorial. Los pasos para crear una web app gratuita (SKU Free) están buen detallados en el apartado 2. Creación de la instancia de App Service del tutorial de DotNet Core, así que consultalos si es necesario.

    -
    • -
  • -

    Los comandos que aparencen en los tutoriales que comienzan por az permiten interactuar con los servicios Azure utilizando la CLI (Command Line Interface) de Azure. Básicamente, la CLI es una alternativa a usar el Portal de Azure, de manera que en lugar de operar forma interactiva sobre la interfaz web del Portal Azure, utilizarás los comandos de la CLI para crear y configurar los servicios. Los comandos az los podrás ejecutar Azure Cloud Shell (recomendado) o bien en local, y en este último caso (instale la CLI de Azure).

    -
    • -
+

Azure deploy +consulta la siguiente documentación para desplegar la aplicación en Azure: https://vaadin.com/docs/latest/production/cloud-providers/azure

@@ -570,7 +534,10 @@

2.2. Usa tu propio proyecto

  • -

    la funcionalidad de listado, creación, modificación y eliminación (CRUD) sobre al menos una determinada entidad (por ejemplo: tareas, usuarios, eventos, etc.)

    +

    Debe incluir la funcionalidad de registro y login de usuarios.

    +
    • +
  • +

    La funcionalidad de listado, creación, modificación y eliminación (CRUD) sobre al menos una determinada entidad (por ejemplo: tareas, usuarios, eventos, etc.)

@@ -584,35 +551,54 @@

2.2. Usa tu propio proyecto

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:

+

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:

  • -

    Listado de tareas (Caso correcto)

    +

    Registro de usuarios (caso correcto)

    +
    • +
  • +

    Registro de usuarios (casos incorrectos)

    +
    • +
  • +

    Login (caso correcto)

    +
    • +
  • +

    Login (casos incorrectos)

    +
    • +
+
+
+

CRUD sobre una entidad (por ejemplo, tareas, usuarios, eventos, etc.):

+
+
+
    +
  • +

    Listado (Caso correcto)

  • -

    Listado de tareas (Casos incorrectos)

    +

    Listado (Casos incorrectos)

  • -

    Creación de una tarea (Caso correcto)

    +

    Creación (Caso correcto)

  • -

    Creación de una tareas (Casos incorrectos)

    +

    Creación (Casos incorrectos)

  • -

    Modificación de una tarea (caso correcto)

    +

    Modificación (caso correcto)

  • -

    Modificación de una tarea (casos incorrectos)

    +

    Modificación (casos incorrectos)

  • -

    Eliminación de una tarea (caso correcto)

    +

    Eliminación (caso correcto)

  • -

    Eliminación de una tarea (casos incorrectos)

    +

    Eliminación (casos incorrectos)

@@ -638,9 +624,6 @@

3. Creación de los tests Selenium

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, se pide elegir dos tecnologías y crear los tests de selenium para los dos proyectos. Al ser más carga de trabajo, en este caso se deja como optativo los tests de Modificación de una tarea.

-
@@ -649,7 +632,7 @@

3. Creación de los tests Selenium

@@ -688,7 +671,7 @@

4.1. Creación de un
register email ramdon
-
Figura 2. Generación de un email aleatorio
+
Figura 1. Generación de un email aleatorio
@@ -700,7 +683,7 @@

4.2. Impleme
selenium ide email incorrecto
-
Figura 3. Pop-up de validación en HTML5: email incorrecto
+
Figura 2. Pop-up de validación en HTML5: email incorrecto

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í:

@@ -709,7 +692,7 @@

4.2. Impleme
selenium ide email incorrecto commands
-
Figura 4. Comandos en Selenium IDE para validar el mensaje de email incorrecto.
+
Figura 3. Comandos en Selenium IDE para validar el mensaje de email incorrecto.

-

Como alternativa a la segunda tecnología para los equipos de 3 personas, y evitar el gasto Azure, se puede 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.

+

Para equipos de 3 personas, se puede 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.
@@ -756,19 +739,19 @@

4.2. Impleme
selenium ide contraseña requerida
-
Figura 5. Pop-up de validación en HTML5: contraseña requerida
+
Figura 4. Pop-up de validación en HTML5: contraseña requerida
selenium ide contraseña requerida assert
-
Figura 6. Comandos en Selenium IDE para validar contraseña vacía.
+
Figura 5. Comandos en Selenium IDE para validar contraseña vacía.
selenium ide contraseña incorrecta
-
Figura 7. Pop-up de validación en HTML5: contraseña demasiado corta
+
Figura 6. Pop-up de validación en HTML5: contraseña demasiado corta

Otro ejemplo son los campos de fecha definidos como <input type="date" …​>

@@ -777,7 +760,7 @@

4.2. Impleme
date picker chrome error message
-
Figura 8. Pop-up de validación en HTML5: fecha incorrecta
+
Figura 7. Pop-up de validación en HTML5: fecha incorrecta

@@ -837,7 +820,7 @@

4.3. Control de flujo en Selenium IDE
selenium ide conditional navigators
-
Figura 9. Uso de condicional para distinguir entre navegadores
+
Figura 8. Uso de condicional para distinguir entre navegadores

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.

@@ -862,8 +845,8 @@

5. Desplegar la aplicación en Azure

- + \ No newline at end of file