En un artículo anterior, analizamos qué son las pruebas end-to-end, el alcance que tienen, sus tipos, mejores prácticas, vulnerabilidades, riesgos de seguridad y algunas tecnologías de interés.
En esta ocasión, vamos a trabajar con SeleniumBase, un framework en Python de pruebas basado en Selenium. Primero definiremos en qué consiste, sus características principales y, posteriormente, veremos cómo instalarlo en nuestro entorno de trabajo y realizar un par de pruebas sencillas.
¿Qué es SeleniumBase?
SeleniumBase está diseñado para facilitar la escritura, ejecución y mantenimiento de pruebas automatizadas de aplicaciones web. Se trata de una capa superior (wrapper), que simplifica las tareas comunes de Selenium, agregando características adicionales que lo hacen más fácil de usar y eficiente. Su empleo es ideal para desarrolladores y testers que buscan un enfoque más intuitivo y accesible para realizar pruebas E2E.
El uso de Selenium WebDriver o “Selenium puro” a la hora de automatizar las pruebas en navegadores proporciona un control muy avanzado. Se puede configurar prácticamente todo de forma manual (tiempos de espera, manejo de excepciones, etc.) y también es compatible con muchos lenguajes de programación. Sin embargo, es usual que el código sea largo y complejo, lo que dificulta su configuración y mantenimiento.
A la hora de implementar muchas de las funcionalidades de Selenium, es necesario descargar plugins. Por eso, usar SeleniumBase es mucho más rápido cuando se trata de emplear una tecnología de pruebas E2E y ponerla en funcionamiento. Por otra parte, posee muchos de los plugins integrados directamente en su core, muchos de los cuales probablemente necesites descargar si te decides a usar Selenium puro. Además, es capaz de realizar dichas pruebas en menos líneas de código.
Características principales de SeleniumBase
Entre sus características clave, destacan las siguientes:
- Posee una API sencilla con métodos cortos y fáciles de leer.
- Es capaz de realizar las esperas automáticamente, de forma nativa.
- Puede guardar imágenes individuales con fallos específicos de las pruebas que ejecuta.
- Registra informes HTML con información de cada test (resumen de su estado, capturas de pantalla, detalles de ejecución y gráficos de rendimiento).
- Puedes ejecutar pruebas en paralelo con pytest.
- Es compatible con otros frameworks de pruebas en Python (como pytest y unittest). Esto permite crear pruebas más robustas y de mayor cobertura.
- Permite ejecutar pruebas sin abrir el navegador.
Con estas características, se puede ver el potencial que tiene SeleniumBase. Sin embargo, hay que tener en cuenta que, en caso en el que necesitemos priorizar el control y la flexibilidad en la configuración de los tests o el empleo de lenguajes distintos a Python por necesidades del proyecto o del equipo, deberíamos usar Selenium puro.
Funciones más comunes de SeleniumBase
SeleniumBase posee una amplia gama de funciones disponibles para paliar todas nuestras necesidades. No obstante, quizás casi la mayor parte del tiempo, las que vamos a utilizar son las siguientes:
Para la navegación
- self.open(“ruta_de_mi_aplicación”): abre una ruta.
- self.go_back() / self.go_forward(): navega hacia adelante o hacia atrás en el navegador.
- self.refresh_page(): refresca la página actual.
- self.get_current_url(): obtiene una url de la página abierta.
Para interactuar
- self.type(“input#username”, “employer_one”): escribe texto en un campo de entrada. Es esencial para formularios o barras de búsqueda.
- self.click(“div.class”) / self.double_click(“div#id”): hace click izquierdo una/dos veces.
- self.right_click(“a#id”): hace click derecho sobre el elemento.
Para verificar elementos
- self.assert_element(“div#id”) / self.text(“My title”, “div#id”): verifica que exista un elemento/texto específico.
- self.is_element_visible(“div#id”) / self.is_text_visible(“Hola”): devuelve true si el elemento/texto es visible en la página o false si no lo es. A veces, aunque veamos el elemento/texto en el HTML del documento, puede que no esté visible en la página y necesitemos que lo esté.
Para tiempos de espera
- self.wait_for_element(“div#id”)/self.wait_for_text(“Hola”, “div.class”): espera a que aparezca un elemento/texto en la página.
- self.sleep(3): espera durante el tiempo que le indiques, medido en segundos.
Otros métodos
- self.hightlight(“div.class”): resalta un elemento de la página y es útil para debuggear.
- self.download_file(“https://somewhere.com/data.zip”): descargar un archivo.
- self.scroll_to(“a.class”): hacer scroll hasta un objeto.
Como se puede observar en los ejemplos, se puede utilizar tanto div#id (los ids se referencian con “#”) como div.class (las clases se referencian con “.”). Idealmente, se recomienda el uso de ids, ya que identifican de forma única al elemento en cuestión en el HTML.
Sin embargo, en ocasiones algunos elementos de nuestras webs no poseen uno. En estos casos, debemos referenciar al elemento utilizando clases, para lo que seguiremos una cadena de herencia entre clases hasta que nuestro test sea capaz de encontrar el elemento que buscamos. Esto puede resultar más difícil a medida que el frontend de nuestra web presente más elementos maquetados con la misma estructura, ya que es frecuente que el test esté mirando el elemento equivocado. En estas situaciones, puede resultar más complicado localizar al elemento en el HTML.
Instalación de SeleniumBase y configuración del entorno
En este punto, vamos a preparar nuestro entorno para realizar pruebas E2E con SeleniumBase. Para ello, recomiendo que instalemos una versión reciente de Python. En mi caso, usaré Linux e instalaré Python 3.11. Recomiendo siempre usar entornos para instalar todas las librerías y sus dependencias, de modo que no generemos problemas entre las dependencias de nuestras librerías entre proyectos.
sudo apt updatesudo apt install python3.11python3 --version(nos debe devolver la versión 3.11)python3 -m venv .envsource .venv/bin/activate(para activar el entorno)
Si no usas Linux, simplemente omite los puntos 1 y 2 y busca cómo instalar Python en tu sistema. El resto, ya lo puedes instalar dentro de tu entorno virtual por la consola de tu IDE empleando pip o pip3.
A partir de este momento, debemos asegurarnos de que todo se instala dentro de nuestro entorno virtual. A continuación, para instalar SeleniumBase, debemos ejecutar los siguientes dos comandos:
pip3 install seleniumbasepip3 install pytest-html==4.0.2(complemento de pytest para generar informes HTML y acceder a sus detalles)
Ahora, puedes clonar mi repositorio para instalar dependencias que quizás te puedan resultar de utilidad para tener el proyecto en funcionamiento en tu entorno en local, sin perder demasiado tiempo en buscar algunas librerías necesarias.
(HTTPS) git clone https://github.com/vanprafer/SeleniumBase.git / (SSH) git clone git@github.com:vanprafer/SeleniumBase.gitpip3 install -r requirements.txt
Llegados a este punto, ya deberíamos tener el entorno listo para crear nuestros tests.
Primeros pasos
En esta sección, vamos a realizar un par de test sencillos de ejemplo para iniciarnos con la herramienta. Para ello, debemos irnos al archivo test_google.py del proyecto que nos hemos bajado desde GitHub en el paso anterior.
En la primera función, lo primero que observamos es el decorador @pytest.mark.dependency, donde vamos a indicar el nombre del test y si tuviese alguna dependencia con otro test. En este, como es el primero, no lleva ninguna.
Además, debemos tener en cuenta que pytest lanza los tests por orden alfanumérico, con lo que le indicamos el número “1” a la función para que se lance en primer lugar. Esto tiene sentido si tenemos varias funciones en una misma clase y es recomendable hacer lo mismo con el nombre de los archivos .py. Con respecto al código de la función, vemos que únicamente abrimos una pestaña maximizada del navegador con la ruta de Google y luego cerramos las cookies.
@pytest.mark.dependency(name="google_main_page")
def test_1_google_main_page_browser(self):
# Maximizar la pestaña
self.driver.maximize_window()
# Navegamos hasta google
self.open("https://www.google.com/")
# Rechazamos las cookies
self.click("div.QS5gu.sy4vM")Para lanzarlo, escribimos por consola el siguiente comando para observar el resultado del test en el navegador:
Para el segundo test que vamos a realizar, será necesario instalar e importar undetected_chromedriver. Esta librería permite realizar el login en tu cuenta de Google, consiguiendo que la ejecución del programa con SeleniumBase no sea detectada como una la acción de un bot. Posteriormente, clicamos en el texto donde indica “Iniciar sesión” y se nos abre un formulario de registro. Aquí escribimos nuestras credenciales y, finalmente, realizamos una búsqueda sencilla, por ejemplo, del término “Gatitos”.
Hasta aquí, hemos visto que podemos realizar una prueba E2E a una web de internet, mediante una serie de funciones de SeleniumBase. Pero, ¿de donde se obtiene la información HTML que introduzco en mis funciones? Abrimos el inspector (clic derecho + “Inspect”), seleccionamos el primer icono de la barra de herramientas (“Click an element from the page”) y buscamos el elemento en cuestión.
En este caso, yo recomiendo usar XPath para localizar el elemento de forma eficiente. Puedes encontrar casos de uso de XPath en Python en Selenium con ejemplos por si necesitas ayuda con la implementación o resulta de tu interés.
Conclusión
En este espacio, hemos discutido sobre una tecnología para configurar tests E2E rápida y sencilla: SeleniumBase. Nos hemos detenido previamente para determinar sus puntos clave y funciones más recurrentes y, finalmente, la hemos instalado y realizado un par de tests sencillos.
Como se suele decir, esta herramienta “se aprende en una tarde”. Te animo a ponerla en práctica y a que pruebes tu web con ella para que te des cuenta del tiempo que puedes ganar y consigas crear tests automatizados rápidamente, sin esfuerzo y con la tranquilidad de que tu web funciona correctamente.
