Automatizaciones con Autoc0de desde cero

En esta ocasión quiero presentarles a este gran Framework de automatización llamado Autoc0de, creado por No tienes permitido ver los links. Registrarse o Entrar a mi cuenta , miembro activo de la comunidad de Underc0de.

Autoc0de se diferencia del resto de los frameworks por sus siguientes características:

– Muy fácil de implementar
– Facilidad para aprender a usarlo
– Se actualiza constantemente
– Gran respaldo de la comunidad
– Cada vez más empresas estan empezando a implementarlo
– Facil de integrar a GitHub y Jenkins
– Hecho en Java
– No requiere conocimientos extensos de programación
– Desde el primer día se puede comenzar a automatizar
– Sirve para automatizar Web, APIs y Mobile

Autoc0de es Framework que utiliza BDD (Cucumber), puede integrarse a Jenkins y Github, funciona con Selenium para automatizar web, Appium para aplicaciones mobile, y también sirve para automatizar API REST. Por otro lado, emite reportes en PDF y en HTML que son muy intuitivos

En esta guía vamos a ver como montarlo desde cero y como correr el ejemplo que trae.

Requerimientos:

– Java
– Maven
– IntelliJ o cualquier otro IDE que les guste
– Cucumber (Plugin del IDE)


Instalación de Java

Lo primero que haremos será instalar Java de su página oficial: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta


Una vez descargado, lo instalamos.


Configuración de Maven

Para descargar Maven, debemos hacerlo de su página oficial: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta y descargar el archivo binario


Una vez descargado, lo debemos descomprimir


Ahora vamos a las variables de entorno y debemos agregar la ruta de Maven y de Java


A continuación dejo los pasos a seguir:


Hacemos lo mismo con Java


Para corroborar si quedó todo bien, abriremos una consola y colocaremos lo siguiente:

java -version y mvn -v


Si nos reconoce ambos comandos, es porque lo hemos hecho bien, de lo contrario, dirá que no reconoce el comando y esto es porque esta mal colocada la ruta en la variable de entorno.


Instalación de IntelliJ

En mi caso voy a utilizar IntelliJ como IDE, porque es el que más me gusta, pero pueden usar cualquier otro que prefieran.

Para descargarlo, vamos a su sitio oficial: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta y descargamos la versión Community

Lo instalamos como a cualquier otro software, lo único que tenemos que tener en cuenta, es que debemos marcar el siguiente checkbox en este paso:


Esto es para evitar tener que colocarlo después en las variables de entorno.


Levantar el proyecto de Autoc0de

Para descargar autoc0de, deberemos ir a su repo en GitHub: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta


Una vez descargado, lo descomprimimos y lo abrimos con IntelliJ. Para ello, clickeamos en OPEN


Y buscamos la carpeta descomprimida. (Importante: Abrir el directorio que tiene el ícono negro en la parte de abajo)


A continuación, nos saldrá una alerta, indicandonos si confiamos en el proyecto (lo que no es algo de cero y estamos abriendo un proyecto ya creado)


Seguido a esto, comenzará a cargar el framework. La primera vez demorará un rato en cargar todo. Nos daremos cuenta, porque dejará de cargar cosas en la esquina inferior derecha.


También, esta primera vez nos pedirá instalar Cucumber, para poder interpretar el Gherkin de los test cases. Simplemente damos click en Configure Plugins, y le damos a instalar.


Una vez que finalice de cargar todo, podremos ver toda la estructura del framework.


Por último, debemos seleccionar la versión de JDK que usaremos. Para ello, debemos ir a File >> Project Structure y seleccionamos el JDK que tengamos instalado.


Con esto ya tendremos nuestro ambiente listo para empezar con la automatización!

Arquitectura de Autoc0de

Su arquitectura es la siguiente:


Parece un poco complejo de entender, pero al principio de esta guía, mencioné que es un framework muy sencillo, y esto se debe a que solo tiene 3 capas de suma importancia y que son con las que estaremos interactuando permanentemente:

– Feature (En donde se escriben los test cases)
– Steps (Traducción de lenguaje coloquial a Java)
– PageObject (Mapeos de elementos y métodos)

