Tutorial de pruebas de transportador: Marco de herramientas de automatización

Transportador juega un papel importante en las pruebas de aplicaciones AngularJS y funciona como un integrador de soluciones que combina tecnologías potentes como Selenium, Jasmine, controlador Web, etc. Está destinado no sólo para probar la aplicación AngularJS, sino también para escribir pruebas de regresión automatizadas para aplicaciones Web normales también.

En este tutorial para principiantes, aprenderás –

¿Por qué necesitamos el marco de transportador?

JavaScript se utiliza en casi todas las aplicaciones web. A medida que crecen las aplicaciones, JavaScript también aumenta en tamaño y complejidad. En tal caso, se convierte en una tarea difícil para los probadores probar la aplicación web para varios escenarios.

A veces es difícil capturar los elementos web en aplicaciones AngularJS usando JUnit o Selenium WebDriver.

Transportador es un programa NodeJS que está escrito en JavaScript y se ejecuta con Node para identificar los elementos web en las aplicaciones AngularJS, y también utiliza WebDriver para controlar el navegador con acciones del usuario.

Ok, bien ahora vamos a discutir qué es exactamente una aplicación AngularJS?

Las aplicaciones AngularJS son aplicaciones web que utiliza la sintaxis de HTML extendido para expresar componentes de aplicaciones web. Se utiliza principalmente para aplicaciones web dinámicas. Estas aplicaciones utilizan menos código flexible en comparación con las aplicaciones web normales.

¿Por qué no podemos encontrar elementos web Angular JS usando el controlador Web Selenium Normal?

Las aplicaciones JS angulares tienen algunos atributos HTML adicionales como ng-repeater, ng-controller, ng-model.., etc. que no están incluidos en los localizadores de selenio. Selenium no es capaz de identificar esos elementos web usando código Selenium. Por lo tanto, Transportador en la parte superior de Selenium puede manejar y controlar esos atributos en Aplicaciones Web.

El transportador es un marco de pruebas de extremo a extremo para aplicaciones basadas en Angular JS. Mientras que la mayoría de los marcos se centran en la realización de pruebas unitarias para aplicaciones Angular JS, Protractor se centra en probar la funcionalidad real de una aplicación.

Antes de iniciar el transportador, tenemos que instalar lo siguiente:

1. Selenio
Puede encontrar los pasos de instalación de Selenium en los siguientes enlaces, (https://www.guru99.com/installing-selenium-webdriver.html)

2. NPM (Node.js)
Instalación de NodeJS, necesitamos instalar NodeJS para instalar Transportador. Puede encontrar estos pasos de       instalación en el siguiente enlace. (https://guru99.es/download-install-node-js/)

Instalación del transportador

Paso 1) Abra el símbolo del sistema y escriba “npm install –g protractor” y presione Enter.

El comando anterior descargará los archivos necesarios e instalará el transportador en el sistema cliente.

Paso 2) Compruebe la instalación y la versión usando “Transportador —version”. Si tiene éxito, mostrará la versión como en la siguiente captura de pantalla. Si no es así, vuelva a realizar el paso 1.

(Los pasos 3 y 4 son opcionales, pero se recomiendan para una mejor práctica)

Paso 3) Actualice el administrador de controladores Web. El administrador de controladores web se utiliza para ejecutar las pruebas contra la aplicación web angular en un navegador específico. Después de instalar Transportador, el administrador de controladores web debe actualizarse a la última versión. Esto se puede hacer ejecutando el siguiente comando en el símbolo del sistema.

Paso 4) Inicie el administrador de controladores web. Este paso ejecutará el gestor de controladores web en segundo plano y escuchará cualquier prueba que se ejecute a través de transportador.

Una vez que el transportador se utiliza para ejecutar cualquier prueba, el controlador web cargará y ejecutará automáticamente la prueba en el navegador correspondiente. Para iniciar el administrador de controladores web, el siguiente comando debe ejecutarse desde el símbolo del sistema.

Ahora, si va a la siguiente URL (http://localhost:4444/wd/hub/static/resource/hub.html) en su navegador, en realidad verá el administrador de controladores web ejecutándose en segundo plano.

Prueba de aplicación AngularJS de ejemplo usando Protractor

Transportador necesita dos archivos para ejecutar, un archivo de especificaciones y un archivo de configuración.

1. Archivo de configuración: Este archivo ayuda a transportador a donde se colocan los archivos de prueba (specs.js) y a hablar con el servidor Selenium (Selenium Address). Chrome es el navegador predeterminado para Transportador.

2. Archivo de especificaciones: Este archivo contiene la lógica y los localizadores para interactuar con la aplicación.

Paso 1) Tenemos que iniciar sesión https://angularjs.org e introducir el texto como “GURU99” en el cuadro de texto “Introduzca un nombre aquí”.

Paso 2) En este paso,

  1. Introducido el nombre “Guru99”
  2. En el texto de salida “Hello Guru99” se ve.

Paso 3) Ahora tenemos que capturar el texto de la página web después de introducir el nombre y la necesidad de verificar con el texto esperado.

Código:

Tenemos que preparar el archivo de configuración (conf.js) y el archivo de especificación (spec.js) como se mencionó anteriormente.

Lógica de spec.js:

Explicación de código de spec.js:

