Taller 6.1

SAVE OFFLINE

Departamento de Ingeniería de Sistemas Telemáticos

INGENIERÍA DE SISTEMAS Y SERVICIOS TELEMÁTICOS

SESIÓN 6

PRUEBAS WEB CURSO 2014/2015

Hugo Alexer Parada Gélvez Juan Carlos Dueñas López {hparada, jcduenas}@dit.upm.es Este documento incluye una guía de instalación y configuración

del

aplicaciones web.

entorno

de

pruebas

para

Sesión 6: Pruebas Web

Pruebas Web PRÁCTICA 6

Contenido 1 INTRODUCCIÓN ....................................................................... 2 1.1 Metodología de trabajo y evaluación ........................................... 2 2 RECURSOS NECESARIOS .......................................................... 3 3 PRUEBAS FUNCIONALES .......................................................... 3 3.1 Configuración de Selenium ........................................................ 3 3.1.1 Selenium IDE ...................................................................... 3 3.1.2 Ejemplo de Prueba funcional con Selenium IDE ...................... 17 3.1.3 Selenium WebDriver .......................................................... 18 3.1.4 Creación del caso de prueba como una clase Java con un método main(). 22 3.1.5 Exportar test de Selenium IDE a Selenium WebDriver como un caso de prueba Junit .............................................................................. 26

Página

1

Sesión 6: Pruebas Web

1 INTRODUCCIÓN El proceso de pruebas (testing) es una parte muy importante del ciclo de desarrollo del software ya que permite evaluar y mejorar su calidad mediante la identificación defectos (bugs). Sin embargo, este proceso de pruebas puede llegar a ser muy costoso si se hacen de forma manual. Además, este método artesanal también tiene el inconveniente de no ser estrictamente repetible, por lo que la reproducción de las pruebas puede ofrecer diferentes resultados cada vez. Es por ello que conviene automatizar la ejecución de las pruebas en la medida de lo posible con el objetivo de ahorrar tiempo y esfuerzo y de proporcionar un conjunto de pruebas repetibles del que se pueda esperar siempre un mismo resultado. El objetivo de esta sesión es la de proporcionar al alumno familiaridad con el uso de herramientas de automatización de pruebas. Para ello utilizaremos los frameworks de pruebas de código libre JUnit y Selenium. Se asume conocimiento previo del framework JUnit.

1.1 Metodología de trabajo La sesión se realizará de forma individual, siguiendo el guión incluido en este documento. La sección final del documento incluye el enunciado de la práctica del tema, que se entregará a través de moodle.

Página

2

Sesión 6: Pruebas Web

2 RECURSOS NECESARIOS Para la realización de la sesión debe contar con: • •

Un entorno de desarrollo Eclipse, configurado para el aplicaciones sobre GAE. Acceso al tutorial y al material del tema 6 de la asignatura.

desarrollo

de

3 PRUEBAS FUNCIONALES Las pruebas funcionales se realizan sobre sistemas completos para determinar si cumplen con los requisitos inicialmente fijados para el sistema. Estas pruebas se hacen en modo caja negra, es decir, ignorando cómo se comporta el sistema por dentro y atendiendo sólo a las entradas y salidas del mismo. En un entorno Web este tipo de pruebas se realizan navegando por las diferentes vistas y comprobando que la aplicación responde correctamente a las acciones del usuario. Este tipo de pruebas pueden automatizarse mediante varios métodos, pero en esta sesión se estudiará el uso del framework Selenium para cumplir esta labor.

