Tutorial de prueba de transportador: marco de herramientas de automatización

¿Qué es la prueba de transportador?

Transportador es una herramienta de pruebas de automatización y de extremo a extremo basada en el comportamiento que desempeña un papel importante en la Pruebas de aplicaciones AngularJS y trabaja como integrador de soluciones combinando potentes tecnologías como Selenium, Jasmine, controlador web, etc. El propósito de Protractor Testing no es solo probar aplicaciones AngularJS sino también escribir pruebas de regresión automatizadas para aplicaciones web normales.

¿Por qué necesitamos un marco transportador?

JavaScript se utiliza en casi todas las aplicaciones web. A medida que las aplicaciones crecen, JavaScript también aumenta de tamaño y complexidad. En tal caso, a los probadores les resulta difícil probar la aplicación web en varios escenarios.

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

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

Bien, bien, ahora analicemos qué es exactamente una aplicación AngularJS.

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

¿Por qué no podemos encontrar elementos web Angular JS usando Normal? Selenium ¿Conductor web?

Las aplicaciones Angular JS tienen algunos atributos HTML adicionales como ng-repeater, ng-controller, ng-model..., etc., que no están incluidos en Selenium localizadores Selenium no es capaz de identificar esos elementos web utilizando Selenium código. Entonces, el transportador en la parte superior de Selenium puede manejar y controlar esos atributos en aplicaciones web.

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

Antes de iniciar Protractor, necesitamos instalar el siguientewing:

  1. SeleniumUsted puede encontrar el Selenium Pasos de instalación a continuación.wing Enlaces, (https://www.guru99.com/installing-selenium-webdriver.html )
  2. Instalación de NPM (Node.js) NodeJS, necesitamos instalar NodeJS para instalar Protractor. Puede encontrar estos pasos de instalación a continuación.wing Enlace. ( https://www.guru99.com/download-install-node-js.html )

Instalación del transportador

Paso 1) Abra el símbolo del sistema y escriba “instalación npm –g transportador” y presiona Enter.

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

Instalación del transportador

Paso 2) Verifique la instalación y la versión usando "Transportador –versión." Si tiene éxito, mostrará la versión como se muestra en la siguiente captura de pantalla. En caso contrario, realice el paso 1 nuevamente.

Instalación del transportador

(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 en la aplicación web angular en un navegador específico. Una vez instalado Protractor, es necesario actualizar el administrador de controladores web a la última versión. Esto se puede hacer ejecutando el siguientewing comando en el símbolo del sistema.

webdriver-manager update

Instalación del transportador

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

Una vez que se utiliza Protractor 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, haga lo siguientewing El comando debe ejecutarse desde el símbolo del sistema.

webdriver-manager start

Instalación del transportador

Ahora, si vas al siguientewing dirección URL (http://localhost:4444/wd/hub/static/resource/hub.html) en su navegador, verá el administrador de controladores web ejecutándose en segundo plano.

Instalación del transportador

Ejemplo de prueba de aplicación AngularJS usando Protractor

Transportador necesita dos archivos para ejecutarse, un especulación archivo y configuración archivo.

  1. Archivo de configuración: Este archivo ayuda al transportador hasta donde se colocan los archivos de prueba (specs.js) y a hablar con Selenium servidor (Selenium DIRECCIÓN). Chrome es el navegador predeterminado para Transportador.
  1. 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 ingrese el texto como “GURU99” en el texto “Ingrese un nombre aquí”box.

Ejemplo de prueba de aplicación AngularJS usando Protractor

Paso 2) En este paso,

  1. Ingresó el nombre “Guru99”
  2. En el texto de salida se ve "Hola Guru99".

Ejemplo de prueba de aplicación AngularJS usando Protractor

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

Código:

Tenemos que preparar el archivo de configuración. (conf.js) y archivo de especificaciones (spec.js) como se ha mencionado más arriba.

Lógica de spec.js:

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

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

  1. describir('Ingrese el nombre de GURU99', función()La sintaxis de descripción proviene del marco Jasmine. Aquí "describir" ('Ingrese el nombre de GURU99') generalmente define los componentes de una aplicación, que puede ser una clase o función, etc. En el conjunto de códigos llamado “Ingrese GURU99”, es solo una cadena y no un código.
  2. it('debería agregar un Nombre como GURU99', función()
  3. navegador.get('https://angularjs.org') Como en Selenium Webdriver browser.get abrirá una nueva instancia del navegador con la URL mencionada.
  4. elementos(por.modelo('tuNombre')).enviarTeclas("GURU99") Aquí encontramos el elemento web que utiliza el nombre del modelo como "yourName", que es el valor de "ng-model" en la página web. Consulte la captura de pantalla a continuación.

Ejemplo de prueba de aplicación AngularJS usando Protractor

  1. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Aquí encontramos el elemento web usando XPath y almacenar su valor en una variable “gurú”.
  2. esperar(gurú.getText()).A igual("¡Hola GURU99!") Finalmente estamos verificando el texto que obtuvimos de la página web (usando gettext()) con el texto esperado.

Lógica de conf.js:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

Explicación del código de conf.js

  1. seleniumDirección: 'http://localhost:4444/wd/hub'El archivo de configuración le dice a Protractor la ubicación de Selenium Dirección para hablar Selenium Controlador web.
  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 se encuentran confi.js y spec.js en nuestro sistema..

Sigue el siguientewing paso.

Paso 1) Abra el símbolo del sistema.

Paso 2) Asegúrese selenium El administrador de controladores web está en funcionamiento. Para eso, proporcione el comando "iniciar webdriver-manager" y presione Enter.

Ejecución de la aplicación AngularJS.

(Si selenium El controlador web no está en funcionamiento, no podemos continuar con la prueba porque el transportador no puede encontrar el controlador web para manejar la aplicación web).

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

Ejecución de la aplicación AngularJS.

Explicación:

  • Aquí Protractor ejecutará el archivo de configuración con el archivo de especificaciones dado.
  • Podemos ver el selenium servidor ejecutándose en “http://localhost:4444/wd/hub”que hemos proporcionado en el archivo conf.js.
  • Además, aquí puede ver el resultado, cuántos se aprobaron y los fallos, como en la captura de pantalla anterior..

Bien, hemos verificado el resultado cuando se aprueba o como se esperaba. Ahora analicemos también el resultado fallido.

Paso 1) Abra y cambie lo que se espera que dé como resultado spec.js a "'Hola, cambie GURU99" como se muestra a continuación.