El resto de las capas, es como para configurar otros parámetros más avanzados, que por ahora no es necesario tocar.

Capa 1: Features

El Feature es en donde tendremos el escenario escrito en lenguaje coloquial (Cucumber). En otras palabras, podemos decir que cada feature, tendrá todos los test cases que se le pueden ejecutar a una funcionalidad.

Cucumber es una herramienta utilizada para implementar metodologías como BDD (Behaviour Driven Development) las cuales permiten ejecutar descripciones funcionales escritas en texto plano como pruebas de software automatizadas.

Estas descripciones funcionales, se escriben en un lenguaje específico y legible llamado "Gherkin", el cual sirve como documentación al desarrollo y para las pruebas automatizadas.

Cucumber tiene palabras reservadas como GIVEN, WHEN, THEN, AND, entre otros que no son tan usuales, como por ejemplo BUT

En el siguiente ejemplo, vamos a ver como loguear a un usuario en el foro de Underc0de. Haremos una prueba con un usuario real y otro con uno que no existe, para que vean como se ven en el reporte


Quizas no se entienda nada a simple vista, pero voy a explicar linea por linea para que se entienda mejor.

Linea 1: «Feature» Acá tenemos el nombre del feature, es decir, que es lo que se va a probar. En este caso, el login del foro de Underc0de
Linea 3: «@Tags» Con autoc0de podemos crearles tags a los distintos test cases, y luego solo correr a todos los test cases que tengan un tag en específico. Por ejemplo, podemos escribir 100 test cases automatizados, pero solo 10 tienen el tag de «@Smoke», si a la hora de correr los test cases solo coloco el tag de «@Smoke», se correrán unicamente esos 10 casos de prueba.
Linea 4: «Scenario ó Scenario Outline» Si el escenario es uno simple, solo colocamos scenario, pero si es un scenario que se ejecutará más de una vez utilizando una tabla de examples, entonces se coloca scenario outline. (En la linea 11 explicaré la diferencia un poco mejor)
Lineas del 5 al 10: «Pasos» Como dije anteriormente, cucumber tiene palabras reservadas:

Given: Dado
When: Cuando
AND: Y
Then: Entonces

Acá es cuando especificamos el paso a paso de lo que debe hacer la automatización.
El Given indica desde donde parte el usuario a navegar, el When y And son los pasos que va realizando y el Then es la verificación.

Linea 11 al 14: «Examples» La tabla de examples se utiliza cuando queremos ejecutar un mismo test cases, pero con distintos sets de datos. En este caso, este test case se ejecutará 2 veces. Primero se logueará al foro utilizando la cuenta autoc0de con la pass Underc0de y la segunda vez usará el usuario autoc0deFail con la password underc0defail

Hay algo que me han preguntado con mucha frecuencia, y es si a estos steps hay que escribirlos si o si en inglés. La respuesta es NO. Se pueden escribir en cualquier idioma.

Para entender todo esto mejor, vamos a ver el siguiente ejemplo de como pasar un test case normal (manual) a Gherkin

Feature: Loguearse con un mail y contraseña válidos

@Logueo
Scenario: Loguearse en el sistema con credenciales válidas
Given el usuario esta en el login del sistema
When el usuario ingresa un mail y contraseña válidos
And el usuario clickea en el botón Entrar
Then El sistema redirecciona al dashboard principal

Con esto ya tendríamos armado nuestro feature.

Capa 2: Steps

La segunda capa del framework son los STEPS o pasos. El archivo de steps contiene cada línea de nuestro feature convertida a lenguaje de programación y acá es en donde le decimos que acciones debe ejecutar nuestro script.

Para entenderlo un poco mejor, vamos a examinar algunos steps


En este código resalté dos porciones del código para explicarlas mejor.
La linea 24 y 39 empiezan con un No tienes permitido ver los links. Registrarse o Entrar a mi cuenta que son los AND del feature. Siempre que tengamos un @Given, @When, No tienes permitido ver los links. Registrarse o Entrar a mi cuenta o @Then, es porque estamos llamando al paso de la capa 1 (del feature)

En las líneas 25 y 26, y en las 40 y 41, tenemos código en Java, que son clases, en donde le decimos que deben hacer en ese paso.

