ProtracTutorial de pruebas de Tor: Marco de herramientas de automatización

⚠️ Aviso de descontinuación: Protractor es obsoleto y archivadoEl soporte finalizó en agosto de 2023 y Angular CLI dejó de ofrecer soporte para Pro.tracconstructor de Tor después de Angular 15. Seleccionar Dramaturgo, Cypress, WebdriverIO o TestCafe para nuevos pruebas de extremo a extremoEl tutorial que se muestra a continuación se aplica a las suites antiguas.

¿Por qué necesitamos Pro?trac¿Framework Tor?

JavaEl script 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 evaluadores probar la aplicación web en diversos escenarios.

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

ProtracTor es un programa Node.js 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 acciones del usuario.

¿Qué es exactamente una aplicación AngularJS?

AngularJS Las aplicaciones web utilizan una sintaxis HTML extendida para expresar sus componentes. Se emplean principalmente en aplicaciones web dinámicas. Estas aplicaciones utilizan menos código y son más flexibles que las aplicaciones web convencionales. Cabe destacar que AngularJS 1.x dejó de recibir soporte a largo plazo el 31 de diciembre de 2021, por lo que este tipo de aplicaciones se consideran obsoletas hoy en día.

¿Por qué no podemos encontrar elementos web de AngularJS usando Normal? Selenium ¿Conductor web?

Las aplicaciones AngularJS 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, Protractorre en la cima de Selenium Puede gestionar y controlar esos atributos en las aplicaciones web.

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

Antes de comenzar ProtracPara Tor, necesitamos instalar lo siguiente:

1. Selenium: puedes encontrar el Selenium pasos de instalación en el Selenium Guía de instalación de WebDriver.
2. NPM (Node.js): Necesitamos instalar Node.js para instalar Protractor. Puedes encontrar estos pasos de instalación en el Guía de descarga e instalación de Node.js.

ProtracInstalación de tor

Paso 1) Abra el símbolo del sistema y escriba “npm install -g protraccolina" y presiona Enter.

El comando anterior descargará los archivos necesarios e instalará Pro.tracTor en el sistema del cliente, como se muestra a continuación.

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

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

Paso 3) Actualiza el administrador de WebDriver. El administrador de WebDriver se utiliza para ejecutar las pruebas en la aplicación web Angular en un navegador específico. Después de ProtracSi Tor está instalado, es necesario actualizar el administrador de WebDriver a la última versión. Esto se puede hacer ejecutando el siguiente comando en la línea de comandos.

webdriver-manager update

Los archivos binarios del controlador se descargan como se muestra a continuación.

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

Una vez que se ejecuta una prueba, WebDriver la carga automáticamente en el navegador correspondiente. Inicie el administrador con el siguiente comando.

webdriver-manager start

La consola informa la dirección de escucha.

Ahora, si vas a lo siguiente URL (http://localhost:4444/wd/hub/static/resource/hub.html) en su navegador, verá que el administrador de WebDriver se ejecuta en segundo plano.

Pruebas de ejemplo de aplicaciones AngularJS usando Protractor

Con el gestor de conductores en funcionamiento, ProtracTor necesita dos archivos para ejecutarse, un especulación archivo y configuración .

1. Archivo de configuración: Este archivo ayuda a protractor a donde se encuentran los archivos de prueba (specs.js) y para comunicarse con Selenium servidor (Selenium Dirección). Chrome es el navegador predeterminado para Protraccolina.
2. Archivo de especificaciones: Este archivo contiene la lógica y los localizadores para interactuar con la aplicación..

Paso 1) Tenemos que abrir https://angularjs.org e ingrese el texto como “GURU99” en el cuadro de texto “Ingrese un nombre aquí”.

Paso 2) En este paso,

1. Ingresó el nombre “Guru99 "
2. En el texto de salida "Hola" GuruSe observa 99″.

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..

Code:

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!');
  });
});

Code Explicación de spec.js:

