Automatización de sus pruebas de funciones con Selenium WebDriver

Este artículo es para desarrolladores web que deseen pasar menos tiempo probando el front-end de sus aplicaciones web pero que aún quieran estar seguros de que todas las funciones funcionan bien. Le ahorrará tiempo al automatizar tareas en línea repetitivas con Selenium WebDriver. Encontrará un ejemplo paso a paso para automatizar y probar la función de inicio de sesión de WordPress, pero también puede adaptar el ejemplo para cualquier otro formulario de inicio de sesión.

¿Qué es el selenio y cómo puede ayudarte?

Selenium es un marco para la prueba automatizada de aplicaciones web. Usando Selenium, básicamente puede automatizar cada tarea en su navegador como si una persona real fuera a ejecutar la tarea. La interfaz utilizada para enviar comandos a los diferentes navegadores se llama Selenium WebDriver. Las implementaciones de esta interfaz están disponibles para todos los principales navegadores, incluidos Mozilla Firefox, Google Chrome e Internet Explorer.

Automatización de sus pruebas de funciones con Selenium WebDriver

¿Qué tipo de desarrollador web eres? ¿Es usted del tipo disciplinado que prueba todas las funciones clave de su aplicación web después de cada implementación? Si es así, probablemente esté molesto por la cantidad de tiempo que consumen estas pruebas repetitivas. ¿O es del tipo que simplemente no se molesta en probar funciones clave y siempre piensa: "Debería probar más, pero prefiero desarrollar cosas nuevas". Si es así, probablemente solo encuentre errores por casualidad o cuando su cliente o jefe se queje de ellos.

He estado trabajando para un minorista en línea muy conocido en Alemania durante bastante tiempo, y siempre pertenecí a la segunda categoría: fue muy emocionante pensar en nuevas funciones para la tienda en línea, y no me gustó nada ir sobre todas las funciones anteriores nuevamente después de cada nueva implementación de software. Entonces, la estrategia era más o menos esperar que todas las características clave funcionaran.

Un día, tuvimos una caída importante en nuestra tasa de conversión y comenzamos a buscar en nuestras herramientas de análisis web para encontrar el origen de esta caída. Pasó bastante tiempo antes de que descubriéramos que nuestro proceso de pago no funcionaba correctamente desde la implementación anterior del software.

Este fue el día en que comencé a investigar un poco sobre la automatización de nuestro proceso de prueba de aplicaciones web, y me topé con Selenium y su WebDriver. Selenium es básicamente un marco que le permite automatizar navegadores web. WebDriver es el nombre de la interfaz clave que le permite enviar comandos a todos los principales navegadores (móviles y de escritorio) y trabajar con ellos como lo haría un usuario real.

Preparando la primera prueba con Selenium WebDriver

Primero, estaba un poco escéptico sobre si Selenium se adaptaría a mis necesidades porque el marco se usa más comúnmente en Java, y ciertamente no soy un experto en Java. Más tarde aprendí que no es necesario ser un experto en Java para aprovechar el poder del framework Selenium.

Como primera prueba simple, probé el inicio de sesión de uno de mis proyectos de WordPress. ¿Por qué WordPress? El hecho de que usar el formulario de inicio de sesión de WordPress es un ejemplo que todos pueden seguir más fácilmente que si tuviera que referirme a alguna aplicación web personalizada.

¿Qué necesitas para empezar a usar Selenium WebDriver? Debido a que decidí usar la implementación más común de Selenium en Java, necesitaba configurar mi pequeño entorno Java.

Si desea seguir mi ejemplo, puede utilizar el entorno Java de su elección. Si aún no ha configurado uno, le sugiero que instale Eclipse y se asegure de que puede ejecutar un script simple de "Hola mundo" en Java.

Como quería probar el inicio de sesión en Chrome, me aseguré de que el navegador Chrome ya estuviera instalado en mi máquina. Eso es todo lo que hice en preparación.

Descargando el ChromeDriver

Todos los principales navegadores proporcionan su propia implementación de la interfaz WebDriver. Como quería probar el inicio de sesión de WordPress en Chrome, necesitaba obtener la implementación de WebDriver de Chrome: ChromeDriver.