En la 25 y 26 hacen un click a un botón, mientras que en la 40 y 41, completan con usuario y contraseña unos input para loguearse.

Cada una de estas clases, apunta a un método de la capa 3 del framework (Page Object)

Capa 3: Page Object

El Page Object esta compuesto por 2 partes, el mapeo y los métodos.

Mapeo = Declarar en variables como se llama cada elemento de una web/aplicación
Métodos = Es en donde indicamos que acción debe hacerle a cada elemento mapeado (si es un click, completar con texto, etc)

Mapeo de elementos

Cada elemento de una web o aplicación puede ser mapeado por distintos tipos de selectores. Entre ellos:

– Class
– ID
– Name
– Xpath
– Algún otro ID personalizado.

En la siguiente imagen, vamos a ver el mapeo que viene como ejemplo en Autoc0de.


En este caso, esta usando XPATH para el mapeo.

Para poder mapear un elemento, debemos ir a la web que estamos automatizando y dar click derecho sobre algún elemento y luego en inspeccionar. En este caso, vamos a inspeccionar el botón «Buscar con Google»


Una vez hecho esto, se nos abrirá el inspector del browser y podremos analizar ese elemento en particular.


En este caso, vemos que el botón tiene una clase llamada gNO89b y un name llamado btnK. Podríamos mapear a ese botón con cualquiera de esos 2 elementos.

Por otro lado, si damos click derecho en esa línea resaltada, podremos copiar el XPath.


En este caso el XPath es el siguiente:

/html/body/div[1]/div[3]/form/div[1]/div[1]/div[3]/center/input[1]

El XPath es la ruta que indica en donde se encuentra este elemento en el DOM de la página. Lo malo de usar este selector, es que si agregran un DIV o si mueven de lugar el botón, esta ruta del XPath cambiará y tendremos que modificar nuestro código para reemplazarlo por el nuevo.

Por lo general los IDs suelen ser únicos, por lo que suele ser el elemento ideal para mapear.

En caso de mapear por una Clase, esta puede repetirse. Las clases son las que suelen usarse para darle un estilo a un elemento, por lo que si hay 2 botones iguales, puede que tengan la misma clase. Y si queremos clickear un botón que aparezca en la parte de abajo del sitio, deberemos recorrer todos los botones hasta llegar al que queremos, de lo contrario, clickeará el primer elemento que encuentre con esa clase.

Una vez obtenido el selector, lo declaramos en una variable de esta forma:

private final String LOGIN_BUTTON_XPATH = "//*[No tienes permitido ver los links. Registrarse o Entrar a mi cuenta=\"top\"]/section[1]/div/div/div/div/h2";

En el nombre de la variable pueden poner cualquier cosa, pero Autoc0de sugiere usar la siguiente estructura:

NombreDelElemento_TipoDeElemento_Selector

En este caso, estamos mapeando podemos decir que estamos mapeando un botón que se llama «Login» y lo estamos haciendo através de XPath

En caso de mapear por ID sería:

private final String LOGIN_BUTTON_ID = "btnK";


Métodos

En esta parte de la capa 3, le indicamos que debe hacerle a cada elemento que mapeamos anteriormente. Es decir, si mapeamos un botón, se supone que le vamos a hacer un click. En la siguiente porción de código del ejemplo de Autoc0de, podemos ver como hacer el click a un botón mapeado.


Ejecutando el ejemplo de Autoc0de

Para poder ejecutar el ejemplo de Autoc0de, debemos abrir la terminal del intelliJ y escribir: mvn clean test


Seguido a esto, se abrirá el browser que tengamos configurado (Chrome por defecto) y hará todos los pasos del test. Al finalizar, dentro de la carpeta Target >> Reports, podremos ver el reporte


Reporte en HTML:


Y también podemos ver el paso que fallo, con su respectivo screenshot:


En este caso no me creó el reporte en PDF por mi versión de Java. Para que lo genere, debemos tener una versión superior a la 8. Pero se ve algo así:


Esto es todo por ahora!

Espero que les guste y sirva este excelente framework de Automation!

ANTRAX

Gracias por la info de Autoc0de, lo aplicare a mí trabajo 🤙