Después del cambio en spec.js :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

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:

Ejecución de la aplicación AngularJS.

Podemos ver el resultado como fallido indicado con 'F' en la captura de pantalla con el motivo como “Se esperaba que '¡Hola GURU99!' fuera igual a '¡Hola, cambio GURU99!'. Además, muestra cuántas fallas se encuentran al ejecutar el código.

¿Podemos lograr lo mismo con Selenium controlador web?

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

Genere informes utilizando Jasmine Reporters

Protractor ayuda a los reporteros de Jasmine a generar informes de prueba. En esta sección usaremos JunitXMLReporter para generar informes de ejecución de pruebas automáticamente en formato XML.

Siga los pasos a continuación para generar informes en formato XML.

Instalación de Jasmine Reporter

Hay dos formas de hacer esto, local o globalmente.

  1. Abra el símbolo del sistema y ejecute lo siguientewing comando para instalar localmente
npm install --save-dev jasmine-reporters@^2.0.0

El comando anterior instalará los módulos de nodo de Jasmine Reports localmente, es decir, desde el directorio donde ejecutamos el comando en el símbolo del sistema.

  1. Abra el símbolo del sistema y ejecute lo siguientewing comando para instalación global
npm install –g jasmine-reporters@^2.0.0

En este tutorial, instalaremos jasmine reporters localmente..

Paso 1) Ejecute el comando.

npm install --save-dev jasmine-reporters@^2.0.0

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

Instalación de Jasmine Reporter

Paso 2) Verifique las carpetas de instalación en el directorio.. "Node_modules" debería estar disponible si se instala correctamente como en la siguiente instantánea.

Instalación de Jasmine Reporter

Paso 3) Agrega el siguientewing código coloreado a un archivo conf.js existente

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

Explicación del código:

En código estamos generando el informe “JUnitReportero XML”Y dando a la Ruta dónde almacenar el informe.

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

Instalación de Jasmine Reporter

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

Instalación de Jasmine Reporter

Paso 6) Abra el XML y verifique el resultado. El mensaje de error se muestra en el archivo de resultados como nuestro Caso de prueba está fallido. El caso de prueba falla debido a que el resultado esperado de "spec.js" no coincide con el resultado real de una página web

Instalación de Jasmine Reporter

Paso 7) Ingrese al junitArchivo result.xml para evidencias o archivos de resultados.

Resumen

Frente a 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 modelo ng, ng-click.., etc. (¿Qué selenium no puedo hacer).