{"id":51612,"date":"2019-01-20T17:40:45","date_gmt":"2019-01-20T16:40:45","guid":{"rendered":"http:\/\/www.nerdilandia.com\/?p=51612"},"modified":"2019-01-20T17:40:45","modified_gmt":"2019-01-20T16:40:45","slug":"programando-test-e2e-aplicaciones-angular-protractor","status":"publish","type":"post","link":"https:\/\/nerdilandia.com\/index.php\/2019\/01\/20\/programando-test-e2e-aplicaciones-angular-protractor\/","title":{"rendered":"Programando test e2e para aplicaciones Angular con Protractor"},"content":{"rendered":"

Un buen developer mobile debe exigirse siempre\u00a0ser lo m\u00e1s eficiente posible a la hora de crear una app.<\/strong>\u00a0En los desarrollos de hoy en d\u00eda ya no podemos invertir mucho tiempo\u00a0buscando\u00a0bugs<\/em>, errores o simplemente funcionalidad que no funciona como\u00a0deber\u00eda. Para que esto no ocurra,\u00a0es importante tener nuestro\u00a0c\u00f3digo limpio\u00a0y\u00a0haberlo probado con anterioridad.<\/strong>\u00a0Una forma de probar nuestras aplicaciones es ir ejecutando y realizando los\u00a0pasos necesarios para comprobar que todo est\u00e1 como se hab\u00eda definido. Pero,\u00a0\u00bfy si pudi\u00e9ramos automatizar nuestras pruebas E2E y no tener que ejecutar\u00a0las pruebas de forma manual?\u00a0<\/strong><\/p>\n

Como ya sabr\u00e9is, las pruebas son esenciales para saber c\u00f3mo funciona la\u00a0aplicaci\u00f3n.\u00a0Vamos a ver\u00a0c\u00f3mo configurar y automatizar nuestras pruebas de extremo a\u00a0extremo comprobando que todo nuestro sistema funciona como deber\u00eda\u00a0hacerlo.<\/strong>\u00a0Para esto vamos a utilizar\u00a0Protractor\u00a0<\/a>como framework de pruebas E2E.<\/strong>\u00a0Protractor est\u00e1 construido sobre\u00a0Selenium WebDriver<\/a>\u00a0y utiliza el framework\u00a0Jasmine<\/a>.<\/p>\n

INSTALACI\u00d3N<\/h3>\n

Usaremos npm para\u00a0instalar Protractor<\/strong>\u00a0de forma global:<\/p>\n

\"protactor<\/p>\n

Esto nos instalar\u00e1 dos herramientas: Protractor y Webdriver-Manager<\/strong>.\u00a0La herramienta Webdriver-Manager nos proporciona una forma sencilla de\u00a0obtener una instancia del servidor de Selenium.\u00a0Nos descargamos los binarios necesarios:<\/p>\n

\"Protactor<\/p>\n

Arrancamos el servidor con el siguiente comando:<\/p>\n

\"protactor<\/p>\n

Esto levantar\u00e1 el servidor de Selenium en el que vamos a probar.<\/p>\n

CONFIGURACI\u00d3N<\/h3>\n

Protractor necesita un fichero de configuraci\u00f3n que le indica c\u00f3mo ejecutar,\u00a0c\u00f3mo conectar con Selenium, etc.<\/strong>\u00a0Una buena pr\u00e1ctica es crearnos un directorio dentro de nuestro proyecto donde\u00a0estar\u00e1n todos los tests y configuraciones. En nuestro caso nos creamos un\u00a0directorios llamado \u201ctests\u201d.\u00a0Dentro del cual, crearemos un fichero llamado conf.js que ser\u00e1 el\u00a0fichero de configuraci\u00f3n que utilizar\u00e1 Protractor. Una vez creado, dentro de\u00a0nuestro fichero a\u00f1adiremos:<\/p>\n

\"protactor<\/p>\n

Como vemos en el fichero, en este caso le indicamos el framework que\u00a0utilizar\u00e1, la direcci\u00f3n del servidor Selenium y los ficheros de tests que vamos a\u00a0ejecutar. Nuestro fichero de test para este ejemplo se llamar\u00e1 login.js. Adem\u00e1s, se pueden configurar muchas m\u00e1s cosas, por ejemplo, el navegador\u00a0en donde queremos que se ejecuten las pruebas, la url base de nuestro\u00a0proyecto, etc. Si queremos a\u00f1adir directamente en que navegador queremos\u00a0ejecutar las pruebas s\u00f3lo necesitaremos agregarlo al fichero de conf.js<\/p>\n

\"protactor<\/p>\n

TEST<\/h3>\n

Para escribir nuestros test, vamos a crearnos un fichero llamado login.js donde\u00a0introduciremos las pruebas que deber\u00e1 pasar nuestra aplicaci\u00f3n. En nuestro\u00a0caso, nosotros separamos las pruebas por funcionalidad, al igual que se separa\u00a0las funcionalidad de nuestro proyecto. Para esta prueba simplemente nos\u00a0crearemos el fichero login.js.\u00a0En este ejemplo nos vamos a basar en que nuestra aplicaci\u00f3n tendr\u00e1 una vista\u00a0de login en la cual deberemos introducir el username, un password y pulsar un\u00a0bot\u00f3n para loguearnos.<\/p>\n

Dentro de nuestro fichero introduciremos:<\/p>\n

\"protactor\"<\/p>\n

Vamos a ver el c\u00f3digo escrito.\u00a0Como vemos utilizamos Jasmine para escribir nuestros tests, cada test deber\u00e1\u00a0contener\u00a0describe.<\/em><\/p>\n

\"protactor<\/p>\n

En nuestro caso definimos tres variables que utilizaremos para los distintos\u00a0casos de pruebas que vamos a realizar.<\/p>\n

\"protactor<\/p>\n

Utilizando\u00a0beforeEach<\/em>\u00a0le estamos diciendo que ejecute el c\u00f3digo dentro antes\u00a0de comenzar a validar las pruebas.<\/p>\n

\"protactor<\/p>\n

Le estamos indicando que se sit\u00fae en la url \u201c\/login<\/em>\u201d y asigne a nuestras\u00a0variables los elementos de la vista. Tendremos los elementos de\u00a0username<\/em>\u00a0y\u00a0password<\/em>, los cuales hemos identificado en la vista con ng-\u00a0model=\u2018username\u2019 y ng-model=\u2018password\u2019. Nuestro bot\u00f3n para\u00a0loguearnos lo definimos de esta forma en la vista <button ng-\u00a0click=\u2018login()\u2019>Entrar<\/button><\/p>\n

Una vez hemos obtenido los elementos de nuestra vista, vamos a definir la\u00a0prueba que debemos pasar. El primer caso que vamos a comprobar es que\u00a0intente logarse con un usuario y contrase\u00f1a incorrecto y en tal caso muestre un\u00a0popup<\/em>\u00a0con un error.<\/p>\n

\"protactor<\/p>\n

Nuestra prueba deber\u00e1 contener\u00a0it<\/em>\u00a0que definir\u00e1 la prueba que estamos\u00a0comprobando y un\u00a0expect<\/em>\u00a0que ser\u00e1 lo que esperamos de esa prueba. Dentro\u00a0de cada prueba se puede definir varios\u00a0expect<\/em>, pero hacer esto nos dificultar\u00e1\u00a0a la hora de ver cuando algo no se ha realizado correctamente.<\/p>\n

Dentro de nuestra prueba asignamos los valores para realizar la prueba.\u00a0Introducimos para el\u00a0username \u201cadmin\u201d<\/em>\u00a0y para el\u00a0password \u201cfail\u201d<\/em>\u00a0para que no\u00a0sea capaz de loguearse. Una vez asignados estos valores, le indicaremos al\u00a0bot\u00f3n que haga click y esperamos a que aparezca un\u00a0popup<\/em>\u00a0con el error.<\/p>\n

Para el caso contrario, es decir, donde se loguea correctamente:<\/p>\n

\"protactor<\/p>\n

Vemos que asignamos los datos correctos tanto para el username y el\u00a0password y una vez hacemos click en el bot\u00f3n comprobamos que se ha\u00a0logueado y ha navegado a la url \u201c\/home\u201d<\/p>\n

Al finalizar de configurar y escribir los tests que necesitamos que pase nuestra\u00a0aplicaci\u00f3n deberemos ejecutarlas. Teniendo el servidor de Selenium iniciado\u00a0ejecutaremos el comando:<\/p>\n

\"protactor<\/p>\n

Esto iniciar\u00e1 las pruebas en el navegador que le hayamos indicado y podremos\u00a0ver en la consola el resultado de las pruebas realizadas.<\/p>\n

Con esto hemos visto un ejemplo de c\u00f3mo crear, con Protractor, nuestras\u00a0pruebas E2E con AngularJS. Protractor es un framework muy potente y con\u00a0una gran comunidad detr\u00e1s que nos hace pensar que acabar\u00e1 convirti\u00e9ndose en el framework oficial\u00a0de pruebas E2E para AngularJS.<\/p>\n

Y vosotros \u00bfos un\u00eds a la comunidad de Protractor?<\/p>\n","protected":false},"excerpt":{"rendered":"

Un buen developer mobile debe exigirse siempre\u00a0ser lo m\u00e1s eficiente posible a la hora de crear una app.\u00a0En los desarrollos de hoy en d\u00eda ya no podemos invertir mucho tiempo\u00a0buscando\u00a0bugs, errores o simplemente funcionalidad que no funciona como\u00a0deber\u00eda. Para que … Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":1,"featured_media":51613,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[72,107],"class_list":["post-51612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-moviles","tag-aprendizaje","tag-internet"],"_links":{"self":[{"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/posts\/51612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/comments?post=51612"}],"version-history":[{"count":0,"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/posts\/51612\/revisions"}],"wp:attachment":[{"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/media?parent=51612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/categories?post=51612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nerdilandia.com\/index.php\/wp-json\/wp\/v2\/tags?post=51612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}