Dans l'article précédent, j'ai parlé des tests unitaires de Ng. Aujourd'hui, je parlerai des tests E2E (de bout en bout).
Lorsque nous testons un seul point fonctionnel d'un certain module, les tests unitaires sont les plus appropriés. Cependant, lorsqu'un bogue se produit lorsqu'un utilisateur interagit avec plusieurs pages, les tests unitaires ne fonctionneront pas. À l'heure actuelle, E2E doit être utilisé pour simuler les opérations utilisateur et restaurer le site Problème. Bien sûr, l'utilisation du test E2E peut également tester la robustesse du programme. Beaucoup de choses que les tests unitaires ne peuvent pas être effectués par les tests E2E.
Auparavant, Ng a utilisé le coureur de scénario angulaire pour exécuter des tests E2E, et maintenant il a été remplacé par du protracteur pour exécuter E2E.
Rapporteur
Le protracteur est un cadre utilisé dans AngularJS pour tester E2E. Il est lui-même un module NPM et est construit sur WebDriverjs. Le protracteur peut vraiment permettre à vos cas de test de s'exécuter sur le navigateur et de simuler complètement le comportement réel des utilisateurs.
Voici quelques-unes de ses adresses de ressources:
1. API de test fourni par le rapporteur
2. Exemple d'utilisation simple de rapporteur
3. Guide WebDriverjs, c'est le cœur de la dépendance du protracteur, le module NPM est appelé sélénium-webdriver
Principe d'opération de rapporteur
Le protracteur dépend des choses suivantes pour exécuter les tests E2E:
1. Les API WebDriver, qui sont les Driverjs Web mentionnées ci-dessus, sont des API JS apparentées fournies par Selenium aux tests frontaux.
2. Selenium Server, un package de pot backend, est utilisé pour communiquer avec le pilote du navigateur
3. Les pilotes de navigateur WebDriver sont utilisés pour afficher le contenu du site Web réel et communiquer avec Selenium Server. C'est l'endroit idéal pour transmettre des opérations de navigateur réelles.
L'ensemble du processus d'opération est le suivant
Si vous voulez en savoir plus sur les interactions précédentes de ces composants, veuillez cliquer ici
Utilisez NG Seed Project pour expliquer E2E
Nous utilisons le projet Seed fourni par NG pour expliquer un véritable exemple E2E. Tout d'abord, utilisez la commande suivante pour obtenir le projet de semences
La copie de code est la suivante:
git clone https://github.com/angular/angular-seed.git
Puis courez
La copie de code est la suivante:
Installation de NPM
Installer toutes les dépendances liées à
Ici, nous allons d'abord parler du fichier de configuration requis pour exécuter le test E2E. Vous pouvez voir que le fichier Test / ProTractor-conf.js est utilisé pour configurer les fonctions connexes. Concentrons-nous sur plusieurs attributs
1.Specs représente le chemin du fichier de test à exécuter, et celui écrit ici est e2e / *. Js
2. La passerelle représente l'adresse racine de la page de saut entre les navigateurs dans le fichier de test
3. Les capacités représentent le navigateur à utiliser pour exécuter des cas de test, comme l'utilisation de Chrome, vous pouvez le définir comme celui-ci
La copie de code est la suivante:
Capacités: {
«Nom de navigation»: «Chrome»
}
Le cadre représente le cadre de test à utiliser, voici le jasmin
Si vous souhaitez en savoir plus sur ce fichier de configuration, veuillez cliquer ici pour le voir.
Après avoir parlé du fichier de configuration, jetons un coup d'œil à la façon d'écrire des cas de test et de publier un exemple sur le site officiel d'abord.
La copie de code est la suivante:
«utiliser strict»;
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md * /
décrire ('mon application', function () {
Browser.get ('index.html');
il ('devrait être automatiquement redirigé vers / View1 lorsque l'emplacement hachage / fragment est vide', function () {
attendre (Browser.getLocationAbSurl ()). Tomatch ("/ View1");
});
décrire ('View1', function () {
AVANTEACH (fonction () {
Browser.get ('index.html # / View1');
});
it ('devrait rendre View1 lorsque l'utilisateur navigue vers / visual1', function () {
attendre (élément.all (by.css ('[ng-view] p')). First (). getText ()).
Tomatch (/ partiel pour la vue 1 /);
});
});
décrire ('View2', function () {
AVANTEACH (fonction () {
Browser.get ('index.html # / View2');
});
it ('devrait rendre la vue2 lorsque l'utilisateur navigue vers / visual2', function () {
attendre (élément.all (by.css ('[ng-view] p')). First (). getText ()).
Tomatch (/ partiel pour la vue 2 /);
});
});
});
Tout d'abord, la syntaxe ci-dessus est la méthode d'écriture prise en charge par le cadre de jasmin. Si vous ne comprenez pas son utilisation, vous pouvez cliquer ici
Ici, nous ne parlerons que de certaines méthodes et propriétés courantes fournies par le rapporteur dans l'exemple ci-dessus
1.Browser, un objet global, représente une instance du navigateur actuel. La méthode GET couramment utilisée est utilisée pour implémenter le changement d'adresse du navigateur.
2. Element, Global Object, fournit des fonctions telles que jQuery qui sont responsables de la recherche d'éléments de document et sont souvent utilisées dans l'utilisation conjointe par les objets.
3. Par exemple, l'objet global fournit un type de sélecteur, par exemple, vous pouvez trouver un élément via CSS, modèle, liaison et autres fonctionnalités.
Pour la méthode d'élément et par, veuillez vous référer à la documentation de l'API Retrraractor ci-dessus
Cela dit tellement, il est temps d'exécuter les cas de test ci-dessus, la commande est relativement simple
La copie de code est la suivante:
NPM Run Update-webdriver
Ceci est responsable du téléchargement des pilotes de navigateur pertinents et des packages JAR locaux Selenium-Server. Généralement, cela échouera car les deux ressources sont sur le serveur Google, vous pouvez donc utiliser le navigateur pour parcourir le mur pour le télécharger séparément. L'adresse est la suivante:
1. Adresse du pilote Chrome, téléchargez généralement le fichier ChromEdriver_2.9.zip.
2. Téléchargez le package JAR local de Selenium-Server, téléchargez généralement le fichier Selenium-Server-Standalone-2.40.0.jar.
Copiez ensuite le sélénium-serveur dans le dossier Selenium dans le package de rapporteur. Si la commande ci-dessus a chronométré, le fichier apparaîtra ici, mais il sera vide, il suffit de le remplacer directement. Vous devez également copier le fichier après la décompression de ChromEdriver_2.9.zip ici.
Enfin, exécutez la commande suivante pour voir les résultats du test
La copie de code est la suivante:
NPM exécute le rapporteur
Si vous voulez en savoir plus sur la ligne de commande dans le projet NG Seed, vous pouvez cliquer ici pour le voir
Résumer
Le test NG E2E est beaucoup plus compliqué que la configuration du test unitaire, mais il peut faire beaucoup de choses. Si vous en valez vraiment la peine, vous pouvez également l'essayer. Si vous avez des questions, vous pouvez répondre aux commentaires.