¿Cómo utilizar Selenium Webdriver para pruebas automatizadas?

14 marzo
Gastón Iriarte, Sr. Java Developer
¿Cómo utilizar Selenium Webdriver para pruebas automatizadas?

¿Por qué pruebas automatizadas?

Muchas veces en aplicaciones productivas nos encontramos con la situación en que el esfuerzo requerido para realizar pruebas manuales se vuelve importante y terminamos repitiendo secuencias de pasos triviales para llegar a probar lo que realmente queremos probar.

Este es quizás el factor principal a la hora de tener en cuenta la posibilidad de incorporar testing automatizado en nuestras aplicaciones, pero a su vez existen otros motivos:

  • La necesidad de una herramienta que permita verificar las funcionalidades automáticamente y reducir el tiempo efectuado en los tests de verificación y estabilidad (también llamados smoke tests).
  • Al contar con una herramienta automática que ejecute pruebas es posible incorporarla en un entorno de integración continua y permitir que estas pruebas se corran ante cada despliegue de nuestra aplicación en cualquiera de los ambientes.
  • Los entornos de testing automatizado pueden escalar fácilmente y requieren menor esfuerzo adicional de documentación y burocracia que los entornos de testing manual.

Para más información referida a la comparación entre QA manual vs QA automático recomiendo leer este artículo en nuestra web (sólo disponible en inglés).

Selenium Webdriver. Descripción General

Selenium es uno de los frameworks más importantes con los que se generan pruebas automatizadas.

