Lorsque la complexité et la taille d'une augmentation d'une application, il n'est pas pratique de s'appuyer sur les tests manuels de la fiabilité, de la capture des insectes et des tests de régression de nouvelles fonctionnalités.
Pour résoudre ce problème, nous avons établi un coureur de scénario angulaire pour imiter les opérations utilisateur et nous aider à vérifier la robustesse des applications angulaires.
1. Résumé
Nous pouvons rédiger des tests de scénarios en JavaScript pour décrire le comportement de notre application et interagir avec certains états. Un scénario se compose d'un ou plusieurs blocs «informatiques» (nous pouvons les traiter comme des exigences pour notre application), qui sont composés à tour de rôle des commandes et des attentes. La commande indique au coureur de faire quelque chose dans l'application (comme aller à une page ou cliquer sur un bouton), et l'attente indique au coureur de juger quelque chose sur l'état (comme la valeur d'un certain domaine ou de l'URL actuelle). Si une attente échoue, le coureur marque ce "it" comme "faux", puis continue avec le prochain "it". Le scénario peut également avoir des blocs "avant de l'enseignement" et "après-recherche" qui s'exécutent avant ou après chaque bloc "it", qu'il passe ou non.
En plus des éléments ci-dessus, le scénario peut également inclure des fonctions d'assistance pour éviter le code en double dans le bloc "it".
Voici un exemple de scénario simple:
décrire ('buzz client', function () {it ('devrait filtrer les résultats', function () {input ('utilisateur'). Entrée ('jackSparrow'); élément (': bouton'). cliquez (); entrée ('filterText'). Entrée (Bees '); });});Ce scénario décrit les exigences du client réseau et, explicitement, il devrait avoir la possibilité de filtrer les utilisateurs. Il commence par saisir une valeur dans la zone d'entrée «utilisateur», en cliquant sur le seul bouton de la page, puis en vérifiant qu'il existe une liste de 10 éléments. Ensuite, il pénètre "abeilles" dans la zone d'entrée de "FilterText", puis vérifiez que la liste sera réduite à un seul élément.
Le chapitre API suivant répertorie la commande et l'attente disponibles dans Runner.
2. API
Code source: https://github.com/angular/angular.js/blob/master/src/ngscenario/dsl.js
pause()
Pause l'exécution du test jusqu'à ce que nous appelions remer () dans la console (vous pouvez également cliquer sur le lien de CV dans l'interface du coureur)
sommeil (secondes)
Exécution de test de pause pendant n secondes.
Browser (). Navigateto (URL)
Chargez l'URL spécifiée dans le SETFRAME.
Browser (). Navigateto (URL, fn)
Chargez l'URL renvoyé par FN dans le cadre de test. Le paramètre URL ici est juste utilisé comme sortie de test. Cette API peut être utilisée lorsque l'URL de destination est dynamique (l'adresse est toujours inconnue lors de l'écriture de tests).
Browser (). Reload ()
Actualisez la page actuellement chargée dans le cadre de test.
Browser (). Window (). Href ()
Retour à la fenêtre.location.href de la page actuelle de la trame de test.
Browser (). Window (). Path ()
Renvoie la fenêtre.location.pathname de la page actuelle de la trame de test.
Browser (). Window (). Search ()
Retour à la fenêtre.location.search de la page actuelle de la trame de test.
Browser (). Window (). Hash ()
Renvoie la fenêtre.location.hash (sans compter #) de la page actuelle de la trame de test.
Browser (). Location (). Url ()
Renvoie le résultat de $ location.url () de la page actuelle (http://docs.angularjs.org/api/ng.$location)
Browser (). Location (). Path ()
Retour le résultat de $ location.path () de la page actuelle (http://docs.angularjs.org/api/ng.$location)
Browser (). Location (). Search ()
Renvoie le résultat de $ Emplacement de la page actuelle. Search () (http://docs.angularjs.org/api/ng.$location)
Browser (). Location (). Hash ()
Renvoyez le résultat de l'emplacement $. hash () de la page actuelle (http://docs.angularjs.org/api/ng.$location)
attendre (futur). {Matcher}
Détermine si la valeur future donnée satisfait le correspondant. Toutes les déclarations d'API renvoient un futur objet avec une valeur spécifiée obtenue après leur exécution. Le Matcher est défini à l'aide d'Angular.Scenario.matcher, et ils utilisent la valeur des contrats à terme pour exécuter l'attente. Par exemple:
attendre (Browser () .location () .href ()) .toequal ('http://www.google.com');
attendre (futur) .not (). {Matcher}
Détermine si la valeur d'un avenir donné est l'opposé des attentes attendues du contrepartie spécifié.
Utilisation (sélecteur, étiquette)
Élabore la prochaine sélection d'éléments DSL. (Limite vraisemblablement la portée du sélecteur, les estimations d'étiquette sont utilisées pour tester la sortie)
exemple:
Utilisation ('# foo', "Foo 'Text Field"). Input (' Bar ')
reliure (nom)
Renvoie la première liaison qui correspond au nom spécifié (peut-être lié à Ng-Bind).
entrée (nom) .enter (valeur)
Entrez la valeur spécifiée dans le champ de formulaire de nom spécifié.
entrée (nom) .check ()
Sélectionnez ou décochez la case à cocher du nom spécifié.
entrée (nom) .Select (valeur)
Sélectionnez l'entrée [Type = ”Radio”] avec la valeur médiane radio du nom spécifié.
entrée (nom) .Val ()
Renvoie la valeur actuelle de l'entrée du nom spécifié.
répéteur (sélecteur, label) .Count ()
Renvoie le nombre de lignes du répéteur qui correspond au sélecteur spécifié (sélecteur jQuery). L'étiquette est utilisée uniquement comme sortie de test.
répéteur («# produits Table», «liste de produits»). Count () // Nombre de lignes
répéteur (sélecteur, étiquette) .row (index)
Renvoie un tableau, liant les lignes spécifiées dans le répéteur correspondant à l'index spécifié. L'étiquette n'est utilisée que pour tester la sortie.
répéteur («# produits Table», «liste de produits»). Row (1) // Toutes les reliures en ligne comme tableau
répéteur (sélecteur, étiquette) .Column (reliure)
Renvoie un tableau avec la valeur de la colonne dans le répéteur correspondant à la liaison spécifiée qui correspond au sélecteur spécifié (sélecteur jQuery). L'étiquette n'est utilisée que pour tester la sortie.
répéteur («# produits Table», «liste de produits»). Column («product.name») // toutes les valeurs de toutes les lignes dans un tableau
sélectionner (nom) .option (valeur)
Sélectionnez l'option pour spécifier la valeur dans la sélection du nom spécifié.
SELECT (NAME) .option (Value1, Value2)
Sélectionnez l'option (choix multiple) de la valeur spécifiée dans la sélection du nom spécifié.
élément (sélecteur, étiquette) .Count ()
Renvoie le nombre d'éléments correspondant au sélecteur spécifié. L'étiquette est utilisée uniquement comme sortie de test.
élément (sélecteur, étiquette) .click ()
Cliquez sur l'élément qui correspond au sélecteur spécifié. L'étiquette est utilisée uniquement comme sortie de test.
élément (sélecteur, étiquette) .Query (fn)
Exécuter le FN spécifié (SelectElements, Terminé), et SelectElement est l'ensemble d'éléments qui correspondent au sélecteur spécifié; et fait est une fonction qui sera exécutée après l'exécution du FN. L'étiquette est utilisée uniquement comme sortie de test.
élément (sélecteur, label). {méthode} ()
Renvoie la valeur de retour de l'exécution de la méthode sur l'élément correspondant au sélecteur spécifié. La méthode peut être les méthodes jQuery suivantes: val, texte, html, hauteur, intérieurement, extérieur, largeur, interwidth, largeur extérieure, position, scrolllft, scrolltop, décalage. L'étiquette est utilisée uniquement comme sortie de test.
élément (sélecteur, étiquette). {méthode} (valeur)
Exécutez la méthode spécifiée sur l'élément correspondant au sélecteur spécifié et utilisez la clé et la valeur comme paramètres. La méthode peut être les méthodes jQuery suivantes: val, texte, html, hauteur, intérieurement, extérieur, largeur, interwidth, largeur extérieure, position, scrolllft, scrolltop, décalage. L'étiquette est utilisée uniquement comme sortie de test.
élément (sélecteur, étiquette). {méthode} (clé)
Renvoie le résultat de l'exécution d'une méthode spécifiée sur l'élément correspondant au sélecteur spécifié. Ces méthodes peuvent être les méthodes JQuery suivantes: ART, PROP, CSS. L'étiquette est utilisée uniquement comme sortie de test.
élément (sélecteur, étiquette). {méthode} (clé, valeur)
Exécutez la méthode sur l'élément correspondant au sélecteur spécifié et prenez la clé et la valeur en tant que paramètres. Ces méthodes peuvent être les méthodes JQuery suivantes: ART, PROP, CSS. L'étiquette est utilisée uniquement comme sortie de test.
JavaScript est un langage dynamiquement typé qui apporte des expressions puissantes, mais elle nous donne également peu d'aide du compilateur. Par conséquent, nous pensons fortement que tout code écrit en JavaScript nécessite beaucoup de tests complets. Angular a de nombreuses fonctionnalités qui nous permettent de tester plus facilement nos applications. Nous n'avons donc aucune excuse pour ne pas rédiger des tests. (-_- !!)
Ce qui précède est une collection d'informations sur les tests AngularJS E2E. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!