3.1 Configuración de Selenium Selenium1 es un framework de código abierto que permite la automatización de la navegación sobre un sitio web. Es decir, Selenium permite grabar una sesión de navegación y luego repetir esa sesión cuantas veces se quiera, así como hacer lo mismo mediante scripts. Esta capacidad lo convierte en la herramienta ideal para realizar pruebas funcionales para aplicaciones web. Selenium consta principalmente de dos partes diferentes: Selenium IDE y Selenium WebDriver. 3.1.1 Selenium IDE Selenium IDE es un plug-in para el navegador Firefox que permite grabar una sesión de navegación (las acciones de un usuario) generando una script que podrá ejecutarse en repetidas ocasiones. El código de estas scripts puede exportarse a diferentes lenguajes de programación para facilitar la ejecución de los casos de prueba. Para instalarlo, abra un navegador Firefox (que puede obtener a través de la URL: http://www.mozilla.org/) y acceda a la página web oficial de Selenium (docs.seleniumhq.org). Una vez allí pulse sobre el enlace “Download” y luego sobre el enlace a la última versión del IDE (2.9.0). El navegador le pedirá permiso para realizar una instalación. Diga que sí y continúe la instalación (Figura 1). Al finalizar la instalación, reinicie Firefox.

1

docs.seleniumhq.org

Página

3

Sesión 6: Pruebas Web

Figura 1. Diálogo durante la instalación de Selenium, lista de elementos que instalará. Una vez reiniciado observará un icono negro con las letras “Se” en la parte derecha de la barra de navegación, junto al icono de la página de inicio (Figura 2).

Figura 2. Icono en la barra de navegación de Firefox que indica que se ha instalado Selenium.

Púlselo para ver una pantalla similar a la que se muestra en la figura 3. Si ve la pantalla, ya ha instalado Selenium IDE y está listo para usarlo. A continuación se describen las opciones y menús de esta pantalla.

Página

4

Sesión 6: Pruebas Web Barra de direcciones

Barra de menú

Botón de inicio y fin de grabación

Barra de herramientas

Vistas del Editor Casos de pruebas

Área de edición de los pasos de prueba

Panel de log, reference UIElement, Rollup

Figura 3. Ventana de Selenium IDE Menú: Archivo (File) El menú de archivo es similar al menú de archivo de cualquier otra aplicación (Figura 4). Permite al usuario realizar las siguientes operaciones: •

•

•

Crear un caso de prueba nuevo (New Test Case), abre un caso de prueba (Open..) y guarda el caso de prueba actual (Save Test Case, Save Test Case As..) Permite exportar un caso de prueba (Export Test Case As) o una suite de pruebas (Export Test Suite As) en alguno de los lenguajes de programación compatibles con Selenium RC y WebDriver. También permite al usuario exportar el caso de prueba a otros entornos de pruebas como Junit o TestNG. Export Test Case As exporta solo el caso de pruebas abierto. Export Test Case Suite, exporta todos los casos de pruebas asociados al caso de prueba abierto. En la figura 4 se muestran los diferentes tipos de formato en que puede guardarse o exportarse un caso de prueba. Por defecto los casos de prueba se guardan en formato HTML.

Página

5

Sesión 6: Pruebas Web

Opciones de menú para guardar y exportar casos de prueba

Tipos de formato

Figura 4. El menú de archivo, opciones. En concreto los casos de prueba generados por Selenium IDE pueden exportarse a los siguientes lenguajes: Java (java) Ruby (rb), Python (py), C# (cs). El Editor. Antes de continuar con la descripción de las principales opciones del menú, vamos a describir brevemente las vistas del Editor. El editor es el área donde se registra un caso de prueba. Las acciones del usuario se registran en el editor en el orden en el que estas son ejecutadas. Vista Table.

Pasos de la prueba

Figura 5. Vista Table del Editor.

Página

6

Sesión 6: Pruebas Web

Es la vista por defecto de Selenium IDE (figura 5), el caso de prueba se representa en formato tabular. Cada acción del usuario con un elemento de la página web se muestra en las columnas “command”, “target” y “value”. Estas columnas representan respectivamente la acción del usuario, el elemento web con el identificador único y el correspondiente dato de prueba. En esta ventana también se pueden insertar nuevos comandos con la ayuda de los botones del editor. Vista Source. Vista Source, en formato HTML

Paso de un caso de prueba

Figura 6. Vista Source del editor. En esta vista podemos ver el código del caso de prueba en formato HTML (Figura 6). El caso de prueba incluye uno o más pasos, cada paso se representa por una fila (), estos se componen de una combinación de las columnas command, target y value en columnas separadas (). Menú: Editar (Edit) Esta opción de menú proporciona las opciones comunes a otros editores tales como (Figura 7): Deshacer, Rehacer, Cortar, Pegar, Eliminar (Undo, Redo, Cut, Copy, Paste, Delete and Select All). Además proporciona dos opciones muy importantes: • •

Insert New Command. Permite que el usuario inserte un nuevo paso (comando) en cualquier lugar dentro del caso de prueba actual. Insert New Comment. Permite que el usuario introduzca el nuevo comentario en cualquier parte dentro del caso de prueba actual, para describir los pasos de prueba siguientes.

Página

7

Sesión 6: Pruebas Web

Figura 7. Opciones del menú de edición. En la figura 8 se muestra un ejemplo de inserción de un nuevo comando en el caso de prueba actual. •

• •

Página

Se selecciona el lugar donde se desea insertar el comando, luego se selecciona del desplegable Command el comando deseado (al escribir las primeras letras del comando se filtran de la lista los comandos que coinciden con el patrón digitado). En la caja de texto Target se indica el elemento de la página web sobre el que actuará el comando (puede escribirse de forma manual). En la caja de texto Value se incluye un comentario para ese comando.

8

Sesión 6: Pruebas Web

Figura 8. Insertar un comando en un caso de prueba. Existen varios tipos de comandos en Selenium. Por ejemplo: • •

• • •

open: Abre la URL indicada en su target en el navegador. Recuerde que a esa URL se le añade el prefijo indicado por Base URL. clickAndWait: Pulsa el ratón sobre un elemento HTML indicado por Target y espera a que cargue una nueva página antes de continuar la ejecución. También existe el comando click que no espera pero puede ser problemático si la nueva página tarda en cargar. type: Indica que se deben teclear los caracteres indicados en Value en el elemento HTML Target. select: Indica una selección en un elemento html de tipo select. assertText: Al igual que los assert de JUnit, este comando nos permite introducir un punto de inflexión en la prueba. Si el text del elemento HTML contenido en Target es igual al Value del comando, se da por satisfecho el comando y se permite continuar. Si el comando no encuentra dicho texto o el elemento, se para la prueba independientemente de que falten comandos por ejecutar.

Existen muchos más comandos y se recomienda consultar la documentación para aprender más sobre ellos. También puede consultar la referencia que aparece en la parte inferior de Selenium al seleccionar cada comando.

Página

9

Sesión 6: Pruebas Web

La última nota respecto a los comandos son los valores aceptados. En la casilla Value se pueden utilizar cadenas de texto exactas o comodines como el carácter ‘*’ o ‘?’, expresiones regulares o filtros. Comentarios. Para introducir un comentario el procedimiento es similar al de insertar un comando, difiere en que en este caso solo hay que introducir el texto del comentario en el campo de texto de la ventana comando, tal como se muestra en la figura 9.

Figura 9. Inserción de un comentario en un caso de prueba Menú: Actions Este menú le permite al usuario ejecutar las siguientes operaciones (Figura 10):

Página

10

Sesión 6: Pruebas Web

Figura 10. Menú Actions • • • •

• •

Record. Cuando se activa esta acción todas las acciones que realiza el usuario en el navegador Firefox se registrarían paso a paso. Play entire test suite. Ejecuta todos los casos de prueba asociados con la suite de pruebas abierta por Selenium IDE. Play current test case. Ejecuta el caso de prueba activo grabado por el usuario. Toggle Breakpoint. Selenium IDE permite incluir uno o más “breakpoint” en el caso de prueba para forzar la interrupción de la ejecución en un paso determinado del caso de prueba. Set / Clear Start Point. Permite al usuario modificar el paso con el que se inicia la ejecución de la prueba Execute this command. Ejecuta un paso concreto de un caso de prueba.

Menú Options Permite al usuario ajustar algunas opciones (Options, Format, Clipboard Format, Reset IDE Window, Clear history) de la herramienta para sacar el mayor provecho de Selenium IDE (Figura 11).

Página

11

Sesión 6: Pruebas Web

Al presiona el enlace Options del menú Options aparece una caja de diálogo tal como se muestra en la figura 11.

Velocidad de ejecución de los pasos Instalar extensiones para ampliar las opciones de Selenium IDE

Opciones estándar

Cargar las opciones por defecto

Aceptar o cancelar los cambios realizados

Figura 11. Menú Options Como se muestra en la figura esta opción permite al usuario adaptar Selenium IDE con varias funcionalidades extras. •

•

Página

Default timeout value. Representa el tiempo máximo para la ejecución de un paso antes de que Selenium IDE genere un error. El tiempo por defecto es 30 segundos, el usuario puede variar este valor para aquellos casos en que el tiempo de carga de un elemento web se quiera evaluar de acuerdo con un valor concreto. Extensiones. Selenium IDE sopora un amplio rango de extensiones que amplían la capacidad de la herramienta. Las extensiones son ficheros

12

Sesión 6: Pruebas Web

•

•

•

JavaScrit. Para cargarlas es necesario indicar el path completo en la caja de diálogo. Remember base URL. Permite que Selenium IDE recuerde la URL cada vez que iniciamos la herramienta. Si no está activa la URL base aparecerá en blanco y será reemplazada en el momento en que lancemos una URL en el navegador. Record assertTitle automatically. Cundo esta opción es seleccionada se inserta automáticamente el comando assertTitle junto con el valor “Target” para cada página seleccionada. Enable experimental features. Seleccionamos esta opción para importar por primera vez los formatos disponibles en Selenium IDE.

Formatos

Opciones de formato para exportar el código del caso de prueba Estructura del código convertido

Figura 12. Formatos disponibles La figura 12 muestra todos los formatos disponibles, el usuario puede activar o desactivar algunos de los formatos. Selenium IDE Pluggins. La versión estándar de Selenium IDE viene con los siguientes plugins (Figura 13): • •

Selenium IDE: Ruby Formatters Selenium IDE: Python Formatters

Página

13

Sesión 6: Pruebas Web

• •

Selenium IDE: Java Formatters Selenium IDE: C# Formatters

Figura 13. Selenium IDE plugins Locator Builders. Selenium usa varios mecanismos para identificar un elemento HTML que se pueden utilizar como Target. A estos mecanismos se les denomina localizadores y los hay de varios tipos. Nos permiten priorizar el orden de los tipos de “locator” que son generados durante la grabación de las acciones. “Locators” son el conjunto de estándares mediante el cual identificamos un elemento web sobre una página (Figura 14).

Página

14

Sesión 6: Pruebas Web

Figura 14. Locator Builders Información para el usuario. Ventana de casos de prueba Rojo indica fallo durante la ejecución, verde que la ejecución ha pasado

Representa el estado de la suite de pruebas No. de casos de prueba ejecutados

Figura 15. Ventana de casos de prueba.

Página

15

Sesión 6: Pruebas Web

Esta ventana muestra todos los casos de prueba que se han grabado por IDE (Figura 15). La herramienta permite abrir más de un caso de prueba a la vez. Los pasos del caso de prueba activo se muestran en el editor. Selenium usa un código de colores para indicar el estado de la ejecución, rojo para indicar fallo y verde para indicar que el caso ha pasado con éxito. Ventana de Log.

Figura 16. Ventana de Log En esa ventana el usuario puede ver la información sobre la ejecución de un caso de prueba. Estos mensajes permiten al usuario depurar los fallos ocurridos durante la ejecución de un caso de prueba. Los mensajes de error se generan por niveles (error, info, warn y debug).

Lugar donde se quiere guardar el fichero

Nivel de log

Incluir información temporal

Figura 17. Grabando información de logs en un fichero.

Página

16

Sesión 6: Pruebas Web

Los mensajes de error se pueden guardar en un fichero externo (Figura 17). Para ello primero hay que bajar de la página de Selenium el plugin que facilita esta opción. Después de instalar el plugin “File Logging Selenium IDE” y de reiniciar Selenium IDE el usuario podrá acceder a la opción de guardar los mensajes de log (File logging (info)), situada en la parte inferior del editor junto a los botones Debug y Clear. 3.1.2 Ejemplo de Prueba funcional con Selenium IDE Vamos a grabar una prueba con Selenium IDE. Como ejemplo vamos a grabar el inicio de una sesión en Gmail. • •

• • • •

Abra en el navegador Firefox una sesión en modo incógnito o modo privado. Iniciamos una sesión en Selenium IDE. El botón rojo en la parte superior derecha de la pantalla es el botón que activa la grabación de la sesión. Por defecto al abrir el IDE se encuentra activada la grabación. Verificamos que el botón de grabación esté en modo encendido. Cambie al navegador e intente acceder a su cuenta de correo en Gmail (https://accounts.google.com). Introduzca nombre de usuario y clave. Salga de la cuenta. Cambie a la ventana de Selenium IDE y verá que en el editor de comandos aparecen las instrucciones de la navegación que hemos realizado. Es decir ya tiene un caso de prueba (Figura 18).

Figura 18. Pasos del caso de prueba grabados con Selenium IDE. •

•

Ejecute el caso de prueba usando los iconos de ejecución. Al finalizar la ejecución en la ventana de casos de prueba en la parte inferior, aparece el resultado de la ejecución en este caso debería indicar con color verde y 0 fallos. La barra con los letreros “Fast y Slow” al lado del botón de ejecución permite controlar la velocidad a la que se ejecutan los comandos. Mueva el indicador a la mitad de la barra y vuelva a ejecutar. Algunas veces si el botón está en modo “Fast” la ejecución del caso de prueba puede dar error debido al tiempo de espera. Si este fuera el caso debe variar la velocidad hasta que se ejecute de manera correcta. Use la opción “Save Test Case” para guardar el caso de prueba, debe poner un nombre. Este fichero se guarda en formato html.

Página

17

Sesión 6: Pruebas Web

•

•

•

Hasta el momento, al ejecutar los pasos que ha grabado Selenium IDE se ha comprobado como Selenium controla el navegador y repite las acciones que ha grabado durante la navegación. Ahora en la ventana del editor de Selenium IDE modifique el valor de la clave. Ejecute el caso de prueba, y verá que como resultado ha generado un 1 fallo y se ha parado la ejecución. Para que el caso de prueba sea útil ha de poder comprobar algunos aspectos funcionales del código. Para ello, a manera de ejemplo va a insertar una verificación. Regrese al navegador en la ventana de “login”, seleccione el texto “Una Cuenta. Todo Google.” presione click derecho y en el menú contextual seleccione la opción “Show All Available Commands” “assertText css=h1 Una cuenta. Todo Google.” (Figura 19). Regrese de nuevo al editor de comandos de Selenium IDE y verá que ha insertado el comando “assertText css=h1 Una cuenta. Todo Google.” Ejecute el caso de prueba y observe el resultado. Si no hay errores hemos verificado que la página cargada efectivamente contiene el texto “Una cuenta. Todo Google.”

Figura 19. Insertando un comando en un caso de prueba con Selenium IDE. •

•

Ahora en el menú de opciones del navegador cambie la opción de Idioma a inglés, cierre el navegador y ejecute el caso de prueba de nuevo. Se produce un error y se para la ejecución de la prueba. Puede observar en la pestaña “Log” de Selenium IDE el mensaje de error “[error] Actual value 'One account. All of Google.' did not match 'Una cuenta. Todo Google.” Ahora ya tiene un caso de prueba completo, use la opción “Save Test Case” para guardar los cambios y volver a ejecutar el caso de prueba en cualquier momento.

3.1.3 Selenium WebDriver Es una de las herramientas más importantes de Selenium. Es un entorno orientado a objetos que funciona a nivel del sistema operativo. Mejora varias limitaciones de

Página

18

Sesión 6: Pruebas Web

Selenium RC, proporciona soporte a la creación de pruebas de Selenium en diferentes lenguajes de programación como Java, C#, Python, Ruby, PHP, Perl o JavaScript. Además, ofrece soporte nativo para varios navegadores como Firefox, Chrome, Opera, etc. Esto aporta la gran ventaja de permitir integrar Selenium con otros frameworks de pruebas como JUnit y además permite utilizar otros navegadores diferentes a Firefox. WebDriver llama directamente a los navegadores web para luego ejecutar el script de prueba. Esta característica facilita la automatización de las pruebas. De esta forma la misma script de prueba se puede ejecutar en varios navegadores. A diferencia de Selenium RC no necesita de la ejecución previa de un servidor Selenium para lanzar la script de prueba. De este modo el usuario puede ejecutar la prueba en la misma máquina donde reside el navegador. En algunos casos excepcionales es necesario la ejecución previa de un servidor de selenium: • • •

Cuando el usuario debe ejecutar scripts en una máquina remota, Cuando el usuario debe ejecutar scripts sobre un controlador HtmlUnit, Cuando el usuario debe ejecutar scripts de prueba en múltiples plataformas.

A diferencia de Selenium IDE, WebDriver facilita al usuario la ejecución de los scripts de prueba en diferentes lenguajes de programación. De esta manera los usuarios pueden incluir en los scripts de prueba iteraciones, bifurcaciones, ciclos, manejo de errores, etc. Los lenguajes que soporta WebDriver actualmente son: Java, C#, PHP, Pearl, Ruby y Python. El usuario puede seleccionar el lenguaje que mejor se ajuste y construir sus scripts de prueba. WebDriver también incluye dos controladores esenciales para ejecutar pruebas web en entornos móviles: AndroidDriver, IphoneDriver. Descargar Selenium WebDriver Vamos a descargar y configurar selenium WebDriver en eclipse para trabajar con Java. Por tanto es necesario instalar algunos controladores específicos. Comenzamos bajando las bibliotecas para el cliente java de Selenium. Dado que es una biblioteca la instalación se hará para un proyecto concreto. En este caso propondremos un ejemplo que podrá usar a manera de guía para realizar la práctica. Para descargar la biblioteca vamos al sitio http://docs.seleniumhq.org/download/ y ubicamos la sección de Selenium Client & WebDriver Language Bindings y hacemos Click sobre el enlace “download java client library” (Figura 20).

Página

19

Sesión 6: Pruebas Web

Descarga la biblioteca del cliente java

Figura 20. Descargar e instalar bibliotecas de Java para Selenium WebDriver. Al finalizar la descarga, copiamos el fichero descargado en la posición deseada del sistema de ficheros. Extraemos los ficheros, se creará una carpeta llamada “selenium-java-2.45.0” (versiones anteriores podrían no funcionar con la última versión de firefox). Ahora estamos listos para configurar las bibliotecas en Eclipse IDE. Configurando las bibliotecas de Selenium WebDriver en Eclipse IDE. Antes de configurar las bibliotecas de java para Selenium WebDriver vamos a crear un proyecto java (File->New->Project->Java Project), (Figura 21), una clase java e.g. “Mi_Primera_WedDriverClass”.

Página

20

Sesión 6: Pruebas Web

Figura 21. Primer paso configurar Selenium WebDriver. Una vez realizado este primer paso ya podremos configurar las bibliotecas externas que descargamos de http://docs.seleniumhq.org/download/ en el proyecto Java que acabamos de crear. Para esto sobre el proyecto hacemos click derecho, se mostrará una lista de opciones, de las cuales seleccionamos “properties”, de la pantalla que aparece seleccionamos la opción “Java Build Path”; seleccionamos la pestaña “Libraries”. Luego haga click sobre el botón “Add External Jars..”, ubicamos el folder donde descargamos las bibliotecas para clientes java y seleccionamos todos los ficheros del folder “selenium-java-2.45.0” y presionamos el botón “open” de la caja de diálogo. En la caja de diálogo “properties” se mostrarán las bibliotecas para el cliente java “Selenium WebDriver” (figura 22) que hemos agregado. Para completar el proceso haga click sobre el botón “OK”.

Figura 22. Bibliotecas Java para Selenium WebDriver Después de crear el proyecto y configurar las bibliotecas de Selenium WebDriver ya tenemos el entorno listo para crear y ejecutar pruebas Web. Existen dos formas de hacerlo: a) Creando una clase java dentro del paquete con un método main() que nos permitirá ejecutar el código de la prueba, tal como se muestra en el código del cuadro de texto; b) Creando un caso de prueba Junit, exportando el código desde SeleniumIDE.