La arquitectura de Selenium Webdriver se enmarca en 3 componentes principales:

  • Los tests a ejecutarse (escritos con un lenguaje a elección entre varios como Java, C#, Node JS, etc). Lo llamaremos de ahora en más “Client API”.
  • Un servidor standalone en donde se ejecutarán los casos de prueba.  
  • Un browser driver que conectará los scripts generados con la client API con el browser a través del Selenium Server.

Gráficamente puede verse como sigue:

Webdriver se presenta como la nueva versión de Selenium, que presenta mejores características y resuelve algunas limitaciones que se encontraban en la versión anterior (Selenium RC).

En nuestro caso vamos a utilizar el cliente Java para ejecutar las pruebas en una aplicación web, pero como ya hemos mencionado se pueden utilizar otros lenguajes.

Para poder aprovechar mejor las capacidades de reutilización y organización de nuestro código recomiendo tener en cuenta algunos conceptos de la programación orientada a objetos (además de un nivel intermedio en conocimientos del lenguaje java). Los conceptos principales a utilizar referidos a la orientación a objetos son:

  • Polimorfismo
  • Herencia
  • Encapsulamiento
  • Clase abstracta
  • Interfaces
  • Manejo de colecciones en Java
  • TestNG
  • Maven

Construyendo una primera prueba sencilla

Vamos a construir nuestra primera prueba utilizando las siguientes herramientas:

  • Maven
  • TestNG
  • Selenium Webdriver
  • ChromeDriver.exe file

1. Crear la aplicación con maven

Antes de comenzar este punto recomendaría tener una idea básica de para qué sirve Maven y cómo utilizarlo. Pueden dirigirse a su sitio oficial o a cualquier tutorial básico de Maven de los que abundan por internet. De todas formas, trataré de ser lo más explícito posible en cuanto a las librerías a utilizar.

Básicamente para utilizar Selenium en Java necesitamos cargar tanto sus librerías para interactuar con los comandos de Selenium como las librerías necesarias para cargar los drivers respectivos para cada browser. Teniendo todo esto en cuenta, el archivo pom.xml (archivo en donde se encuentran todas las dependencias de nuestro proyecto) debería verse como sigue:

Como vemos, en nuestro caso necesitamos las librerías testing (para levantar el entorno de pruebas unitarias), selenium-java (el sdk con las api necesarias para interactuar con los elementos de las páginas) y selenium-chrome-driver(la clase que implementa el driver para google chrome).

2. Descargar el archivo Chromedriver y colocarlo en el workspace

A continuación necesitamos descargar el archivo ChromeDriver.exe , puede descargarse desde su sitio oficial, y colocarlo en algún lugar de nuestro workspace (en este caso voy a colocarlo en la carpeta resources).

3. Identificar los elementos en el HTML

Ahora es cuando necesitamos pensar cúal es el objetivo final de la prueba, definir el o los escenarios y finalmente crear los métodos para cada escenario (la relación es 1 a 1 entre métodos y escenarios).

Para nuestro ejemplo vamos a realizar una búsqueda sencilla dentro del sitio www.dataart.com.ar. Vamos a buscar las noticias relacionadas a la palabra “Docker”.

En principio, lo que necesitamos hacer es reproducir el comportamiento manualmente y tomar nota de todos los pasos necesarios, así como también de todas las interacciones que tengamos con los elementos del DOM (Document Object Model), o dicho en otras palabras con el HTML de la página.

Pasando a limpio el escenario en cuestión sería:

“Buscar las noticias relacionadas con la palabra Docker, y verificar que la cantidad de resultados sean 3”

En este caso suponemos que la búsqueda debe arrojar 3 resultados , e imaginamos que este valor es fijo y no debería cambiar en el corto plazo (obviamente no es un ejemplo real productivo, pero sirve como para mostrar una interacción sencilla).

Ahora bien, necesitamos acceder al sitio de DataArt y tomar nota de cuál es el elemento con el que interactuamos al hacer click en la “lupita” del buscar. Para ello utilizamos las herramientas de desarrollador de Google Chrome (se abren con F12), o bien hacemos click derecho sobre la lupa de búsqueda y seleccionamos “Inspect”. Al hacerlo veremos algo así dentro de la ventana de herramientas de desarrollo:

Aja! Podemos ver que nuestro botón no tiene un ID, osea que para referenciarlo desde el código vamos a tener que implementar algo mas creativo, qué tal por ejemplo buscar por el atributo “class”? Este atributo demarca el estilo del objeto. Podemos ver que la clase aplicada al elemento es “search-input__submit”. Tengamos en cuenta esto ya que lo vamos a utilizar próximamente.

Busquemos ahora la forma de referenciar al campo de búsqueda. Aplicamos el mismo mecanismo que recién y podemos observar lo siguiente:

En este caso el input de búsqueda si tiene un nombre (name) por el que podremos referenciarlo en el código, se llama “search”. Tomamos nota también de esto.

Procedemos de la misma forma para averiguar el nombre o la clase del botón que submite nuestra búsqueda de resultados. En este caso volvemos a utilizar el atributo class, cuyo nombre es “search-input__submit”.

Ya tenemos todo listo para crear la clase de prueba y comenzar a pasar nuestras ideas a código.

4. Crear la clase para probar

Una vez identificado el escenario a probar y habiendo tomado nota de los elementos del HTML que debemos invocar, necesitamos volcar todo esto a código. Para ello voy a utilizar el framework de pruebas unitarias TestNG.

Crearemos una clase denominada “DataArtPageTest” y colocaremos en primer lugar el comportamiento general que queremos obtener antes y después de cada test. Específicamente, serían estos 2 métodos:

El código escrito arriba indica que antes de cada método de prueba vamos a crear una instancia del Google Chrome Driver, para ello necesitamos indicar en donde tenemos almacenado nuestro chromedriver.exe, además de luego crear una nueva instancia de la clase ChromeDriver, la cual finalmente la asignamos a nuestra variable de clase “driver”. Esta variable es la que finalmente vamos a utilizar a lo largo de nuestros métodos para interactuar con el driver de selenium para Google Chrome.

Ahora si podemos escribir nuestro método que ejecuta una prueba de las noticias relacionadas con la palabra “docker” en el sitio de DataArt (y verificar que se obtienen 3 resultados):

Esos fueron los pasos para implementar una primera prueba sencilla de interacción con un sitio web utilizando el driver para Google Chrome de Selenium en Java.