1. describe (‘Introduzca el nombre de GURU99’, función ()
La sintaxis describe es del marco Jasmine. Aquí “describe” (‘Enter GURU99’) normalmente define los componentes de una aplicación, que puede ser una clase o función, etc. En el conjunto de códigos llamado como “Enter GURU99,” es solo una cadena y no un código.

2. it (‘debe agregar un Nombre como GURU99’, function ()
3. browser.get (‘https://angularjs.org’)
Al igual que en Selenium Webdriver browser.get abrirá una nueva instancia del navegador con la URL mencionada.

4. elemento (by.model (‘YourName’)) .sendKeys (‘GURU99’)
Aquí estamos encontrando el elemento web usando el nombre del modelo como “YourName”, que es el valor de “ng-model” en la página web. Comprueba la captura de pantalla de abajo.

5. var guru= elemento (by.xpath (‘html/cuerpo/div [2] /div [1] /div [2] /div [2] /div/h1’))
Aquí estamos encontrando el elemento web usando XPath y almacenamos su valor en una variable “guru”.

6. expect (guru.getText ()) .toEqual (‘Hola GURU99! ‘)
Finalmente estamos verificando el texto que hemos obtenido de la página web (usando gettext ()) con el texto esperado.

Lógica de conf.js:

Explicación de código de conf.js

  1. 1. SeleniumAddress: ‘http://localhost:4444/wd/hub’
    El archivo de configuración indica a Protractor la ubicación de Selenium Address para hablar con Selenium WebDriver.
  2. especificaciones: [‘spec.js’]
    Esta línea le dice a Transportador la ubicación de los archivos de prueba spec.js

Ejecución del Código

Aquí primero, cambiaremos la ruta del directorio o navegaremos a la carpeta donde los confi.js y spec.js se colocan en nuestro sistema.

Siga el siguiente paso.

Paso 1) Abra el símbolo del sistema.

Paso 2) Asegúrese de que el administrador de controladores web de selenio esté en funcionamiento. Para eso, dé el comando como “webdriver-manager start” y presione Enter.

(Si el controlador web de selenio no está funcionando, no podemos continuar con una prueba ya que el transportador no puede encontrar el controlador web para manejar la aplicación web)

Paso 3) Abra un nuevo símbolo del sistema y dé el comando como “transportador conf.js” para ejecutar el archivo de configuración.

Explicación:

  • Aquí el transportador ejecutará el archivo de configuración con el archivo de especificación dado en él.
  • Podemos ver el servidor de selenio corriendo en “http://localhost:4444/wd/hub” que hemos dado en el archivo conf.js.
  • Además, aquí puede ver el resultado cuántos se pasan y fallas como en la captura de pantalla anterior.

Bien, hemos verificado el resultado cuando se pasa o como se esperaba. Ahora vamos a ver en el resultado fallido también.

Paso 1) Abrir y cambiar esperado para dar como resultado spec.js a “‘Hola cambio GURU99” como a continuación.

Después del cambio en spec.js:

Paso 2) Guarde el archivo spec.js y repita los pasos anteriores de la sección “Ejecución del código”

Ahora, ejecute los pasos anteriores.

Resultado:

Podemos ver el resultado como fallido indicado con ‘F’ en la captura de pantalla con el motivo como “EsperadoHola GURU99! ‘ a igual a ‘Hello change GURU99! ‘. Además, muestra cuántos errores se encuentran al ejecutar código.

¿Podemos lograr lo mismo con el controlador web Selenium?

A veces podemos identificar los elementos web de las aplicaciones AngularJS usando XPath o selector CSS del controlador web Selenium. Pero en las aplicaciones AngularJS, los elementos se generarán y cambiarán dinámicamente. Entonces, Transportador es la mejor práctica para trabajar con aplicaciones AngularJS.

Generar informes con Jasmine Reporteros

Transportador apoya a los reporteros de Jasmine para generar informes de prueba. En esta sección, utilizaremos JUNITXMLReporter para generar informes de ejecución de prueba automáticamente en formato XML.

Siga los pasos siguientes para generar informes en formato XML.

Instalación de Jasmine Reporter

Hay dos formas de hacerlo, local o globalmente

1. Abrir símbolo del sistema ejecute el siguiente comando para instalar localmente

Por encima del comando instalará jazmín informes node-modules localmente significa desde el directorio donde estamos ejecutando el comando en el símbolo del sistema.

2. Abrir símbolo del sistema ejecute el siguiente comando para la instalación global

En este tutorial, vamos a instalar los periodistas jazmín localmente.

Paso 1) Ejecute el comando.

desde el símbolo del sistema como a continuación.

Paso 2) Compruebe las carpetas de instalación en el directorio. “Node_modules” debe estar disponible si se instala correctamente como en la instantánea de abajo.

Paso 3) Agregue el siguiente código de color a un archivo conf.js existente

Explicación del código:

En código, estamos generando el informe “JUNITXMLReporter” y dando la ruta donde almacenar el informe.

Paso 4) Abra el símbolo del sistema y ejecute comando protractor conf.js.

Paso 5) Cuando se ejecuta el código anterior, junitresults.xml se generará en la ruta mencionada.

Paso 6) Abra el XML y verifique el resultado. El mensaje de error se muestra en el archivo de resultados ya que nuestro caso de prueba ha fallado. Error en el caso de prueba porque el resultado esperado de “spec.js” no coincide con el resultado real de una página Web

Paso 7) Utilice el archivo junitresult.xml para pruebas o archivos de resultados.

Resumen:

Aunque Selenium puede hacer algunas de las cosas que hace el transportador, el transportador es el estándar industrial y la mejor práctica para probar aplicaciones AngularJS. Un transportador también puede administrar múltiples capacidades en él y manejar los cambios dinámicos de elementos web usando ng-model, ng-click.., etc. (Lo que el selenio no puede hacer).

Este artículo es aportado por Ranjith Kumar Enishetti

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *