Siempre que programamos una aplicación queremos que sea lo más robusta posible, y una herramienta que nos puede ayudar son crear tests End to End (E2E) o de punta a punta, para evitar en lo máximo posible llevar errores al entorno de producción detectándolos antes con un framework de testing como Protractor.
¿Qué es End to End Testing (E2E)?
E2E Testing es una técnica utilizada para probar si el flujo de una aplicación desde el principio hasta el final se está comportando como se esperaba. El propósito de realizar tests End to End es identificar las dependencias del sistema y garantizar que se mantenga la integridad de los datos entre varios componentes y sistemas del sistema. En resumen, los tests End to End actuarán como un usuario accediendo en nuestra aplicación y detectarán si algo no funciona correctamente según las indicaciones de que demos al test.
¿Qué es Protractor?
Protractor es un marco de test End to End para aplicaciones Angular y AngularJS. Protractor ejecuta tests contra su aplicación que se ejecuta en un navegador real, interactuando con ella como lo haría un usuario.
Cómo instalar Protractor
Usar npm para instalar Protractor a nivel global con:
1 | npm install -g protractor |
Esto instalará dos herramientas de línea de comandos, transportador y webdriver-manager. Puedes Intentar ejecutar el comando protractor –version para asegurarte de que funciona viendo la versión.
El webdriver-manager es una herramienta auxiliar para obtener fácilmente una instancia de un servidor Selenium en ejecución. Úselo para descargar los binarios necesarios con:
1 | webdriver-manager update |
Ahora inicia el servidor con:
1 | webdriver-manager start |
Y ya lo tendremos listo para su ejecución.
Cómo crear un test End to End (E2E)
Creamos un archivo dentro de nuestra aplicación con extensión JS o TS dependiendo si trabajamos con Javascript o con Typescript, por ejemplo nuestrotest-spec.js
Ahora ya podemos escribir el código para nuestro test E2E, os pongo uno de ejemplo, que realiza una búsqueda (por ejemplo nuestro buscador es de marcas de coches) y detecta si ha habido resultados.
En este ejemplo, el código de la búsqueda que tendríamos de nuestra aplicación sería algo así:
1 2 3 4 5 | <input type="text" class="search-text"> <input type="submit" value="Enviar" class="search-button"> <table class="search-results-datatable"> <tr class="search-datatable-row" *ngFor="let field of result"><td>{{field.name}}</td></tr> </table> |
Y este sería el código de nuestro test E2E:
1 2 3 4 5 6 7 8 9 10 11 | describe('test de nuestra búsqueda', function() { it('encuentra como mínimo un resultado', function() { browser.get('http://localhost:4200/search'); // Accedemos a nuestra página de búsqueda element(by.css('.search-text')).sendKeys('BMW') // Selecionamos cuadro de texto y escribimos 'BMW' element(by.css('.search-button')).click(); // Seleccionamos el butón de búsqueda por CSS y le decimos que haga click en él expect(element.all(by.css('.search-results-datatable .search-datatable-row')).count()).toBeGreaterThan(0); // Seleccionamos todos las filas de la tabla del resultado de búsqueda y le decimos que las cuente, luego le decimos que compruebe que hay más de 0, si hay 0 no pasará el test }); }); |
Protractor tiene mucha variedad de selectores (element con by) como de funciones como click() o sendKeys() como de comparadores (toBeGreaterThan, toEqual..), este ejemplo es sólo una aproximación, tenéis más información en la web de Protractor:
https://www.protractortest.org/
El archivo de configuración de Protractor
Para ejecutar los tests End to End de Protractor necesitaremos crear un archivo de configuración que nos indique dónde están nuestros tests y con qué lo ejecutamos.
1 2 3 4 5 | exports.config = { framework: 'jasmine', seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['nuestrotest-spec.js'] }; |
Cómo ejecutar nuestro test E2E
Finalmente para ejecutar nuestro test E2E iremos a la consola y ejecutaremos el comando:
1 | protractor conf.js |
Y ya lo tenemos, espero que os sea de utilidad.
