Tutorial Selenium: Primeros pasos

En el mundo del desarrollo software es muy importante no olvidarse nunca de la fase de pruebas. Este tema lo ha escuchado un desarrollador durante toda su vida laboral: desde que empezó a estudiar, hasta que se jubila, pasando por artículos como este; y seguirá siendo así durante muchos tiempo, ya que es la forma de mantener un mínimo de calidad en el desarrollo de cualquier software. En este artículo, nos centraremos en un caso concreto. Se trata de una aplicación aplicación web, desarrollada en cualquier lenguaje. El objetivo es probar la interfaz de usuario, es decir, comprobar cada enlace va a donde tiene que ir y cada botón hace lo que se supone que tiene que hacer. Para esto vamos a utilizar la herramienta Selenium.

El concepto

En el siguiente apartado se explicará cómo descargar e instalar la última versión de la herramienta, pero en este se intentará explicar cómo funciona Selenium WebDriver. La idea es muy sencilla. Selenium proporciona al desarrollador un API que le permitirán interactuar con la página que se desea probar. Es decir, un primer paso sería proporcionarle una url a la página que se desea probar. A continuación, podemos ir buscando y seleccionando los elementos que sabemos que existen la página que indicamos al principio. Por ejemplo, se podría buscar un enlace con id «siguiente-pagina» y luego simular un clic en dicho enlace. Este proceso se realizará en cualquiera de los lenguajes compatibles (los ejemplos los veremos en Java). Al ejecutarlo, veremos como en nuestra pantalla se abre un navegador y, sin tocar nada, se van realizando las acciones que se han programado previamente. A partir de aquí, las pruebas se pueden complicar todo lo que se quiera. Es posible navegar entre páginas, rellenar formularios, comprobar el css, etc.

Instalación

En la página de descargas, se puede escoger la instalación que más convenga a cada uno: http://docs.seleniumhq.org/download/ Nosotros vamos a simplificar lo máximo. Crearemos un projecto Java usando Maven e indicaremos la siguiente dependencia en el pom.xml

1
2
3
4
5

<dependency>
   <groupId>org.seleniumhq.selenium</groupId>
   <artifactId>selenium-java</artifactId>
   <version>2.48.2</version>
</dependency>

Una vez hecho esto, el siguiente paso es comenzar a programar los tests.

Drivers

Selenium ofrece varios navegadores para ejecutar las pruebas. Para cada uno de ellos proporciona un Driver. De esta forma existen los siguientes: ChromeDriver, FirefoxDriver, OperaDriver, AndroidDriver e iOSDriver. Si deseáramos utilizar un navegador que no estuviera instalado en nuestro equipo, pero sí en uno remoto, sería necesario utilizar simultáneamente las herramientas Selenium-Server y Selenium-WebDriver.

Creación de pruebas

Veamos ejemplos algunos ejemplos concretos. En primer lugar, empecemos creando una clase con un main, la cual será la encargada de ir ejecutando los diferentes comandos de Selenium. Ahora, lo que hace falta, es crear un driver. Si queremos ejecutar las pruebas en Firefox, bastaría con la siguiente sentencia para tener el control sobre una instancia del navegador:

1

WebDriver driver = new FirefoxDriver();

El siguiente paso, sería abrir la url con la que queremos empezar a realizar pruebas. Sería tan sencillo como indicárselo al driver de la siguiente forma:

1

driver.get(URL);

Es recomendable también, tener a nuestra disposición una instancia de la clase Selenium, ya que nos permitirá el acceso posterior a métodos muy interesantes. Para esto, la podemos recuperar de la siguiente manera:

1

Selenium s = new WebDriverBackedSelenium(driver, URL);

A partir de este momento, es recomendable que se tenga nuestra web modelada, de tal forma que, para cada página de la web, exista una clase que la represente. Esta clase, contendrá los métodos que nos hacen falta para las pruebas dentro de esa página. Pongamos un ejemplo. Es de esperar que la primera página a la que se tenga que acceder, sea la página de login de nuestra web. Se crearía entonces, una clase (LoginPage) que, como mínimo, tendría el método login(user, pass). De esta forma, desde nuestro main, llamaríamos a ese método con los datos que se deseen. Pero, ¿cómo se instancia la página de login? Nos ayudaremos de la factoría que nos proporciona Selenium:

1

LoginPage loginPage = PageFactory.initElements(driver, LoginPage.class);

Con lo cual, el código completo que tendremos en este punto será:

