Cuando aumenta la complejidad y el tamaño de una aplicación, no es práctico confiar en las pruebas manuales de la confiabilidad, la captura de errores y las pruebas de regresión de nuevas características.
Para resolver este problema, establecimos el corredor de escenarios angulares para imitar las operaciones de los usuarios y nos ayudamos a verificar la robustez de las aplicaciones angulares.
1. Resumen
Podemos escribir pruebas de escenario en JavaScript para describir el comportamiento de nuestra aplicación e interactuar con ciertos estados. Un escenario consta de uno o más bloqueos "IT" (podemos tratarlos como requisitos para nuestra aplicación), que se componen a su vez de comandos y expectativas. El comando le dice al corredor que haga algo en la aplicación (como ir a una página o hacer clic en un botón), y la expectativa le dice al corredor que juzgue algo sobre el estado (como el valor de un cierto dominio o la URL actual). Si alguna expectativa falla, el corredor etiqueta esto "es" como "falso" y luego continúa con el siguiente "it". El escenario también puede tener bloqueos "antes de una vez" y "AfterEach" que se ejecutan antes o después de cada bloque "it", independientemente de si pasa o no.
Además de los elementos anteriores, el escenario también puede incluir funciones auxiliares para evitar el código duplicado en el bloque "IT".
Aquí hay un simple ejemplo de escenario:
Describa ('Buzz Client', function () {it ('debería filtrar resultados', function () {input ('user'). Enter ('JackStarrow'); elemento (': botón'). Click (); expects (Repeater ('Ul Li'). Count ()). ToEqual (10); Input ('FilterText'). Enter ('Bees'); Expecter (Repsing (Repeater (Repeater (Repeater ('Ul Li').). });});Este escenario describe los requisitos del cliente de red, y explícitamente, debería tener la capacidad de filtrar a los usuarios. Comienza ingresando un valor en el cuadro de entrada "Usuario", haciendo clic en el único botón en la página, y luego verificando que haya una lista de 10 elementos. Luego, ingresa "abejas" en el cuadro de entrada de "FilterText" y luego verifique que la lista se reduzca a un solo elemento.
El siguiente capítulo de la API enumera el comando y las expectativas disponibles en Runner.
2. API
Código fuente: https://github.com/angular/angular.js/blob/master/src/ngscenario/dsl.js
pausa()
Pausa la ejecución de la prueba hasta que llamemos a reanudar () en la consola (también puede hacer clic en el enlace de currículum en la interfaz de corredor)
dormir (segundos)
PAUSE Ejecución de la prueba para n segundos.
navegador (). Navigateto (URL)
Cargue la URL especificada en la estructura set.
navegador (). Navigateto (URL, FN)
Cargue la URL devuelta por FN en el marco de prueba. El parámetro URL aquí se usa como salida de prueba. Esta API se puede usar cuando la URL de destino es dinámica (la dirección aún se desconoce al escribir pruebas).
navegador (). RELOAD ()
Actualice la página cargada actualmente en el marco de prueba.
navegador (). Window (). Href ()
Regrese a la ventana.location.href de la página actual del marco de prueba.
navegador (). Window (). Path ()
Devuelve la ventana.location.pathname de la página actual del marco de prueba.
navegador (). Window (). Search ()
Regrese a Window.location.Search de la página actual del marco de prueba.
navegador (). Window (). Hash ()
Devuelve Window.location.hash (sin incluir #) de la página actual del marco de prueba.
navegador (). ubicación (). url ()
Devuelva el resultado de $ ubicación.url () de la página actual (http://docs.angularjs.org/api/ng.$location)
navegador (). Ubicación (). Path ()
Devuelva el resultado de $ ubicación.path () de la página actual (http://docs.angularjs.org/api/ng.$location)
navegador (). ubicación (). Search ()
Devuelva el resultado de $ ubicación de la página actual. Search () (http://docs.angularjs.org/api/ng.$location)
navegador (). Ubicación (). Hash ()
Devuelva el resultado de la ubicación $. Hash () de la página actual (http://docs.angularjs.org/api/ng.$location)
Espere (Future). {Matcher}
Determina si el valor futuro dado satisface al emparejador. Todas las declaraciones de API devuelven un objeto futuro con un valor especificado obtenido después de que se ejecutan. El combate se define usando angular.scenario.matcher, y usan el valor de los futuros para ejecutar la expectativa. Por ejemplo:
Espere (navegador () .location () .href ()) .toequal ('http://www.google.com');
Espere (Future) .not (). {Matcher}
Determina si el valor de un futuro dado es lo opuesto a las expectativas esperadas del combate especificado.
usando (selector, etiqueta)
Alcance la siguiente selección de elementos DSL. (Presumiblemente limita el alcance del selector, las estimaciones de la etiqueta se utilizan para la salida de prueba)
ejemplo:
usando ('#foo', "campo de texto 'foo'"). Entrada ('Bar')
Atinguidad (nombre)
Devuelve el primer enlace que coincide con el nombre especificado (tal vez relacionado con NG-unk).
entrada (nombre) .Eenter (valor)
Ingrese el valor especificado en el campo de nombre especificado.
entrada (nombre) .Check ()
Seleccione o desmarque la casilla de verificación del nombre especificado.
entrada (nombre) .select (valor)
Seleccione Entrada [Tipo = "Radio"] con el valor medio de radio del nombre especificado.
entrada (nombre) .val ()
Devuelve el valor actual de la entrada del nombre especificado.
repetidor (selector, etiqueta) .count ()
Devuelve el número de filas del repetidor que coincide con el selector especificado (selector jQuery). La etiqueta se usa solo como salida de prueba.
repetidor ('#tabla de productos', 'lista de productos'). Count () // Número de filas
repetidor (selector, etiqueta) .row (índice)
Devuelve una matriz, vinculando las filas especificadas en el repetidor que coincide con el índice especificado. La etiqueta solo se usa para probar la salida.
repetidor ('#tabla de productos', 'lista de productos'). fila (1) // Todos los enlaces en fila como matriz
repetidor (selector, etiqueta) .Column (encuadernación)
Devuelve una matriz con el valor de la columna en el repetidor que coincide con la unión especificada que coincide con el selector especificado (selector jQuery). La etiqueta solo se usa para probar la salida.
Repetidor ('#Tabla de productos', 'Lista de productos'). Columna ('Product.name') // Todos los valores en todas las filas en una matriz
Seleccionar (nombre) .Option (valor)
Seleccione la opción para especificar el valor en la selección del nombre especificado.
Seleccionar (nombre) .Option (Value1, Value2)
Seleccione la opción (opción múltiple) del valor especificado en la selección del nombre especificado.
elemento (selector, etiqueta) .count ()
Devuelve el número de elementos que coinciden con el selector especificado. La etiqueta se usa solo como salida de prueba.
elemento (selector, etiqueta) .Click ()
Haga clic en el elemento que coincida con el selector especificado. La etiqueta se usa solo como salida de prueba.
elemento (selector, etiqueta) .Query (fn)
Ejecute el FN especificado (seleccionado, realizado), y selectedElement es el conjunto de elementos que coinciden con el selector especificado; y el hecho es una función que se ejecutará después de ejecutar el FN. La etiqueta se usa solo como salida de prueba.
elemento (selector, etiqueta). {método} ()
Devuelve el valor de retorno de ejecutar el método en el elemento que coincide con el selector especificado. El método puede ser los siguientes métodos jQuery: val, texto, html, altura, innerheight, externe, ancho, ancho interno, ancho exterior, posición, scrolllelft, scrolltop, desplazamiento. La etiqueta se usa solo como salida de prueba.
elemento (selector, etiqueta). {método} (valor)
Ejecute el método especificado en el elemento que coincida con el selector especificado y use la clave y el valor como parámetros. El método puede ser los siguientes métodos jQuery: val, texto, html, altura, innerheight, externe, ancho, ancho interno, ancho exterior, posición, scrolllelft, scrolltop, desplazamiento. La etiqueta se usa solo como salida de prueba.
elemento (selector, etiqueta). {método} (clave)
Devuelve el resultado de ejecutar un método especificado en el elemento que coincide con el selector especificado. Estos métodos pueden ser los siguientes métodos jQuery: ATTR, Prop, CSS. La etiqueta se usa solo como salida de prueba.
elemento (selector, etiqueta). {método} (clave, valor)
Ejecute el método en el elemento que coincida con el selector especificado y tome la clave y el valor como parámetros. Estos métodos pueden ser los siguientes métodos jQuery: ATTR, Prop, CSS. La etiqueta se usa solo como salida de prueba.
JavaScript es un lenguaje tipado dinámicamente que trae expresiones poderosas, pero también nos brinda poca ayuda del compilador. Por lo tanto, creemos firmemente que cualquier código escrito en JavaScript requiere muchas pruebas y pruebas integrales. Angular tiene muchas características que nos facilitan probar nuestras aplicaciones. Así que no tenemos excusa para no escribir pruebas. (-_- !!)
Lo anterior es una recopilación de información sobre las pruebas AngularJS E2E. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!