En el artículo anterior, hablé sobre las pruebas unitarias de Ng. Hoy hablaré sobre las pruebas E2E (de extremo a extremo).
Cuando probamos un solo punto funcional de cierto módulo, las pruebas unitarias son más adecuadas. Sin embargo, cuando se produce un error cuando un usuario interactúa con varias páginas, las pruebas unitarias no funcionarán. En este momento, E2E debe usarse para simular las operaciones del usuario y restaurar el sitio del problema. Por supuesto, el uso de la prueba E2E también puede probar la robustez del programa. Muchas cosas que las pruebas unitarias no se pueden hacer mediante pruebas E2E.
Anteriormente, Ng usó el corredor de escenarios angulares para ejecutar pruebas E2E, y ahora ha sido reemplazado por el protractor para ejecutar E2E.
Transportador
El protractor es un marco utilizado en AngularJS para probar E2E. En sí mismo es un módulo NPM y se basa en WebDriverjs. El protractor realmente puede permitir que sus casos de prueba se ejecuten en el navegador y simulen completamente el comportamiento real de los usuarios.
Estas son algunas de sus direcciones de recursos:
1. API de prueba proporcionado por el protractor
2. Ejemplo de uso simple de protractor
3. Guía de WebDriverJS, este es el núcleo de la dependencia del protactor, el módulo NPM se llama selenium-webdriver
Principio de operación del protractor
El protractor depende de las siguientes cosas para ejecutar pruebas E2E:
1. Las API WebDriver, que son los webdriverjs mencionados anteriormente, son API JS relacionadas proporcionadas por Selenium a las pruebas frontales.
2. Selenium Server, un paquete de frasco de backend, se utiliza para comunicarse con el controlador del navegador
3. Los controladores del navegador WebDriver se utilizan para mostrar contenido real del sitio web y comunicarse con Selenium Server. Este es el lugar para transmitir operaciones reales del navegador.
Todo el proceso de operación es el siguiente
Si desea saber más sobre las interacciones anteriores de estos componentes, haga clic aquí
Use el proyecto de semillas NG para explicar E2E
Utilizamos el proyecto de semillas proporcionado por NG para explicar un ejemplo real de E2E. Primero, use el siguiente comando para obtener el proyecto de semillas
La copia del código es la siguiente:
Git clon https://github.com/angular/angular-seed.git
Luego corre
La copia del código es la siguiente:
instalación de NPM
Instalar todas las dependencias relacionadas con
Aquí primero hablaremos sobre el archivo de configuración requerido para ejecutar la prueba E2E. Puede ver que el archivo Test/Protractor-Conf.js se usa para configurar funciones relacionadas. Centrémonos en varios atributos
1.pecs representa la ruta del archivo de prueba que se ejecutará, y la escrita aquí es E2E/*. JS
2.Baseurl representa la dirección raíz del salto de la página entre los navegadores en el archivo de prueba
3. Las capacidades representan qué navegador usar para ejecutar casos de prueba, como usar Chrome, puede configurarlo así
La copia del código es la siguiente:
Capacidades: {
'BrowserName': 'Chrome'
}
Marco representa qué marco de prueba usar, aquí está Jasmine
Si desea saber más sobre este archivo de configuración, haga clic aquí para verlo.
Después de hablar sobre el archivo de configuración, echemos un vistazo a la forma de escribir casos de prueba y publicar un ejemplo en el sitio web oficial primero.
La copia del código es la siguiente:
'Use estricto';
/ * https://github.com/angular/potractor/blob/master/docs/getting-started.md */
Describa ('mi aplicación', function () {
navegador.get ('index.html');
('debería redirigir automáticamente a /ver1 cuando la ubicación hash /fragment está vacía', function () {
Espere (browser.getLocationAbSurl ()). Tomatch ("/View1");
});
describir ('ver1', function () {
antes que la función (function () {
browser.get ('index.html#/ver1');
});
it ('debería renderizar View1 cuando el usuario navega a /ver1', function () {
Espere (elemento
tomatch (/parcial para la vista 1/);
});
});
describir ('ver2', function () {
antes que la función (function () {
navegador.get ('index.html#/ver2');
});
it ('debería renderizar View2 cuando el usuario navega a /ver2', function () {
Espere (elemento
tomatch (/parcial para la vista 2/);
});
});
});
En primer lugar, la sintaxis anterior es el método de escritura admitido por el marco de Jasmine. Si no comprende su uso, puede hacer clic aquí
Aquí solo hablaremos sobre algunos métodos y propiedades comunes proporcionadas por el protractor en el ejemplo anterior
1.Browser, un objeto global, representa una instancia del navegador actual. El método GET comúnmente utilizado se utiliza para implementar el cambio de dirección del navegador.
2. Element, Global Object, proporciona funciones como jQuery que son responsables de encontrar elementos de documentos, y a menudo se usan en uso conjunto por objetos.
3. Por el objeto global, proporciona un tipo selector, por ejemplo, puede encontrar un elemento a través de CSS, modelo, enlace y otras características.
Para obtener el método de elemento y por, consulte la documentación de la API del protractor anterior
Habiendo dicho tanto, es hora de ejecutar los casos de prueba anteriores, el comando es relativamente simple
La copia del código es la siguiente:
NPM Run Update-WebDriver
Esto es responsable de descargar los controladores de navegador relevantes y los paquetes JAR locales de Selenium-servidor. En general, esto fallará porque ambos recursos están en el servidor de Google, por lo que puede usar el navegador para navegar por la pared para descargarlo por separado. La dirección es la siguiente:
1. Dirección del controlador de Chrome, generalmente descargue el archivo ChromedRiver_2.9.zip.
2. Descargue el paquete JAR local de Selenium-Server, generalmente descargue el archivo Selenium-Server-Standalone-2.40.0.JAR.
Luego copie el servidor de selenio en la carpeta Selenium en el paquete de protractor. Si el comando anterior se agotó, el archivo aparecerá aquí, pero estará vacío, simplemente reemplácelo directamente. También debe copiar el archivo después de la descompresión de Chromedriver_2.9.zip a aquí.
Finalmente, ejecute el siguiente comando para ver los resultados de la prueba
La copia del código es la siguiente:
Protactor de ejecución de NPM
Si desea saber más sobre la línea de comando en el proyecto NG Seed, puede hacer clic aquí para verlo
Resumir
La prueba NG E2E es mucho más complicada que la configuración de la prueba unitaria, pero puede hacer muchas cosas. Si vale la pena, también puede probarlo. Si tiene alguna pregunta, puede responder a los comentarios.