¿Qué es la prueba de transportador?
PROTRACTOR es una herramienta de prueba basada en el comportamiento de automatización y de extremo a extremo que juega un papel importante en la prueba de aplicaciones AngularJS y funciona como un integrador de soluciones combinando tecnologías poderosas como Selenium, Jasmine, controlador web, etc. El propósito de las pruebas de transportador no es solo para probar aplicaciones AngularJS, sino también para escribir pruebas de regresión automatizadas para aplicaciones web normales.
En este tutorial para principiantes, aprenderá:
- ¿Por qué necesitamos un marco transportador?
- Instalación del transportador
- Prueba de la aplicación AngularJS de muestra usando Protractor
- Ejecución del Código
- Genere informes con Jasmine Reporters
¿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 en tamaño y complejidad. En tal caso, se convierte en una tarea difícil para los probadores probar la aplicación web en varios escenarios.
A veces es difícil capturar los elementos web en aplicaciones AngularJS usando JUnit o Selenium WebDriver.
Protractor 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 usa WebDriver para controlar el navegador con las acciones del usuario.
Ok, bien, ahora discutamos qué es exactamente una aplicación AngularJS.
Las aplicaciones AngularJS son aplicaciones web que utilizan la sintaxis HTML extendida para expresar componentes de aplicaciones web. Se utiliza principalmente para aplicaciones web dinámicas. Estas aplicaciones utilizan un código menos flexible y flexible en comparación con las aplicaciones web normales.
¿Por qué no podemos encontrar elementos web de Angular JS utilizando el controlador web Normal Selenium?
Las aplicaciones de Angular JS tienen algunos atributos HTML adicionales como ng-repetater, ng-controller, ng-model…, etc. que no están incluidos en los localizadores de Selenium. Selenium no puede identificar esos elementos web utilizando el código de Selenium. Entonces, 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 enfocan en realizar pruebas unitarias para aplicaciones Angular JS, Protractor se enfoca en probar la funcionalidad real de una aplicación.
Antes de iniciar Transportador, necesitamos instalar lo siguiente:
- Selenio
Puede encontrar los pasos de instalación de Selenium en los siguientes enlaces (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Instalación de NodeJS, necesitamos instalar NodeJS para instalar Protractor. Puede encontrar estos pasos de instalación en el siguiente enlace. (https://www.guru99.com/download-install-node-js.html)
Instalación del transportador
Paso 1) Abra el símbolo del sistema y escriba "npm install -g transportador" y presione Enter .
El comando anterior descargará los archivos necesarios e instalará Protractor en el sistema cliente.
Paso 2) Verifique la instalación y la versión usando " Transportador --versión ". 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 en la aplicación web angular en un navegador específico. Una vez instalado 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.
webdriver-manager update
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 a través de un transportador.
Una vez que se utiliza Transportador para ejecutar cualquier prueba, el controlador web automáticamente cargará y ejecutará la prueba en el navegador correspondiente. Para iniciar el administrador de controladores web, el siguiente comando debe ejecutarse desde el símbolo del sistema.
webdriver-manager start
Ahora, si va a la siguiente URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) en su navegador, verá el administrador de controladores web ejecutándose en segundo plano.
Prueba de la aplicación AngularJS de muestra usando Protractor
Transportador necesita dos archivos para ejecutarse, un archivo de especificaciones y un archivo de configuración .
- Archivo de configuración : este archivo ayuda a transportarse hasta donde se colocan los archivos de prueba (specs.js) y a hablar con el servidor de Selenium (dirección de Selenium). Chrome es el navegador predeterminado de Transportador.
- 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 en https://angularjs.org e ingresar el texto como "GURU99" en el cuadro de texto "Ingrese un nombre aquí".
Paso 2) En este paso,
- Ingresó el nombre "Guru99"
- En el texto de salida se ve "Hello Guru99".
Paso 3) Ahora tenemos que capturar el texto de la página web después de ingresar el nombre y necesitamos verificar con el texto esperado .
Código:
Tenemos que preparar el archivo de configuración (conf.js) y el archivo de especificaciones (spec.js) como se mencionó anteriormente.
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:
- describe ('Enter GURU99 Name', function ()
La sintaxis de descripción es del marco Jasmine. Aquí "describe" ('Ingrese GURU99 Name') típicamente define 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.
- it ('debería agregar un nombre como GURU99', función ()
- browser.get ('https://angularjs.org')
Como en Selenium Webdriver, browser.get abrirá una nueva instancia de navegador con la URL mencionada.
- elemento (por.modelo ('suNombre')). sendKeys ('GURU99')
Aquí encontramos el elemento web que usa el nombre del modelo como "yourName", que es el valor de "ng-model" en la página web. Verifique la captura de pantalla a continuación-
- 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 almacenamos su valor en una variable "guru" .
- esperar (guru.getText ()). toEqual ('¡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
- seleniumAddress: 'http: // localhost: 4444 / wd / hub'
El archivo de configuración le dice a Protractor la ubicación de Selenium Address para hablar con Selenium WebDriver.
- 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 hasta la carpeta donde se encuentran confi.js y spec.js 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 selenium esté en funcionamiento. Para eso, dé el comando como "webdriver-manager start" y presione Enter .
(Si el controlador web de selenium no está en funcionamiento, no podemos continuar con una prueba ya que 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.
Explicación:
- Aquí Transportador ejecutará el archivo de configuración con el archivo de especificaciones dado en él.
- Podemos ver el servidor de selenium ejecutándose en " http: // localhost: 4444 / wd / hub " que hemos proporcionado en el archivo conf.js.
- Además, aquí puede ver el resultado de cuántos se pasan y fallas como en la captura de pantalla anterior .
Bien, hemos verificado el resultado cuando se aprueba o como se esperaba. Ahora veamos también el resultado fallido.
Paso 1) Abra y cambie el resultado esperado en 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:
Podemos ver el resultado como fallido indicado con 'F' en la captura de pantalla con el motivo como "Esperado '¡Hola GURU99!' para que sea igual a '¡Hola, cambie GURU99!' Además, muestra cuántas fallas se encuentran al ejecutar el código.
¿Podemos lograr lo mismo con el controlador web Selenium?
A veces podemos identificar los elementos web de las aplicaciones AngularJS usando el selector XPath o CSS del controlador web Selenium. 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 con Jasmine Reporters
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 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
- Abra el símbolo del sistema, ejecute el siguiente comando para instalar localmente
npm install --save-dev jasmine-reporters@^2.0.0
El comando anterior instalará los módulos de nodo de los informes de jasmine localmente desde el directorio donde estamos ejecutando el comando en el símbolo del sistema.
- Abra el símbolo del sistema, ejecute el siguiente comando para la instalación global
npm install -g jasmine-reporters@^2.0.0
En este tutorial, instalaremos los reporteros de jasmine 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.
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.
Paso 3) Agregue el siguiente código de color 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 " JUnitXmlReporter " y dando la ruta donde almacenar el informe.
Paso 4) Abra el símbolo del sistema y ejecute el transportador de comandos conf.js.
Paso 5) Cuando ejecute 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. El caso de prueba ha fallado porque el resultado esperado de "spec.js" no coincide con el resultado real de una página web.
Paso 7) Use el archivo junitresult.xml para evidencias 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 las aplicaciones de 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 una contribución de Ranjith Kumar Enishetti