Página

21

Sesión 6: Pruebas Web

A continuación explicamos cómo proceder en el primer caso (clase java) y luego con el segundo caso (caso de prueba junit). 3.1.4 Creación del caso de prueba como una clase Java con un método main(). Dentro del código podemos distinguir varias secciones que son generales para cualquier prueba que se realice con WebDriver: • • • • •

Importar clases e interfaces Instanciar los objetos Lanzar el navegador Realizar validaciones Instanciar elementos web

Para este caso concreto se invoca el nagegador Chrome, se inicia una sesión en la URL de Gmail, se hace login con un usuario/password y se valida el título de la página. Para entender mejor cómo usar WebDriver vamos a explicar en detalle las secciones básicas que debe contener el código para realizar una prueba web desde código Java como el que se muestra en el cuadro de texto. Importar clases e interfaces. Lo primero que debemos es importar de las bibliotecas las interfaces y las clases necesarias para iniciar la sesión del navegador, para cargar una URL y para analizar los elementos: org.openqa.selenium.WebDriver: Esta interface es necesaria para generar una instancia del navegador. org.openqa.selenium.firefox.FirefoxDriver: Esta clase es necesaria para generar una instancia específica de Firefox sobre la instancia generada con la interface WebDriver. org.openqa.selenium.WebElement: La clase WebElement es necesaria para instanciar un elemento web (e.g. WebElement username = driver.findElement(By.id("Email"))). org.openqa.selenium.By: Referencia la clase By para poder invocar un tipo de localizador concreto.