Extraje el archivo ZIP y almacené el archivo ejecutable chromedriver.exe en una ubicación que pudiera recordar para más tarde.

Configuración de nuestro proyecto Selenium en Eclipse

Los pasos que tomé en Eclipse probablemente sean bastante básicos para alguien que trabaja mucho con Java y Eclipse. Pero para aquellos como yo, que no están tan familiarizados con esto, repasaré los pasos individuales:

1. Abre Eclipse.
2. Haga clic en el icono "Nuevo".
   

   

3. Elija el asistente para crear un nuevo "Proyecto Java" y haga clic en "Siguiente".
   

   

4. Asigne un nombre a su proyecto y haga clic en "Finalizar".
   

   

5. Ahora debería ver su nuevo proyecto Java en el lado izquierdo de la pantalla.
   

   

Agregar la biblioteca de Selenium a nuestro proyecto

Ahora tenemos nuestro proyecto Java, pero aún falta Selenium. Entonces, a continuación, debemos incorporar el marco Selenium a nuestro proyecto Java. Aquí están los pasos que tomé:

1. Descargue la última versión de la biblioteca Java Selenium.
   

   

2. Extraiga el archivo y almacene la carpeta en un lugar que pueda recordar fácilmente.
3. Regrese a Eclipse y vaya a "Proyecto" → "Propiedades".
   

   

4. En el cuadro de diálogo, vaya a "Java Build Path" y luego registre "Bibliotecas".
5. Haga clic en "Agregar JAR externos".
   

   

6. Navegue a la carpeta que acaba de descargar con la biblioteca de Selenium. Resalte todos los archivos .jar y haga clic en "Abrir".
   

   

7. Repita esto también para todos los archivos .jar en la subcarpeta libs .
8. Eventualmente, debería ver todos los archivos .jar en las bibliotecas de su proyecto:
   

   

¡Eso es todo! Todo lo que hemos hecho hasta ahora es una tarea de una sola vez. Podría usar este proyecto ahora para todas sus diferentes pruebas, y no necesitaría volver a realizar todo el proceso de configuración para cada caso de prueba. Un poco limpio, ¿no?

Crear nuestra clase de prueba y dejar que abra el navegador Chrome

Ahora tenemos nuestro proyecto Selenium, pero ¿qué sigue? Para ver si funciona, quería probar algo realmente simple, como abrir mi navegador Chrome.

Para hacer esto, necesitaba crear una nueva clase de Java desde la cual pudiera ejecutar mi primer caso de prueba. En esta clase ejecutable, copié algunas líneas de código Java y, lo creas o no, ¡funcionó! Mágicamente, el navegador Chrome se abrió y, después de unos segundos, se cerró solo.

Inténtalo tú mismo:

1. Haz clic en el botón "Nuevo" nuevamente (mientras estás en la carpeta de tu nuevo proyecto).
   

   

2. Elija el asistente "Clase" y haga clic en "Siguiente".
   

   

3. Asigne un nombre a su clase (por ejemplo, "Ejecutar prueba") y haga clic en "Finalizar".
   

   

4. Reemplace todo el código en su nueva clase con el siguiente código. Lo único que debe cambiar es la ruta a chromedriver.exe en su computadora:
   

    import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Waiting a bit before closing Thread.sleep(7000); // Closing the browser and WebDriver webDriver.close(); webDriver.quit(); } }

5. Guarde su archivo y haga clic en el botón de reproducción para ejecutar su código.
   

   

6. Si ha hecho todo correctamente, el código debería abrir una nueva instancia del navegador Chrome y cerrarlo poco después.
   

   

Probando el inicio de sesión del administrador de WordPress

Ahora era optimista de que podría automatizar mi primera pequeña prueba de funciones. Quería que el navegador navegara a uno de mis proyectos de WordPress, iniciara sesión en el área de administración y verificara que el inicio de sesión fue exitoso. Entonces, ¿qué comandos necesitaba buscar?