Excelente inducción amigo @ANTRAX , te felicito... Gran Post!! (A fav+)
Quería dejar algunas puntas más para quienes gusten meter los pies en el barro, y colaborar por supuesto... extendiendo así el espectro cogsnitivo de ésta poderosa obra de Arquitectura nacida en el seno de Underc0de, y conducida por el inmenso @DarkDante .

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

El resto de las capas, es como para configurar otros parámetros más avanzados, que por ahora no es necesario tocar.

... Por si quieren meter mano, hay dos archivos en la estructura del fw que les puede llegar a interesar dentro del pack de clases Utility:
- El primer archivo a resaltar es el de la clase Hook y notamos en sus imports la grandiosa obra de bonigarcia con su WebDriverManager.


Siguiendo, dentro del mismo podemos observar el shiwtcheo de interfaz de navegador, con la capacidad de ejecución headless tanto de chrome, cómo de firefox mozilla también.


- El segundo archivo y de vital importancia, la clase MasterPage, vemos cómo extiende de la clase Hook ... y de ésta forma cerramos el entendimiento sobre el papel a cumplir de ésta clase.


Cómo podemos apreciar, los métodos están inscriptos dentro de ésta clase... dónde podemos agregar algunos custom, pero básicamente es la clase a consultar para interactuar con los elementos a la hora de automatizar.
Gracias nuevamente @ANTRAX por todos éstos recursos que tanto aportan a la Comunidad, y al quehacer profesional del día a día. Saludos globales y en especial al team de Underc0deLabs!!

Genial el aporte tanto en lo que al post se refiere como a la contribución en términos de API!!!
Buen trabajo!!!
En el entorno de variables cual es la razón por la que haces la declaración en sistema (global o default) y luego la extrapolas al IDE (INTELLIJ IDEA). ¿Se puede hacer sólo en el entorno de ejecución? En particular a los usuarios de Linux nos es fácil hacer los cambios por consola (de la configuración en ese momento) aunque al reiniciar el default sea el que más se use.
Gracias y una vez más excelente post.

Excelente post, muy detallada la explicación. No tuve inconvenientes para instalar todo.
Lo único que me generó error es el reporte en html por un problema de la codificación UTF-8
Sería lindo un apartado con ejercicios o sugerencia de los mismos para poder incursionar y saber un posible resultado.

Excelente post, muy util Autoc0de facil de aprender a utilizar y facil de enseñar

Buenas, excelente la explicación paso a paso 
Lo que si al descargar el zip y correr el proyecto, me muestra un error
[ERROR] /C:/Autoc0de-Web/Autoc0de-WEB-main/src/test/java/com/autoc0de/pages/ExamplePage.java:[4,18] cannot access org.testng.Assert
[ERROR]   bad class file: C:\Users\Usuario\.m2\repository\org\testng\testng\7.6.1\testng-7.6.1.jar(org/testng/Assert.class)
[ERROR]     class file has wrong version 55.0, should be 52.0
[ERROR]     Please remove or make sure it appears in the correct subdirectory of the classpath.
[ERROR]
[ERROR] -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Adjunto captura de pantalla

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

No tienes permitido ver los links. Registrarse o Entrar a mi cuentaBuenas, excelente la explicación paso a paso 
Lo que si al descargar el zip y correr el proyecto, me muestra un error
[ERROR] /C:/Autoc0de-Web/Autoc0de-WEB-main/src/test/java/com/autoc0de/pages/ExamplePage.java:[4,18] cannot access org.testng.Assert
[ERROR]  bad class file: C:\Users\Usuario\.m2\repository\org\testng\testng\7.6.1\testng-7.6.1.jar(org/testng/Assert.class)
[ERROR]    class file has wrong version 55.0, should be 52.0
[ERROR]    Please remove or make sure it appears in the correct subdirectory of the classpath.
[ERROR]
[ERROR] -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Adjunto captura de pantalla

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Probaste ejecutando directamente el archivo "TestRunner"?

Buenas, me da error tambien!!

No tienes permitido ver los links. Registrarse o Entrar a mi cuentaBuenas, me da error tambien!!

Podrías mostrar un poco mas la consola de cuando te sale el error? (Ejecutando el archivo "TestRunner")