En los casos anteriores se asume que la sesión de navegación que se instancia se hace sobre Firefox, sin embargo, tal como hemos mencionando antes WebDriver permite lanzar instancias con otros navegadores, en estos casos debemos importar la clase apropiada para generar dicha instancia, por ejemplo: org.openqa.selenium.chrome.ChromeDriver; Esta clase es necesaria para generar una instancia específica para el navegador Chrome; o org.openqa.selenium.ie.InternetExplorerDriver en el caso de internet explorer (No será necesario su uso en esta práctica).

Página

22

Sesión 6: Pruebas Web import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.ie.InternetExplorerDriver; @SuppressWarnings("unused") public class Mi_Primera_WedDriverClass { /** * @param args */ public static void main(String[] args) { // objects and variables instantiation // WebDriver driver = new FirefoxDriver(); System.setProperty("webdriver.chrome.driver", "D:\\Programas\\selenium2.44.0\\chromedriver.exe") ; WebDriver driver = new ChromeDriver(); String appUrl = "https://accounts.google.com"; // launch the firefox browser and open the application url driver.get(appUrl); // maximize the browser window driver.manage().window().maximize(); // declare and initialize the variable to store the expected title of the webpage. String expectedTitle = "Inicio de sesión - Cuentas de Google"; // fetch the title of the web page and save it into a string variable String actualTitle = driver.getTitle(); // compare the expected title of the page with the actual title of the page and print the result if (expectedTitle.equals(actualTitle)) { System.out.println("Verification Successful - The correct title is displayed on the web page."); } else { System.out.println("Verification Failed - An incorrect title is displayed on the web page."); System.out.println(actualTitle); } // enter a valid username in the email textbox WebElement username = driver.findElement(By.id("Email")); username.clear(); username.sendKeys("XXXXXXX"); // enter a valid password in the password textbox WebElement password = driver.findElement(By.id("Passwd")); password.clear(); password.sendKeys("yyyyy"); // click on the Sign in button WebElement SignInButton = driver.findElement(By.id("signIn")); SignInButton.click(); // close the web browser driver.close(); System.out.println("Test script executed successfully."); // terminate the program System.exit(0); } }

Código que ilustra cómo construir un caso de prueba desde una clase Java con un método main.

Página

23

Sesión 6: Pruebas Web

Instanciar los objetos. Una vez que hemos importado las clases e interfaces necesarias para lanzar los principales elementos de la prueba, vamos a centrarnos en cómo instanciar los objetos. •

•

WebDriver driver = new FirefoxDriver(); Crea una variable que referencia la interface WebDriver y genera una instancia usando la clase FirefoxDriver. Esto crea un perfil por defecto de Firefox, es decir que no se cargan extensiones ni plugins con la instancia, que se ejecuta en modo seguro. En el caso de lanzar la prueba con otro navegador, antes de crear la variable debemos indicar explícitamente el path del controlador que hemos descargado de la página de Selenium para dicho navegador, para ello usamos el método System.setProperty() (este paso no es necesario en el caso de usar Firefox).

Descarga Chromedriver versión 2.14 de: http://chromedriver.storage.googleapis.com/index.html?path=2.14/ System.setProperty("webdriver.chrome.driver", "D:\\Programas\\selenium2.44.0\\chromedriver.exe");

Después de indicar el path del driver del navegador podremos crear la variable que referencia la interfaz WebDriver para generar la instancia de Chrome. WebDriver driver = new ChromeDriver();



Lanzar el navegador. Usamos el método get() para lanzar el navegador web. Este método recibe como parámetro una string que contiene la URL que se cargará en la instancia del navegador y maximizamos la ventana donde se carga la instancia del navegador. En el caso del ejemplo la URL https://accounts.google.com

String appUrl = "https://accounts.google.com"; driver.get(appUrl); driver.manage().window().maximize();

Realizar validaciones. En este punto ya se ha cargado la página web que queremos probar y podemos usar las validaciones que consideremos conveniente. Por lo tanto es necesario conocer los elementos de la página que podemos probar. Una manera de hacerlo es a través del código fuente de la página que se carga (se puede acceder por las opciones de herramientas del navegador), la otra forma es usando Selenium IDE para buscar los elementos que hacen parte de la página. En el ejemplo vamos a validar que el título de la página corresponda con el de la página cargada. Para ello usamos el método driver.getTitle() que extrae el título de la página cargada y lo asigna a una variable string en este caso actualTitle.

String expectedTitle = "Inicio de sesión - Cuentas de Google"; String actualTitle = driver.getTitle(); if (expectedTitle.equals(actualTitle)) { System.out.println("Verification Successful - The correct title is displayed on the web page."); } else { System.out.println("Verification Failed - An incorrect title is displayed on the web page."); System.out.println(actualTitle);

Página

24

Sesión 6: Pruebas Web }

Instanciar elementos web. En el ejemplo usamos el método driver.findElement(By.id("Email")) para crear una instancia del elemento Email que referencia el nombre de usuario “username” en la página de login. WebElement username = driver.findElement(By.id("Email")); username.clear(); username.sendKeys("XXXXXXX");

El método clear() elimina los valores sobre el campo texto. El método sendKeys() permite enviar el valor del nombre de usuario al campo texto de la página de login. Este método se invoca sobre un objeto Webelement instanciado previamente. Esta acción la repetimos para el campo clave “passwd” que corresponde con los datos que debe proporcionar un usuario para acceder a su cuenta de correo. El siguiente paso es presionar el botón de inicio de sesión “sign in”. Usamos el método driver.findElement() para crear una instancia del botón de inicio de sesión de la página web que hemos cargado. Luego usamos el método SignInButton.click() para hacer click en el element web de la página, en el caso del ejemplo en el botón de inicio de sesión (elemento signIn) WebElement SignInButton = driver.findElement(By.id("signIn")); SignInButton.click();

Página

25

Sesión 6: Pruebas Web

WebElement username = driver.findElement(By.id("Email")); username.clear(); username.sendKeys("XXXXXXX");

WebElement password = driver.findElement(By.id("Passwd")); password.clear(); password.sendKeys("yyyyy");

Resultado obtenido para la cuenta xxxx con contraseña yyyy

WebDriver driver = new ChromeDriver(); String appUrl = "https://accounts.google.com"; driver.get(appUrl); driver.manage().window().maximize();

WebElement SignInButton = driver.findElement(By.id("signIn")); SignInButton.click();

Figura 23. Resultado de la ejecución del código de la prueba del ejemplo anterior. Finalmente usamos el método driver.close() para cerrar la ventana del navegador. La ejecución del código del ejemplo debería mostrar una ventana en el navegador como la que se muestra en la figura 23. 3.1.5 Exportar test de Selenium IDE a Selenium WebDriver como un caso de prueba Junit Escribir el código de la prueba directamente como en el caso del ejemplo anterior tiene un coste alto en tiempo. Por lo tanto la mejor opción es automatizar este proceso. Para ello debemos usar Selenium IDE en combinación con Selenium WebDriver. El proceso para generar una prueba similar para el ejemplo anterior pero de forma automática es sencillo: •

•

Página

Inicia una sesión de Selenium IDE pinchando en el icono de la parte izquierda del navegador tal como se explicó anteriormente en la figura 2, como resultado aparece la ventana de Selenium IDE (figura 3). En la sección Base URL escribimos la URL: https://accounts.google.com

26

Sesión 6: Pruebas Web

• • • •

•

•

•

•

•

Ponemos la misma URL (https://accounts.google.com) en el navegador. Aparecerá la página de login de google. Digite su nombre de usuario y contraseña para acceder a la cuenta de correo. Acceda a su cuenta de correo. Vamos a insertar un paso en el código de la prueba. Para ello vamos a la ventana de Selenium IDE y en la vista table del editor (e.g. Figura5) con el ratón nos paramos sobre el paso de “type id=Email nombre-usuario”, hacemos click derecho y seleccionamos “insert new command”. Luego vamos a la web de login en el navegador hacemos click derecho, seleccionamos la opción “All Available commands” y seleccionamos “assertTitle Gmail”. Verificamos en la ventana de Selenium IDE en la vista table del editor y aparecerá el paso insertado (assertTitle Gmail). Finalizamos la sesión de grabar los pasos de la prueba pinchando en el botón de inicio/fin de la grabación en la parte superior derecha de la ventana de Selenium IDE. En la ventana de Selenium IDE tendremos una serie de pasos de la prueba que hemos grabado tal como se muestra en la figura 24. Ahora vamos a exportar el código del caso de prueba en formato java (junit). Para ello vamos al menú file de Selenium IDE, seleccionamos la opción “Export Test Case As”, “Java / Junit4 / WebDriver”, damos un nombre al fichero. En el siguiente paso crearemos un proyecto en Eclipse, configuramos las bibliotecas de Selenium WebDriver, si considera necesario puede consultar el apartado“Configurando las bibliotecas de Selenium WebDriver en Eclipse IDE”. Cree una clase y copie el texto del código generado por Selenium IDE en el paso anterior. Corrija los errores y advertencias, con lo que se consigue un caso de prueba como el que se muestra en el cuadro de texto. Elimine las partes del código que no use y ejecute el caso de prueba. Observe qué ocurre, y puede variar el caso de prueba para introducir más validaciones. Por ejemplo modifique el código para ejecutar la prueba en una sesión de Google Chrome.

Página

27

Sesión 6: Pruebas Web

Figura 24. Grabación de la sesión de login en la cuenta de correo de Google. package Test1; import java.util.regex.Pattern; import java.util.concurrent.TimeUnit; import org.junit.*; import static org.junit.Assert.*; import static org.hamcrest.CoreMatchers.*; import org.openqa.selenium.*; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.support.ui.Select; public class Test5 { private WebDriver driver; private String baseUrl; private boolean acceptNextAlert = true; private StringBuffer verificationErrors = new StringBuffer(); @Before public void setUp() throws Exception { driver = new FirefoxDriver(); baseUrl = "https://accounts.google.com/"; driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); } @Test public void test5() throws Exception { driver.get(baseUrl + "/ServiceLogin?passive=1209600&continue=https%3A%2F%2Faccounts.google.com%2FManageAccount&followup=https %3A%2F%2Faccounts.google.com%2FManageAccount"); assertEquals("Gmail", driver.getTitle()); // ERROR: Caught exception [unknown command []] driver.findElement(By.id("Email")).clear(); driver.findElement(By.id("Email")).sendKeys("yyyy***"); driver.findElement(By.id("Passwd")).clear(); driver.findElement(By.id("Passwd")).sendKeys("xxxxx***"); driver.findElement(By.id("signIn")).click(); } @After public void tearDown() throws Exception { driver.quit(); String verificationErrorString = verificationErrors.toString(); if (!"".equals(verificationErrorString)) { fail(verificationErrorString); } } }

Código de prueba generado de manera automática por Selenium IDE, exportado como un fichero “Java/Junit4/WebDriver”.

•

•

Página

El código que se genera al exportar el fichero como “Java/Junit4/WebDriver” del caso de prueba grabado en Selenium IDE, es un programa Java con la plantilla de un caso de prueba Junit4. Por tanto es importante que repase los conceptos sobre la ejecución de los casos de prueba en el entorno Junit (en este curso asumimos que el estudiante tiene conocimiento sobre Junit). El método setUp() que se ejecuta antes de las pruebas sirve para establecer el entorno de pruebas. En este caso sólo se va a definir el driver de Selenium que se va a emplear, FirefoxDriver para utilizar el navegador Firefox. También se define la base URL igual como un atributo para usarlo como se hizo en Selenium IDE. Finalmente se establece un tiempo de timeout para realizar las operaciones. Si cualquiera de ellas tarda más de 30 segundos se da por fallida la prueba. El método tearDown() cierra el navegador y verifica si hubo algún error durante la prueba.

28

Sesión 6: Pruebas Web

•

•

•

• •

El método test() es el que contiene la prueba que va a realizar, que en este caso se trata de la misma que ya realizó en el caso anterior. Los métodos del objeto driver permiten controlar de forma nativa el navegador y enviarle comandos. Así, el método get() permite decirle al navegador que abra una URL concreta. El comando findElement() permite recuperar elementos Web (de la clase WebElement) mediante el uso de localizadores. Estos localizadores son similares a los usados en Selenium IDE y el acceso a los mismos se realiza a través del objeto estático By, cuyos métodos simbolizan cada uno de los tipos de localizador. Una vez se ha recuperado un objeto WebElement, hay una serie de métodos que se pueden ejecutar sobre él que permiten simular la navegación como click() para pulsar el botón izquierdo del ratón sobre él o sendKeys() para enviar pulsaciones de teclado. Finalmente, observe que los assert no dependen del objeto driver sino que se usan los de JUnit para establecer la validez de la prueba. Pulse con el botón derecho sobre la clase y seleccione “Run as > JUnit Test” y observe que al igual que sucedía con Selenium IDE, también se abre un navegador Firefox y se ejecutan las ordenes. Observe también que el navegador está etiquetado como WebDriver en la esquina inferior derecha.

Una ventaja de esta forma de generar el caso de prueba es que no tiene que escribir el código. Sin embargo es posible que tenga que introducir alguna línea de código para adaptar el caso de prueba y validar aquellos elementos que queremos probar.

Página

29