1. describir('Ingrese el nombre de GURU99', función()La sintaxis de descripción proviene de la Marco de trabajo JasmineAquí, “describe” ('Ingrese el nombre de GURU99') normalmente define los componentes de una aplicación, que pueden ser una clase o una función, etc. En el conjunto de código 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 El navegador WebDriver browser.get abrirá una nueva instancia del navegador con el contenido mencionado. URL.
4. (por.modelo('tuNombre')).enviarTeclas('GURU99') Aquí estamos encontrando el elemento web usando el nombre del modelo como “yourName”, que es el valor de “modelo ng” en la página web. Vea la captura de pantalla a continuación.

5. 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ú”.
6. 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']
};

Code Explicación de conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'El archivo de configuración le indica a Protracpara la ubicación de Selenium Dirección para hablar Selenium Controlador web.
2. especificaciones: ['spec.js']Esta línea le dice a Protracpara la ubicación de los archivos de prueba spec.js

Ejecución de la Code

Primero, navegue hasta la carpeta donde se encuentran conf.js y spec.js, luego siga los pasos a continuación..

Paso 1) Abra el símbolo del sistema.

Paso 2) Asegúrese Selenium El administrador de WebDriver está en funcionamiento. Para ello, introduzca el comando “webdriver-manager start” y pulse Intro..

(Si Selenium WebDriver no está en funcionamiento, no podemos continuar con una prueba como ProtracTor no puede encontrar el WebDriver para gestionar la aplicación web.

Paso 3) Abra un nuevo símbolo del sistema y proporcione el comando como "portractor conf.js” para ejecutar el archivo de configuración. La ejecución finaliza como se muestra a continuación.

Explicación:

• Aquí ProtracTor ejecutará el archivo de configuración que contiene el archivo de especificaciones proporcionado.
• 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..

Se ha verificado un resultado satisfactorio. A continuación, veamos un resultado no satisfactorio.

Paso 1) Se espera que al abrir y cambiar el resultado sea spec.js a “'Hola cambio 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 “Ejecución del Code" sección

Ahora, ejecute los pasos anteriores.

Resultado:

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ántos fallos se producen al ejecutar el código.

¿Podemos lograr lo mismo con Selenium ¿Conductor web?

A veces, los elementos de AngularJS se pueden localizar con XPath o selectores CSS. Selenium WebDriver. Sin embargo, esos elementos se generan y se reenlazan dinámicamente, por lo que ProtracTor era la opción más segura para las suites de AngularJS.

Genere informes utilizando Jasmine Reporters

ProtracTor admite reporteros Jasmine. Esta sección utiliza JUnitXmlReporter permite generar automáticamente informes de ejecución de pruebas en formato XML, siguiendo los pasos que se indican a continuación.

Instalación de Jasmine Reporter

Hay dos opciones: local o global.

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

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

El comando anterior instala jasmine-reporters localmente, dentro del directorio donde se ejecuta.

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

npm install –g jasmine-reporters@^2.0.0

Aquí, los reporteros están instalados 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 “JUnitReportero XML”Y dando a la Ruta dónde almacenar el informe.

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

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

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 ha fallado. El caso de prueba falló 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 evidencias o archivos de resultados.

ProtracTor frente a alternativas modernas de automatización de pruebas

Desde ProtracTor ya no recibe actualizaciones, los equipos que planean nuevas suites necesitan saber cómo se compara con los frameworks a los que ahora migran los proyectos de Angular. La siguiente tabla compara Protractor con las tres alternativas que aparecen con más frecuencia en las preguntas frecuentes a continuación.

Equipos con un Pro existentetracLa suite de Tor generalmente se mueve más rápido a WebdriverIO, ya que su estilo de mando y Selenium-la gestión de conductores basada en se mantiene cerca de lo que ProtracLos probadores de Tor ya lo saben. Los equipos que empiezan desde cero o que necesitan las pruebas más rápidas, suelen elegir Cypress o dramaturgo en su lugar.

Preguntas Frecuentes