1
2
3
4
5

WebDriver driver = new FirefoxDriver();
driver.get(URL);
Selenium s = new WebDriverBackedSelenium(driver, URL);
LoginPage loginPage = PageFactory.initElements(driver, LoginPage.class);
loginPage.login("user1", "pass123");

Es necesario destacar que LoginPage deberá tener un constructor que acepte un driver para poder utilizar la factoría de la forma que se indicó arriba. Además, para poder utilizar la clase Selenium, también podría haber un setter, pero esto ya queda a elección de cada uno. Antes, decíamos que era interesante porque proporcionaba algunos métodos interesantes. En concreto, waitForPageToLoad permitirá crear una pausa mientras la página que se está accediendo termina de cargarse por completo. Esto es necesario porque podríamos estar buscando un elemento dentro de la página y éste no existiera debido a que no terminó de cargar la página. El resultado sería una excepción de Selenium y el programa pararía. Siguiendo con el ejemplo, ahora es necesario implementar el método login. Los pasos serían los siguientes: – esperar a que cargue la página – buscar el input para meter el usuario e introducirlo – buscar el input para meter la contraseña e introducirla – enviar el formulario – redirigir a la nueva página (suponiendo que los datos son correctos)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public HomePage login(String username, String password) {
 
        getSelenium().waitForPageToLoad(WAIT_FOR_PAGE_TO_LOAD_TIMEOUT);
 
        WebElement username = getDriver().findElement(By.id("user"));
        username.sendKeys(username);
 
        WebElement username = getDriver().findElement(By.id("pass"));
        password.sendKeys(password);
 
        this.username.submit();
 
        HomePage page = new HomePage(driver, getSelenium());
        return PageFactory.initElements(driver, page);
}

Si se desea probar la web ante un login incorrecto, en vez de redirigir a la nueva página, habría que comprobar que aparece el mensaje de error correspondiente. Expliquemos un poco el método anterior. Como se puede ver, se está utilizando el método waitForPageToLoad para esperar a que la página termine de cargar. A continuación, se busca el input concreto para poder introducir el usuario. Esto se hace gracias al método findElement, que acepta un argumento de tipo By. Este argumento permite indicar cómo es posible encontrar el elemento deseado. En este caso, se está diciendo que el elemento que queremos tendrá un id igual a «user». El mismo proceso se hace para la contraseña y, finalmente, se envía el formulario con el método submit. También sería posible buscar el botón de login e invocar al método submit. Por último, como estamos suponiendo que las credenciales son correctas, se espera que nuestra web nos redirija a una nueva página y, por lo tanto, nuestro login devolverá una instancia a esa nueva página. Obsérvese que este paso se está realizando de una forma un poco diferente. Así, podemos ver cómo se haría en el caso de que la nueva página necesitase indicarle más argumentos en el constructor.

Buscar elementos

En el apartado anterior se han visto ya bastantes conceptos que permiten ponerse a codificar las pruebas. Ahora, simplemente vamos a dar una serie de pistas para aumentar un poco la complejidad de los tests. Veíamos cómo buscar un elemento por id, pero ¿qué pasa si el elemento que deseamos recuperar no tiene id? La clase By nos ofrece varios métodos diferentes para la búsqueda de elementos. Algunos de los más interesantes son: – By.className(): permite la búsqueda por clase (atributo class) – By.cssSelector(): permite recuperar elementos siguiendo la sintaxis de selectores de css. Por ejemplo: «div > .btn» – By.xpath(): localiza elementos que cumplan la expresión XPath que se indique Este último método quizá es el más potente de todos, ya que permite construir cualquier expresión XPath. Por ejemplo, con la expresión «//table[@class=\»search-results-table\»]/tbody/tr/td[3]», se estará recuperando la tercera columna de todas las filas de la tabla con clase igual a «search-results-table».

Conclusión

El propósito de este artículo era introducir los conceptos básicos de Selenium para crear una batería de pruebas mínimamente elaborada. Quedan, sin embargo, muchos elementos y muchas opciones de Selenium por analizar. Por ejemplo, la clase WebElement, ofrece nuevas posibilidades para comprobar los resultados obtenidos, así como más opciones de interacción con la interfaz. Esperamos que haya servido de ayuda y que ahora vuestra aplicación haya mejorado en fiabilidad y calidad.

« Entrevista a Cleventy en La Voz de Galicia Publicación de subvención para tiendas online del programa Mentoring »