1. Navegue hasta el formulario de inicio de sesión,
2. Ubique los campos de entrada,
3. Escriba el nombre de usuario y la contraseña en los campos de entrada,
4. Pulse el botón de inicio de sesión,
5. Compare el título de la página actual para ver si el inicio de sesión fue exitoso.

Una vez más, después de haber realizado todas las actualizaciones necesarias en mi código y hacer clic en el botón Ejecutar en Eclipse, mi navegador comenzó a funcionar mágicamente a través del inicio de sesión de WordPress. ¡Ejecuté con éxito mi primera prueba automatizada de sitio web!

Si quiere probar esto usted mismo, reemplace todo el código de su clase Java con lo siguiente. Revisaré el código en detalle después. Antes de ejecutar el código, debe reemplazar cuatro valores con los suyos propios:

1. La ubicación de su archivo chromedriver.exe (como arriba),

2. La URL de la cuenta de administrador de WordPress que desea probar,

3. El nombre de usuario de WordPress,

4. La contraseña de WordPress.

Luego, guarde y deje que se ejecute de nuevo. Abrirá Chrome, navegará hasta el inicio de sesión de su sitio web de WordPress, iniciará sesión y verificará si el título h1 de la página actual es "Panel".

 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Maximize the browser window webDriver.manage().window().maximize(); if (testWordpresslogin()) { System.out.println("Test Wordpress Login: Passed"); } else { System.out.println("Test Wordpress Login: Failed"); } // Close the browser and WebDriver webDriver.close(); webDriver.quit(); } private static boolean testWordpresslogin() { try { // Open google.com webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); // Type in the username webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); // Type in the password webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD"); // Click the Submit button webDriver.findElement(By.id("wp-submit")).click(); // Wait a little bit (7000 milliseconds) Thread.sleep(7000); // Check whether the h1 equals “Dashboard” if (webDriver.findElement(By.tagName("h1")).getText() .equals("Dashboard")) { return true; } else { return false; } // If anything goes wrong, return false. } catch (final Exception e) { System.out.println(e.getClass().toString()); return false; } } }

Si ha hecho todo correctamente, su salida en la consola de Eclipse debería verse así:

Comprender el código

Como probablemente sea un desarrollador web y tenga al menos un conocimiento básico de otros lenguajes de programación, estoy seguro de que ya comprende la idea básica del código: Hemos creado un método separado, testWordpressLogin , para el caso de prueba específico que se llama desde nuestro método principal.

Dependiendo de si el método devuelve verdadero o falso, obtendrá un resultado en su consola que le indicará si esta prueba específica pasó o falló.

Esto no es necesario, pero de esta manera puede agregar fácilmente muchos más casos de prueba a esta clase y aún tener un código legible.

Ahora, paso a paso, esto es lo que sucede en nuestro pequeño programa:

1. Primero, le decimos a nuestro programa dónde puede encontrar el WebDriver específico para Chrome.
   

    System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");

2. Abrimos el navegador Chrome y maximizamos la ventana del navegador.
   

    webDriver = new ChromeDriver(); webDriver.manage().window().maximize();

3. Aquí es donde saltamos a nuestro submétodo y verificamos si devuelve verdadero o falso.
   

    if (testWordpresslogin()) …

4. La siguiente parte de nuestro submétodo podría no ser intuitiva de entender:
   Los bloques try{…}catch{…} . Si todo sale como se esperaba, solo se ejecutará el código en try{…} , pero si algo sale mal mientras se ejecuta try{…} , entonces la ejecución continúa en catch{} . Siempre que intente ubicar un elemento con findElement y el navegador no pueda ubicar este elemento, generará una excepción y ejecutará el código en catch{…} . En mi ejemplo, la prueba se marcará como "fallida" cada vez que algo salga mal y se ejecute catch{} .
5. En el submétodo, comenzamos navegando a nuestra área de administración de WordPress y ubicando los campos para el nombre de usuario y la contraseña buscando sus ID. Además, escribimos los valores dados en estos campos.
   

    webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");

   
   

   

6. Después de completar el formulario de inicio de sesión, localizamos el botón Enviar por su ID y hacemos clic en él.
   

    webDriver.findElement(By.id("wp-submit")).click();

