protractor testing tool
¿Qué es transportador?
El transportador es una herramienta de prueba de automatización para pruebas de aplicaciones web; combinando tecnologías poderosas como Jasmine, Selenium Webdriver, Node.js, etc.
La herramienta de prueba Protractor es un marco de prueba basado en el comportamiento de extremo a extremo diseñado teniendo en cuenta las aplicaciones de Angular JS. Aunque pueda parecer que Protractor no funcionará con aplicaciones JS no angulares, lo hace.
Funciona igualmente bien con aplicaciones JS angulares y no angulares.
Siéntete libre de explorar el serie completa de tutoriales de AngularJS . En nuestro tutorial anterior, la diferencia entre versiones angulares fue explicado en detalle.
Lo que vas a aprender:
- Transportador vs Selenium WebDriver
- Características
- ¿Cómo me puede ayudar Transportador?
- ¿Qué marco utilizar?
- Cómo descargar y configurar transportador
- ¿Listo para crear su primer caso de prueba?
- ¿Cómo ejecutar sus casos de prueba?
- Algunas características más interesantes de Transportador
- Conclusión
- Lectura recomendada
Transportador vs Selenium WebDriver
¿Qué hace a Transportador diferente del tradicional? Selenium WebDriver ?
Tómese un minuto para responder estas preguntas:
- ¿Es difícil determinar cuándo exactamente se carga finalmente la página web (todos los elementos asincrónicos están listos y procesados)?
- ¿Estás cansado de agregar esperas y suspensiones a tu código?
- ¿Quiere librarse del engorroso esfuerzo de localizar los elementos angulares?
- ¿Frustrado con la localización de elementos con ID cambiantes?
- ¿Quieres crear tu propio localizador?
- ¿Está escribiendo un código extenso incluso para las afirmaciones más simples?
- ¿Eres un entusiasta / fanático de JavaScript?
Si respondió Sí a estas preguntas, Transportador poder ayudar.
Es un contenedor construido sobre Selenium Webdriver y, por lo tanto, proporciona todas las capacidades de Selenium junto con muchas adiciones útiles. Ofrece:
Características
Ofrece:
1) WaitForAngular
que es un archivo .eps
De la documentación:
“ Indique a WebDriver que espere hasta que Angular haya terminado de renderizarse y no tenga llamadas $ http o $ timeout pendientes antes de continuar. Tenga en cuenta que Transportador aplica automáticamente este comando antes de cada acción de WebDriver. ”
Lo que esto significa es que no es necesario agregar esperas manualmente a su secuencia de comandos y Transportador esperará automáticamente a que se carguen los elementos web y solo entonces ejecutará los siguientes pasos.
2) Tiene la capacidad de exportar una función global. elemento , que toma un localizador y devolverá un ElementFinder. Este ElementFinder tiene un conjunto de métodos de acción, como click (), getText (), sendKeys (), etc. Este es el núcleo de cómo interactuar con el elemento y obtener información de él.
Esta función global ayuda a reducir la sintaxis de localización de elementos. Eche un vistazo a la siguiente declaración para ubicar el elemento tanto en Selenium WebDriver como en Transportador:
Selenium Webdriver :
|_+_|Transportador :
|_+_|La sintaxis parece compacta, ¿no?
3) Algunas nuevas estrategias y funciones de localizador proporcionadas para ayudar a ubicar los elementos angulares son: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate , etc.
¿Cómo me puede ayudar Transportador?
Eche un vistazo a las siguientes características destacadas:
- Sintaxis simple para escribir casos de prueba
- La capacidad de ejecutar varios navegadores a la vez usando Selenium Grid
- Localizadores angulares específicos
- Soporte para el desarrollo impulsado por el comportamiento como Jasmine / Mocha
- No es necesario agregar horas de sueño / espera
- Integración compatible con Jenkins / Browser Stack / Grunt, etc.
- Deshágase de lidiar con el problema de sincronización en los sitios web de Angular JS
- Compatibilidad con varios navegadores (Firefox, Chrome, Safari, Internet Explorer)
- Capacidad para ejecutar los mismos scripts en navegadores móviles también sin la necesidad de cambiar el código
¿Qué marco utilizar?
Admite dos marcos de prueba de desarrollo impulsado por el comportamiento (BDD) desde el primer momento:
- Jazmín: Jazmín es el marco de prueba predeterminado cuando se instala Transportador. Usaremos Jasmine en este artículo.
- Moca: Moca es un marco de prueba de JavaScript que se ejecuta en Node.js. Si desea utilizar Mocha como su marco de prueba, tendrá que configurarlo con su transportador y también deberá usar la interfaz de desarrollo basado en comportamiento y las afirmaciones de Chai con Chai como se prometió (consulte este enlace para más detalles ).
Cómo descargar y configurar transportador
Como es un programa de node.js, necesita instalar node.js para que se ejecute. Node.js se puede descargar desde esta URL seleccionando el sistema operativo: Descarga de Node.js
Con node.js, también obtienes Transportador sobre el nivel del mar paquete, que ahora se puede utilizar para instalar Protractor.
Ahora que node.js está instalado en su máquina, abra el símbolo del sistema (cmd) y presione el siguiente comando para instalarlo globalmente:
|_+_|'-gramo' se utiliza para instalar esta herramienta a nivel mundial. Elimínelo si no desea instalarlo globalmente. Este comando también instala la API de transportador junto con un servidor de selenio predeterminado, lo que significa que no necesariamente tienes que iniciar un servidor independiente.
Ahora, necesitamos instalar el servidor selenium y ChromeDriver. Use el siguiente comando (también viene con Transportador) en cmd:
|_+_|Esto es todo lo que necesitamos para comenzar con la redacción de nuestro primer caso de prueba utilizando este marco. Si lo desea, puede instalar cualquier IDE / editor para escribir su código. Eclipse IDE es el más popular, pero también hay algunos editores más interesantes a considerar. Personalmente, prefiero el editor 'Atom' para mi escritura de código de transportador.
¿Listo para crear su primer caso de prueba?
Necesita 2 archivos para ejecutarse:
- Archivo de configuración
- Archivo de especificaciones.
los Archivo de configuración es el que le dice a Protractor dónde encontrar los archivos de prueba (especificaciones) / qué navegador elegir / qué marco usar (Jasmine / Mocha) / dónde hablar con su navegador Selenium y otras configuraciones. Si alguna configuración no está definida en los archivos de configuración, utilizará los valores predeterminados.
El archivo de especificaciones es en el que escribimos nuestro código de prueba real. Todos nuestros flujos / afirmaciones funcionales de prueba estarán en este archivo específico. Puede haber varios archivos de especificaciones según la cantidad de casos de prueba, pero solo 1 archivo de especificaciones podrá ejecutar todo el conjunto de pruebas de varias especificaciones.
Ejemplo de CASO DE PRUEBA:
Ahora, escribiremos un caso de prueba simple donde navegaremos hasta una URL y buscaremos el título de la página.
Estos son los pasos:
- Cree una nueva carpeta para su suite de pruebas.
- Cree un nuevo archivo con el nombre ' js '. (Cualquier nombre servirá) Todos los archivos de especificaciones / configuración tendrán la extensión' .js '.
- Cree un nuevo archivo con el nombre especificado como ' js ’.
Ahora, estamos listos para comenzar con nuestra codificación. Consulte el siguiente código del archivo 'testCaseNameSpec.js'.
Así es como se ve el archivo de configuración:
|_+_|Ahora, vamos a romper estos 2 archivos y ver cómo funciona.
#1) Spec.js
- Todos los comandos del nivel del navegador serán manejados por ' navegador ’, Un global creado por Protractor.
- Como seguimos el marco de Jasmine, ' describe’ y ' eso 'Son las sintaxis de Jasmine. Describe contendrá todo el flujo de su caso de prueba, mientras que 'eso' puede contener algunos de los pasos / escenarios de prueba, etc. Puede tener varios ' eso 'Bloques en su programa si así lo desea.
- browser.get es una sintaxis simple de Selenium que le dice a Transportador que acceda a una URL específica en el navegador.
- Como el sitio web al que intentamos acceder es un sitio web no angular, configuramos el ignoreSynchronization etiquetar a ' cierto ’Como se muestra en la línea # 4. Si no hace que esta etiqueta sea verdadera, su prueba fallará con el error' Angular no se pudo encontrar en la página '. La razón detrás de esto es que Protractor espera trabajar con sitios web angulares de forma predeterminada, y si estamos usando Protractor para validar el sitio web no angular, debemos decírselo explícitamente a Protractor. Sin embargo, si está trabajando en sitios web angulares, no es necesario utilizar esta declaración ya que Transportador considerará por defecto que la página web es angular.
- 'Esperar' no es más que la afirmación en la que comparamos el título de la página web para igualar algunos datos predefinidos. Discutiremos más afirmaciones en detalle.
#2) conf.js
- Como se discutió anteriormente, el archivo de configuración es el que le dice a Protractor los detalles principales. Como se muestra en el código, el marco es 'Jasmine'.
- Dentro de la sección de capacidades, se establecen las configuraciones del navegador. Puede definir el nombre del navegador como Firefox / Chrome, etc. También puede establecer las instancias máximas de los navegadores para que, al mismo tiempo, pueda ejecutar varios casos de prueba en diferentes ventanas de navegador disponibles.
- En el ' especificaciones ', Le damos la ruta del archivo de especificaciones, es decir, exactamente donde se encuentra el archivo de especificaciones con respecto al archivo de configuración.
- También hay muchas otras características interesantes que puede adjuntar a su archivo de configuración, como informes / función onPrepare / límite de tiempo de espera, etc. Cubriremos algunas de ellas en este tutorial.
¿Cómo ejecutar sus casos de prueba?
Hemos escrito el código y ahora todo lo que necesitamos es un pequeño empujón para que nuestro código se ejecute. Presione el siguiente comando en cmd para ejecutar su programa:
|_+_|Este comando comenzará a ejecutar el servidor de selenium seguido de su secuencia de comandos de prueba. Puede ver los registros en cmd o, si lo desea, los registros también se pueden capturar en un archivo .txt (solo agregar >> textFileName.txt después del comando anterior y los registros se guardarán en el archivo de texto ubicado en el mismo directorio que el archivo de configuración).
Se abrirá una ventana de cromo, donde SoftwareTestingHelp.com el sitio web debe estar abierto. El resultado sería '1 especificación, 0 fallas' cuando ejecute el código. Lo que esto significa es que teníamos 1 bloque 'it', que se ejecutó con 0 fallas.
Ahora, considere el archivo de especificaciones a continuación donde estamos realizando algunas acciones en una página web construida en AngularJS para que pueda ver la versión del transportador de Selenium cuando se trata de probar el sitio web de Angular:
java cómo copiar una matriz|_+_|
También puede usar el mismo conf.js para ejecutar esta especificación. Solo asegúrese de actualizar el nombre del archivo de especificación.
Ahora, en este archivo de especificaciones, estamos jugando con un sitio web angular de JS para que pueda ver exactamente de qué es capaz Transportador.
Si ejecuta este archivo como lo hicimos anteriormente, se abrirá una página web con 2 cuadros de texto, un menú desplegable, un botón y algunos otros elementos web. Como ya habrás adivinado, es una página de calculadora. Damos 2 enteros como entrada y realizamos una operación de multiplicación.
Como ya comentamos, una de las mayores ventajas de utilizar esta herramienta son sus técnicas únicas para localizar los elementos angulares. 'Por.modelo' es una de esas formas de localizar elementos. '.SendKeys ()' es la sintaxis habitual de Selenium para enviar valores en cuadros de texto y '.hacer clic()' se utiliza para hacer clic en los botones.
Como se discutió anteriormente, 'suponer' es una afirmación, que le pide a Transportador que capture el resultado de la multiplicación de números y lo compare con '10' y '25' secuencialmente. Simple Mathematics nos dice que la salida debe ser '25' y, por lo tanto, la primera afirmación falla y la segunda pasa.
Como resultado, obtendrá ' 1 especificación, 1 falla 'En los registros cuando ejecuta el código, que es lo esperado.
Algunas características más interesantes de Transportador
# 1) Afirmaciones y anotaciones
Las afirmaciones son una parte importante de los scripts de automatización. Las anotaciones también son muy útiles para etiquetar de manera efectiva ciertos métodos en una clase para que tengan un significado especial.
Proporciona una variedad de afirmaciones y anotaciones y, además de eso, también proporciona la capacidad de crear sus propias afirmaciones.
Considere el siguiente ejemplo:
|_+_|En el ejemplo anterior, estamos usando 2 anotaciones, 'BeforeEach' y 'después de cada' . Estas anotaciones también están disponibles en TestNG (Selenium tradicional). Estas anotaciones aseguran que un fragmento de código en particular se ejecutará antes / después, respectivamente, de la ejecución del código restante.
Entonces, así es como se llevará a cabo la ejecución del código,
- El transportador alcanzará el interior del ' antes de cada 'Bloquear primero y llegará a' http://juliemr.github.io/protractor-demo/ 'URL en el navegador.
- Ahora, el flujo se moverá al bloque 'it' y a la función ' multiplyNumbers ' será llamado que, a su vez, realizará las acciones especificadas en él enviando el control de regreso a donde se llamó la función.
- Por fin, la afirmación hará su trabajo. Ahora, si queremos abordar varios elementos al mismo tiempo, puede utilizar 'element.all', una función de esta herramienta. Identificará todos los elementos disponibles con el localizador especificado (por repetidor en este caso). Depende de usted lo que desee hacer con los elementos identificados. En este caso, estamos comparando el historial de cálculo con un número dado.
- Dado que, en la primera afirmación, estamos comparando el recuento del historial de cálculo con '2' aunque realizamos el cálculo solo una vez, la afirmación fallará. Sin embargo, la segunda afirmación pasará, ya que después del segundo cálculo, el recuento del historial sería '2'.
Hay muchos más tipos de afirmaciones disponibles. Algunos de los cuales se dan a continuación:
a) Obtener texto de un elemento web y compararlo con un valor determinado:
|_+_|b) Verifique si un elemento web se muestra en la página o no:
|_+_|# 2) Manejo de múltiples navegadores / ventanas / pestañas
Puede haber varios casos cuando se trata de manejar el navegador. Algunos de estos casos se destacan a continuación:
a) Se abre una nueva pestaña al hacer clic en cualquier enlace
A veces, cuando hace clic en cualquier enlace, se abre una nueva pestaña y el resto de las acciones deben realizarse en la ventana recién abierta. En este caso, cuando escribe el código hasta el punto en que se abre una nueva pestaña, debe implementar Window Handler de la siguiente manera:
|_+_|Primero obtenga un recuento de todas las ventanas disponibles y luego use la indexación para cambiar el control entre las ventanas. La ventana original que inició la nueva ventana tendrá índice 0, mientras que las ventanas posteriores tendrán índices crecientes.
b) Abrir un navegador completamente nuevo con una nueva sesión
Cuando necesite realizar algunas acciones en un navegador y necesite realizar más acciones en una sesión diferente del navegador, debemos usar el forkNewDriverInstance . En este caso, creamos una nueva instancia de navegador con un nombre de navegador nuevo de la siguiente manera:
|_+_|c) Ejecutar su caso de prueba en varios navegadores:
Ejecutar su caso de prueba en 2 navegadores a la vez es algo que el archivo de configuración puede hacer por usted. Simplemente agregue el siguiente código en su archivo de configuración:
Tan pronto como ejecute este archivo de configuración, verá pruebas ejecutándose en Firefox y Chrome simultáneamente y los registros de ejecución se mostrarán en el símbolo del sistema por separado.
|_+_|# 3) Utilice Page Objects para mejorar aún más su marco
Esta herramienta es buena por sí sola, pero se vuelve invencible cuando se combina con Page Object Model (POM). La mayoría de sus deficiencias (si las hay) se superan con el modelo de objetos de página. Además, POM también ayuda a mantener su proyecto de una manera más estructurada.
Si no sabe qué es POM, no se preocupe. POM es una forma de segregar su caso de prueba en función de las páginas.
Toma este ejemplo:
Hay un sitio web de compras. Su caso de prueba es seleccionar un producto, agregarlo al carrito y luego comprarlo.
Ahora, hay dos formas de administrar su código de secuencia de comandos de prueba para esto:
- Escriba un caso de prueba sencillo con todos los localizadores en la misma página en la que está escrita su lógica,
- Escriba todo su flujo de caso de prueba, su lógica en su archivo de especificaciones y separe sus localizadores y datos de prueba en diferentes archivos. Cada página web tendrá un archivo de página .js equivalente. De esta manera, su código estará estructurado y si hay algún otro caso de prueba que requiera el mismo localizador, no es necesario que vuelva a escribir estos localizadores, solo importe este archivo localizador y utilícelo según sus necesidades.
Mantener sus casos de prueba puede ser un verdadero dolor de cabeza. Si usa POM, su código estará de una manera mucho más estructurada.
c ++ en comparación con java
A continuación, se muestra un ejemplo del uso del modelo de objetos de página:
Este es el flujo en la instantánea anterior:
- Hay un caso de prueba que compra Laptop. El código para el flujo y la lógica estará en purchaseLaptopSpec.js.
- Todas las páginas que se encuentren para comprar el portátil tendrán 1 archivo '.js' con un título adecuado. Todos los elementos necesarios para ser utilizados para la compra de la Laptop, sus localizadores estarán dentro del archivo de página respectivo.
- Los datos necesarios para este caso de prueba se pueden guardar en la carpeta TestData en formato '.json' o en formato excel.
- Una vez que haya terminado con las páginas y los localizadores, simplemente importe estos archivos en su archivo de especificaciones para usar los datos del localizador / prueba y estará listo con su caso de prueba.
# 4) Informes
NPM (Node Package Manager) proporciona varios paquetes de informes, con los que se puede capturar una captura de pantalla de cada paso de prueba y también, una vez que se completa la ejecución de la prueba, generará un informe HTML para usted. Todo lo que tiene que hacer es instalar esos paquetes abriendo un símbolo del sistema y presionando los siguientes comandos:
|_+_| |_+_|Una vez que estos paquetes estén instalados, cada vez que ejecute su archivo de configuración, se guardarán todas las capturas de pantalla de sus casos de prueba y también se generará un informe HTML que mostrará el resultado de aprobado / reprobado del caso de prueba.
# 5) Integre con otras herramientas poderosas como Git / Jenkins / Browserstack / Grunt
Hay varias herramientas disponibles en el mercado para ayudar a mejorar aún más sus casos de prueba. Git / Jenkins / BrowserStack / Grunt son algunas de estas herramientas que agregan un valor significativo a sus scripts de prueba normales de transportador. Y la mejor parte es que no tiene que tocar su archivo de especificaciones para integrar su transportador con ninguna de estas herramientas. Es su archivo de configuración, que tomará todas estas cosas por usted.
Vamos es una herramienta de control de versiones muy poderosa. Siempre es una buena práctica mantener su código en Git si hay varios desarrolladores involucrados.
Jenkins es una herramienta de integración continua con la que puede programar sus casos de prueba y ejecutarlos según sus necesidades. Los scripts de transportador también se pueden configurar con Jenkins. El mejor uso de ejecutar sus casos de prueba en Jenkins es que es muy rápido y también puede ejecutar varios casos de prueba a la vez.
BrowserStack es una herramienta de prueba entre navegadores que también se puede utilizar para probar sus aplicaciones en diferentes navegadores. También se puede integrar con Transportador agregando las credenciales de browserStack en su archivo de configuración.
Suelo es un ejecutor de tareas de JavaScript. Le proporciona la capacidad de realizar varias tareas por usted. Su asombro es que hay más de 4000 tareas y puede crear aún más tareas según sus requisitos. A continuación se presentan algunas de las tareas de uso diario importantes para las que podemos usar Grunt:
- Enumere todas las mejores prácticas de codificación e informe de inmediato siempre que viole alguna de estas.
- Para crear varios archivos de especificaciones en tiempo de ejecución. Por ejemplo , si hay algún caso de prueba que desee ejecutar varias veces (desde 1 hasta cualquier número). Esto puede parecer innecesario en este momento, pero piense en ejecutar cualquier flujo de pago del sitio web de compras para que se ejecute en todos los países disponibles. Sería tedioso crear varias especificaciones manualmente. Entonces, deja que Grunt haga esto por ti.
- La función de reloj. Escribes un caso de prueba y cada vez que guardas tu código después de realizar algún cambio en él, quieres que se ejecute tu caso de prueba, Grunt lo tiene.
- Concatenar varios archivos.
Pruébalo y te encantará.
Conclusión
Puedes hacer que el selenio funcione como un transportador, pero ¿por qué reinventar la rueda? Si Google se ha esforzado tanto para que Transportador funcione como un encanto, utilícelo al máximo. Al menos para los sitios web de AngularJS, le hará la vida mucho más fácil.
Además, este artículo no trata solo sobre Transportador. Existe un gran mundo de transportador y hay cientos de paquetes disponibles en el mercado ofrecidos por NPM para agregar más funciones a su prueba además de escenarios de prueba simples. Siéntase libre de usar estos paquetes y hacerlo aún mejor.
Sobre el Autor: Esta es una publicación invitada de Deshansh. Trabaja como ingeniero de desarrollo de software en pruebas con una de las principales empresas multinacionales. Tiene una amplia experiencia trabajando en pruebas de automatización de selenio y transportador.
Nuestro próximo tutorial lo ayudará a borrar cualquier entrevista de AngularJS con éxito.
PREV Tutorial | SIGUIENTE Tutorial
Lectura recomendada
- Mejores herramientas de prueba de software 2021 (Herramientas de automatización de pruebas de control de calidad)
- Descarga del libro electrónico Testing Primer
- Pruebas de automatización con la herramienta Pepino y selenio - Tutorial de selenio n. ° 30
- Instalación de aplicaciones y preparación para las pruebas de Appium
- Pruebas de carga con LoadUI: una herramienta de prueba de carga gratuita y de código abierto
- Integración de selenio con JMeter
- Pruebas de carga con los tutoriales de HP LoadRunner
- Tutorial de la herramienta de prueba de accesibilidad WAVE