7. Para seguir visualmente la prueba, incluyo aquí una pausa de 7 segundos (7000 milisegundos = 7 segundos).
   

    Thread.sleep(7000);

8. Si el inicio de sesión es exitoso, el título h1 de la página actual ahora debería ser "Panel", refiriéndose al área de administración de WordPress. Debido a que el título h1 debe existir solo una vez en cada página, he usado el nombre de la etiqueta aquí para ubicar el elemento. En la mayoría de los demás casos, el nombre de la etiqueta no es un buen localizador porque el nombre de una etiqueta HTML rara vez es único en una página web. Después de ubicar el h1 , extraemos el texto del elemento con getText() y verificamos si es igual a la cadena "Dashboard". Si el inicio de sesión no es exitoso, no encontraríamos "Dashboard" como el h1 actual. Por lo tanto, he decidido usar el h1 para verificar si el inicio de sesión fue exitoso.
   

    if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard")) { return true; } else { return false; } 

   
   

   

9. Si algo salió mal en la parte anterior del submétodo, el programa habría saltado directamente a la siguiente parte. El bloque catch imprimirá el tipo de excepción que ocurrió en la consola y luego devolverá false al método principal.
   

    catch (final Exception e) { System.out.println(e.getClass().toString()); return false; }

Adaptando el caso de prueba

Aquí es donde se pone interesante si desea adaptar y agregar sus propios casos de prueba. Puede ver que siempre llamamos a los métodos del objeto webDriver para hacer algo con el navegador Chrome.

Primero, maximizamos la ventana:

 webDriver.manage().window().maximize();

Luego, en un método separado, navegamos a nuestra área de administración de WordPress:

 webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");

Hay otros métodos del objeto webDriver que podemos usar. Además de los dos anteriores, probablemente usarás mucho este:

 webDriver.findElement(By. …)

El método findElement nos ayuda a encontrar diferentes elementos en el DOM. Hay diferentes opciones para encontrar elementos:

• By.id
• By.cssSelector
• By.className
• By.linkText
• By.name
• By.xpath

Si es posible, recomiendo usar By.id porque el ID de un elemento siempre debe ser único (a diferencia, por ejemplo, de className ), y generalmente no se ve afectado si cambia la estructura de su DOM (a diferencia, por ejemplo, de xPath ). .

Nota : Puede leer más sobre las diferentes opciones para ubicar elementos con WebDriver aquí.

Tan pronto como obtenga un elemento usando el método findElement , puede llamar a los diferentes métodos disponibles del elemento. Los más comunes son sendKeys , click y getText .

Estamos usando sendKeys para completar el formulario de inicio de sesión:

 webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");

Hemos utilizado click para enviar el formulario de inicio de sesión haciendo clic en el botón Enviar:

 webDriver.findElement(By.id("wp-submit")).click();

Y getText se ha utilizado para verificar qué texto hay en el h1 después de hacer clic en el botón Enviar:

 webDriver.findElement(By.tagName("h1")).getText()

Nota : asegúrese de revisar todos los métodos disponibles que puede usar con un elemento.

Conclusión

Desde que descubrí el poder de Selenium WebDriver, mi vida como desarrollador web ha cambiado. Simplemente me encanta. Cuanto más me sumerjo en el marco, más posibilidades descubro: ejecutar una prueba simultáneamente en Chrome, Internet Explorer y Firefox o incluso en mi teléfono inteligente, o tomar capturas de pantalla automáticamente de diferentes páginas y compararlas. Hoy en día, uso Selenium WebDriver no solo con fines de prueba, sino también para automatizar tareas repetitivas en la web. Cada vez que veo una oportunidad de automatizar mi trabajo en la web, simplemente copio mi proyecto WebDriver inicial y lo adapto a la siguiente tarea.

Si crees que Selenium WebDriver es para ti, te recomiendo mirar la documentación de Selenium para conocer todas las posibilidades de Selenium (como ejecutar tareas simultáneamente en varios dispositivos (móviles) con Selenium Grid).

¡Espero saber si encuentra WebDriver tan útil como yo!