Share
Ce que vous allez créerProtractor est un framework de test de bout en bout populaire qui vous permet de tester votre application Angular sur un navigateur réel, en simulant les interactions de ce dernier, exactement comme le ferait un utilisateur réel. Les tests de bout en bout sont conçus pour garantir que l'application se comporte comme prévu du point de vue de l'utilisateur. De plus, les tests ne sont pas préoccupés par la mise en oeuvre réelle du code.
Protractor s’appuie sur le populaire Selenium WebDriver, une API pour l’automatisation et les tests de navigateurs. En plus des fonctionnalités fournies par Selenium WebDriver, Protractor propose des localisateurs et des méthodes pour capturer les composants d'interface utilisateur de l'application Angular..
Dans ce tutoriel, vous apprendrez:
Cela ne semble-t-il pas excitant? Cependant, les premières choses d'abord.
Si vous utilisez Angular-CLI, vous savez peut-être que, par défaut, deux frameworks sont fournis pour les tests. Elles sont:
La différence apparente entre les deux réside dans le fait que le premier est utilisé pour tester la logique des composants et des services, tandis que le second est utilisé pour garantir que la fonctionnalité de haut niveau (qui implique les éléments d'interface utilisateur) de l'application fonctionne comme prévu..
Si vous débutez dans les tests en angulaire, je vous conseillerais de lire la série Tester les composants en angulaire avec Jasmine pour avoir une meilleure idée de l'endroit où tracer la ligne..
Dans le premier cas, vous pouvez exploiter la puissance des utilitaires de tests angulaires et de Jasmine pour écrire non seulement des tests unitaires de composants et de services, mais également des tests de base de l'interface utilisateur. Toutefois, si vous devez tester la fonctionnalité front-end de votre application de bout en bout, c'est bien Protractor. L'API de Protractor, associée aux modèles de conception tels que les objets de page, facilite la rédaction de tests plus lisibles. Voici un exemple pour faire avancer les choses.
Accentsconagua
/ * 1. Il devrait avoir un bouton Créer un collage 2. Cliquer sur le bouton devrait afficher une fenêtre modale * / it ('devrait avoir un bouton Créer un collage et une fenêtre modale', () => expect (addPastePage.isCreateButtonPresent () ) .toBeTruthy ("Le bouton doit exister"); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy ("La fenêtre modale ne doit pas exister, pas encore!"); addPastePage.clickCreateButton (); )). toBeTruthy ("La fenêtre modale devrait maintenant apparaître"););La configuration de Protractor est facile si vous utilisez Angular-CLI pour générer votre projet. La structure de répertoire créée par ng nouveau est comme suit.
. E2e ├── app.e2e-spec.ts app.po.ts │ tsconfig.e2e.json a karma.conf.js package.json package-lock.json, protractor.conf.js, README.md, src, app, actifs, environnements, favicon.ico, index .html de main.ts de polyfills.ts de styles.css de test.ts de tsconfig.app.json de tsconfig.spec.json de ── typings.d.ts ├── tsconfig.json tslint.json 5 répertoires, 19 fichiers
Le modèle de projet par défaut créé par Protractor dépend de deux fichiers pour exécuter les tests: les fichiers de spécification résidant dans le fichier. e2e répertoire et le fichier de configuration (protractor.conf.js). Voyons comment est configurable protractor.conf.js est:
/ * Chemin d'accès: protractor.conf.ts * / // Fichier de configuration du rapporteur, voir le lien pour plus d'informations // https://github.com/angular/protractor/blob/master/lib/config.ts const SpecReporter = require ('jasmine-spec-reporter'); exports.config = allScriptsTimeout: 11000, specs: ['./e2e/**/*.e2e-spec.ts'], capacités: 'browserName': 'chrome', directConnect: true, baseUrl: 'http : // localhost: 4200 / ', framework:' jasmine ', jasmineNodeOpts: showColors: true, defaultTimeoutInterval: 30000, print: function () , onPrepare () require (' ts-node '). register ( projet: 'e2e / tsconfig.e2e.json'); jasmine.getEnv (). addReporter (nouveau SpecReporter (spec: displayStacktrace: true)); ; Si vous êtes prêt à exécuter le test sur le navigateur Web Chrome, vous pouvez le laisser tel quel et ignorer le reste de cette section..
le directConnect: true permet à Protractor de se connecter directement aux pilotes du navigateur. Toutefois, au moment de la rédaction de ce didacticiel, Chrome est le seul navigateur pris en charge. Si vous avez besoin de la prise en charge de plusieurs navigateurs ou si vous utilisez un navigateur autre que Chrome, vous devrez configurer le serveur autonome Selenium. Les étapes sont les suivantes.
Installez globalement Protractor à l'aide de npm:
npm install -g rapporteur
Cela installe l'outil de ligne de commande de webdriver-manager avec celui de rapporteur. Maintenant, mettez à jour webdriver-manager pour utiliser les fichiers binaires les plus récents, puis démarrez le serveur autonome Selenium..
webdriver-manager mise à jour webdriver-manager start
Enfin, définissez le directConnect: false et ajoutez le séléniumadresse propriété comme suit:
fonctionnalités: 'browserName': 'firefox', directConnect: false, baseUrl: 'http: // localhost: 4200 /', seleniumAddress: 'http: // localhost: 4444 / wd / hub', cadre: 'jasmine' , jasmineNodeOpts: showColors: true, defaultTimeoutInterval: 30000, print: function () ,
Le fichier de configuration sur GitHub fournit plus d'informations sur les options de configuration disponibles sur Protractor. Je vais utiliser les options par défaut pour ce tutoriel.
ng e2e est la seule commande dont vous avez besoin pour commencer à exécuter les tests si vous utilisez Angular-CLI. Si les tests semblent lents, c’est parce qu’Angular doit compiler le code chaque fois que vous exécutez ng e2e. Si vous voulez accélérer un peu, voici ce que vous devriez faire. Servir l'application en utilisant ng servir.
Lancez ensuite un nouvel onglet de console et exécutez:
ng e2e -s false
Les tests devraient charger plus vite maintenant.
Nous allons écrire des tests E2E pour une application de base Pastebin. Cloner le projet depuis le dépôt GitHub.
Les versions, la version de base (celle sans les tests) et la version finale (celle avec les tests), sont disponibles sur des branches distinctes. Cloner la branche de démarrage pour l'instant. Vous pouvez éventuellement servir le projet et parcourir le code pour vous familiariser avec l'application à portée de main..
Décrivons brièvement notre application Pastebin. L'application va initialement charger une liste de pâtes (extraites d'un serveur fictif) dans une table. Chaque ligne du tableau aura un Voir Coller bouton qui, lorsque vous cliquez dessus, ouvre une fenêtre modale d’amorçage. La fenêtre modale affiche les données de collage avec des options pour modifier et supprimer le collage. Vers le bout de la table, il y a un Créer coller bouton permettant d'ajouter de nouvelles pâtes.
L'exemple d'application. Le reste du didacticiel est consacré à la rédaction de tests Protractor en angulaire..
Le fichier de spécification, se terminant par .e2e-spec.ts, accueillera les tests réels pour notre application. Nous allons placer toutes les spécifications de test à l'intérieur du e2e répertoire depuis c'est l'endroit où nous avons configuré Protractor pour rechercher les spécifications.
Lors de la rédaction des tests Protractor, vous devez prendre en compte deux éléments:
Créez un nouveau fichier appelé test.e2e-spec.ts avec le code suivant pour commencer.
/ * Chemin: e2e / test.e2e-spec.ts * / import navigateur, par élément de 'rapporteur'; describe ('Démo de rapporteur', () => beforeEach (() => // le code sera exécuté avant que chaque bloc ne s'appelle //browser.get('/ ');); it (' devrait afficher le nom de l'application ', () => / * Les attentes acceptent les paramètres qui seront mis en correspondance avec la valeur réelle à l'aide des fonctions de lecture de Jasmine, par exemple, toEqual (), toContain (), toBe (), toBeTruthy (), etc. . * / expect ("Application Pastebin"). toEqual ("Application Pastebin");); it ('devrait cliquer sur le bouton de création d'un collage', () => // spec va ici););Ceci décrit comment nos tests seront organisés dans le fichier de spécifications en utilisant la syntaxe de Jasmine. décrire(), beforeEach () et il() sont des fonctions globales de Jasmin.
Jasmine a une excellente syntaxe pour écrire des tests, et cela fonctionne aussi bien avec Protractor. Si vous êtes nouveau sur Jasmine, je vous recommande de consulter d'abord la page GitHub de Jasmine..
le décrire block est utilisé pour diviser les tests en suites de tests logiques. Chaque décrire bloc (ou suite de tests) peut avoir plusieurs il blocs (ou spécifications de test). Les tests réels sont définis dans les spécifications de test.
"Pourquoi devrais-je structurer mes tests de cette façon?" tu peux demander. Une suite de tests peut être utilisée pour décrire logiquement une fonctionnalité particulière de votre application. Par exemple, toutes les spécifications relatives au composant Pastebin devraient idéalement être couvertes dans un bloc décrit intitulé Pastebin Page. Bien que cela puisse entraîner des tests redondants, vos tests seront plus lisibles et faciles à maintenir..
Un bloc de description peut avoir un beforeEach () méthode qui sera exécutée une fois, avant chaque spécification de ce bloc. Donc, si vous avez besoin que le navigateur navigue vers une URL avant chaque test, placez le code pour la navigation dans beforeEach () est la bonne chose à faire.
Les instructions Expect, qui acceptent une valeur, sont chaînées avec certaines fonctions de l'assistant. Les valeurs réelles et attendues sont comparées et un booléen est renvoyé, déterminant si le test échoue ou non..
Maintenant, mettons un peu de chair dessus.
/ * Chemin: e2e / test.e2e-spec.ts * / import navigateur, par élément de 'rapporteur'; decrire ('Démo de rapporteur', () => beforeEach (() => browser.get ('/');;); it ('devrait afficher le nom de l'application', () => expect ( élément (by.css ('. pastebin')). getText ()). toContain ('Application Pastebin');); it ('créer un bouton Coller devrait fonctionner', () => expect (element (by. id ('source-modal')). isPresent ()). toBeFalsy ("La fenêtre modale ne devrait pas apparaître maintenant"); element (by.buttonText ('create Paste')). click (); expect (element (by.id ('source-modal')). isPresent ()). toBeTruthy ('La fenêtre modale devrait apparaître maintenant');););browser.get ('/') et element (by.css ('. pastebin')). getText () font partie de l'API de Protractor. Mettons nos mains dans le bain et sautons directement dans ce que Protractor a à offrir.
Les composants importants exportés par Protractor API sont répertoriés ci-dessous..
navigateur(): Vous devriez appeler navigateur() pour toutes les opérations au niveau du navigateur telles que la navigation, le débogage, etc.. élément(): Ceci est utilisé pour rechercher un élément dans le DOM en fonction d'une condition de recherche ou d'une chaîne de conditions. Il retourne un objet ElementFinder, et vous pouvez effectuer des actions telles que getText () ou Cliquez sur() sur eux.element.all (): Ceci est utilisé pour rechercher un tableau d'éléments correspondant à une chaîne de conditions. Il retourne un objet ElementArrayFinder. Toutes les actions pouvant être effectuées sur ElementFinder peuvent également être effectuées sur ElementArrayFinder..Puisque nous utiliserons très souvent des localisateurs, voici quelques-uns des localisateurs couramment utilisés.
by.css ('nom-sélecteur'): C’est de loin le localisateur couramment utilisé pour trouver un élément en fonction du nom du sélecteur CSS.by.name ('nom-valeur'): Localise un élément avec une valeur correspondante pour l'attribut name.by.buttonText ('valeur du bouton'): Localise un élément de bouton ou un tableau d'éléments de bouton en fonction du texte intérieur. Remarque: les localisateurs by.model, by.binding et by.repeater ne fonctionnent pas avec les applications Angular 2+ au moment de la rédaction de ce didacticiel. Utilisez le CSS-localisateurs basés à la place.
Écrivons plus de tests pour notre application Pastebin.
it ('doit accepter et sauvegarder les valeurs d'entrée', () => element (by.buttonText ('create Paste')). click (); // envoie les valeurs d'entrée au formulaire à l'aide de l'élément sendKeys (by.name (' title ')). sendKeys (' Hello world in Ruby '); element (by.name (' language ')). element (by.cssContainingText (' option ',' Ruby ')). click (); element (par .name ('paste')). sendKeys ("met" Hello world ";"); element (by.buttonText ("Save")). click (); // s'attend à ce que la table contienne le nouveau paste coll lastRow = element.all (by.tagName ('tr')). last (); expect (lastRow.getText ()). toContain ("Hello world in Ruby"););Le code ci-dessus fonctionne et vous pouvez le vérifier vous-même. Cependant, ne vous sentiriez-vous pas plus à l'aise pour écrire des tests sans le vocabulaire spécifique à Protractor dans votre fichier de spécifications? Voici ce dont je parle:
it ('devrait avoir un bouton Créer un collage et une fenêtre modale', () => expect (addPastePage.isCreateButtonPresent ()). toBeTruthy ("Le bouton doit exister"); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy (" La fenêtre modale ne devrait pas apparaître, pas encore! "); AddPastePage.clickCreateButton (); expect (addPastePage.isCreatePasteModalPresent ()). ToBeTruthy (" La fenêtre modale doit apparaître maintenant ");); it ('doit accepter et enregistrer les valeurs d'entrée', () => addPastePage.clickCreateButton (); // le champ d'entrée doit être vide initialement. const emptyInputValues = ["", "", ""]; expect (addPastePage.getInputPasteValues ( )). toEqual (emptyInputValues); // Met maintenant à jour les champs d'entrée addPastePage.addNewPaste (); addPastePage.clickSaveButton (); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy ("La fenêtre modale doit être supprimée"; mainPage.getLastRowData ()). toContain ("Hello World in Ruby"););Les spécifications semblent plus simples sans le bagage supplémentaire de Protractor. Comment j'ai fait ça? Laissez-moi vous présenter les objets de page.
Page Object est un modèle de conception qui est populaire dans les cercles d'automatisation de test. Un objet de page modélise une page ou une partie d'une application à l'aide d'une classe orientée objet. Tous les objets (pertinents pour nos tests), tels que le texte, les en-têtes, les tableaux, les boutons et les liens, peuvent être capturés dans un objet de page. Nous pouvons ensuite importer ces objets de page dans le fichier de spécifications et appeler leurs méthodes. Cela réduit la duplication de code et facilite la maintenance du code.
Créez un répertoire nommé objets de page et ajouter un nouveau fichier à l'intérieur appelé pastebin.po.ts. Tous les objets concernés par le composant Pastebin seront capturés ici. Comme mentionné précédemment, nous avons divisé l'ensemble de l'application en trois composants différents, et chaque composant se verra attribuer un objet de page. Le schéma de nommage .po.ts est purement conventionnel, et vous pouvez le nommer comme vous voulez.
Voici un plan de la page que nous testons.
Voici le code.
/ * Chemin e2e / page-objects / pastebin.po.ts * / import navigateur, par élément, promesse, ElementFinder, ElementArrayFinder à partir de 'protractor'; La classe d'exportation Pastebin étend la base browseToHome (): promise.Promisereturn browser.get ('/'); getPastebin (): ElementFinder return element (by.css ('. pastebin')); / * En-tête de pâte * / getPastebinHeading (): promise.Promise renvoie this.getPastebin (). element (by.css ("h2")). getText (); / * Données de table * / getTable (): ElementFinder return this.getTable (). Element (by.css ('table')); getTableHeader (): promise.Promise renvoie this.getPastebin (). all (by.tagName ('tr')). get (0) .getText (); getTableRow (): ElementArrayFinder return this.getPastebin (). all (by.tagName ('tr')); getFirstRowData (): promise.Promise retour this.getTableRow (). get (1) .getText (); getLastRowData (): promise.Promise retour this.getTableRow (). last (). getText (); / * balise app-add-paste * / getAddPasteTag (): ElementFinder retour this.getPastebin (). element (by.tagName ('app-add-paste')); isAddPasteTagPresent (): promise.Promise return this.getAddPasteTag (). isPresent ();
Passons en revue ce que nous avons appris jusqu'à présent. L'API de Protractor renvoie des objets, et nous avons jusqu'à présent rencontré trois types d'objets. Elles sont:
En bref, élément() renvoie un ElementFinder, et element (). all renvoie un ElementArrayFinder. Vous pouvez utiliser les localisateurs (par.css, par.tagName, etc.) pour localiser l’élément dans le DOM et le transmettre à élément() ou element.all ().
ElementFinder et ElementArrayFinder peuvent ensuite être chaînés avec des actions telles que est présent(), getText (), Cliquez sur(), etc. Ces méthodes renvoient une promesse résolue lorsque cette action particulière est terminée.
La raison pour laquelle nous n’avons pas de chaîne de puis()s dans notre test est parce que Protractor s’occupe de lui en interne. Les tests semblent être synchrones même s'ils ne le sont pas; Par conséquent, le résultat final est une expérience de codage linéaire. Cependant, je vous recommande d'utiliser la syntaxe async / wait pour vous assurer que le code est à l'épreuve du temps..
Vous pouvez enchaîner plusieurs ElementFinder objets, comme indiqué ci-dessous. Ceci est particulièrement utile si le DOM a plusieurs sélecteurs du même nom et que nous devons capturer le bon.
getTable (): ElementFinder return this.getPastebin (). element (by.css ('table')); Maintenant que le code de l'objet page est prêt, importons-le dans notre spécification. Voici le code pour nos tests initiaux.
/ * Chemin d'accès: e2e / mainPage.e2e-spec.ts * / import Pastebin from './page-objects/pastebin.po'; importer navigateur, rapporteur de 'rapporteur'; / * Scénarios à tester 1. La page Pastebin doit afficher un en-tête avec le texte Application Pastebin 2. Elle doit avoir un en-tête de tableau 3. Le tableau doit comporter des lignes 4. La balise app-add-paste doit exister * / describe ('Page Pastebin ', () => const mainPage: Pastebin = new Pastebin (); beforeEach (() => mainPage.navigateToHome ();); it (' devrait afficher l'en-tête Application Pastebin ', () => expect (mainPage.getPastebinHeading ()). toEqual ("Application Pastebin");); it ('devrait avoir un en-tête de table', () => expect (mainPage.getTableHeader ()). toContain ("id Title Code de langue ");) it ('table doit avoir au moins une ligne', () => expect (mainPage.getFirstRowData ()). toContain (" Hello world ");) it ('devrait avoir l'app-add -Paste tag ', () => expect (mainPage.isAddPasteTagPresent ()). toBeTruthy ();));Les tests doivent être organisés de manière à ce que la structure globale paraisse simple et significative. Voici quelques conseils avisés que vous devriez garder à l'esprit lors de l'organisation des tests E2E..
naviguerToHome ()), créez un objet de page de base. D'autres modèles de page peuvent hériter du modèle de page de base. En suivant les instructions ci-dessus, voici à quoi devraient ressembler la hiérarchie des objets de page et l'organisation des fichiers.
Nous avons déjà couvert pastebin.po.ts et mainPage.e2e-spec.ts. Voici le reste des fichiers.
/ * chemin: e2e / page-objects / base.po.ts * / import navigateur, par élément, promesse, ElementFinder, ElementArrayFinder à partir de 'protractor'; classe d'exportation Base / * Méthodes de navigation * / browseToHome (): promise.Promisereturn browser.get ('/'); browseToAbout (): promise.Promise return browser.get ('/ about'); browseToContact (): promise.Promise return browser.get ('/ contact'); / * Mock données pour créer un nouveau coller et éditer coller existant * / getMockPaste (): any let paste: any = title: "Something here", langue: "Ruby", paste: "Test" return paste; getEditedMockPaste (): any let pâte: any = titre: "Coller 2", langue: "JavaScript", coller: "Test2" retour coller; / * Méthodes partagées par addPaste et viewPaste * / getInputTitle (): ElementFinder return element (by.name ("title")); getInputLanguage (): ElementFinder return element (by.name ("language")); getInputPaste (): ElementFinder return element (by.name ("paste"));
Plan directeur pour le composant AddPaste/ * Chemin: e2e / page-objects / add-paste.po.ts * / import navigateur, par élément, promesse, ElementFinder, ElementArrayFinder à partir de 'protractor'; importer Base de './base.po'; classe d'exportation AddPaste étend la base getAddPaste (): ElementFinder élément de retour (by.tagName ('app-add-paste')); Bouton * Créer un collage * / getCreateButton (): ElementFinder return this.getAddPaste (). Element (by.buttonText ("create Paste")); isCreateButtonPresent (): promise.Promise return this.getCreateButton (). isPresent (); clickCreateButton (): promise.Promise retour this.getCreateButton (). click (); / * Créer un collage modal * / getCreatePasteModal (): ElementFinder return this.getAddPaste (). Element (by.id ("source-modal")); isCreatePasteModalPresent (): promise.Promise retour this.getCreatePasteModal (). isPresent (); / * Bouton Enregistrer * / getSaveButton (): ElementFinder return this.getAddPaste (). Element (by.buttonText ("Save")); clickSaveButton (): promise.Promise return this.getSaveButton (). click (); / * Bouton Fermer * / getCloseButton (): ElementFinder return this.getAddPaste (). Element (by.buttonText ("Close")); clickCloseButton (): promise.Promise retour this.getCloseButton (). click (); / * Obtenir une entrée Colle les valeurs de la fenêtre modale * / getInputPasteValues (): Promise let inputTitle, inputLanguage, inputPaste; // Renvoie les valeurs d'entrée après la résolution de la promesse // Notez que this.getInputTitle (). GetText ne fonctionne pas // Utilisez getAttribute ('value') à la place, retournez Promise.all ([this.getInputTitle (). GetAttribute ( "valeur"), this.getInputLanguage (). getAttribute ("valeur"), this.getInputPaste (). getAttribute ("valeur")]) .then ((valeurs) => valeurs de retour;); / * Ajouter un nouveau Coller * / addNewPaste (): any let newPaste: any = this.getMockPaste (); // Envoyer les valeurs d'entrée this.getInputTitle (). SendKeys (newPaste.title); this.getInputLanguage () .element (by.cssContainingText ('option', newPaste.language)). click (); this.getInputPaste (). sendKeys (newPaste.paste); // Convertit l'objet coller en tableau renvoyé Object.keys (newPaste) .map (key => newPaste [key]); / * Chemin d'accès: e2e / addNewPaste.e2e-spec.ts * / import Pastebin from './page-objects/pastebin.po'; importer AddPaste depuis './page-objects/add-paste.po'; importer navigateur, rapporteur de 'rapporteur'; / * Scénarios à tester 1. La page AddPaste doit comporter un bouton. Une fenêtre modale doit s'afficher. 2. La fenêtre modale accepte les nouvelles valeurs et les enregistre. 4. Les données enregistrées apparaissent dans la page principale. 3. Le bouton Fermer doit work * / describe ('Add-New-Paste page', () => const addPastePage: AddPaste = new AddPaste (); const mainPage: Pastebin = new Pastebin (); beforeEach ((= = addPastePage.navigateToHome (3)) );); it ('devrait avoir un bouton Créer un collage et une fenêtre modale', () => expect (addPastePage.isCreateButtonPresent ()). toBeTruthy ("Le bouton doit exister"); ) .toBeFalsy ("La fenêtre modale ne devrait pas apparaître, pas encore!"); addPastePage.clickCreateButton (); expect (addPastePage.isCreatePasteModalPresent ()). toBeTruthy ("La fenêtre modale devrait apparaître maintenant");); ("doit accepter et enregistrer les valeurs d'entrée", () => addPastePage.clickCreateButton (); const emptyInputValues = ["", "", ""]; expect (addPastePage.getInputPasteValues ()). toEqual (emptyInputValues); const newInputValues = addPastePage.addNewPaste (); expect (addPastePage.getInputPasteValues ()). toEqual (newInputValues); addPastePage.clickSaveButton (); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy ("La fenêtre modale devrait avoir disparu"); expect (mainPage.getLastRowData ()). toContain ("Quelque chose ici"); ); it ("le bouton de fermeture devrait fonctionner", () => addPastePage.clickCreateButton (); addPastePage.clickCloseButton (); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy ("La fenêtre modale doit être supprimée");); ); Il manque cependant quelques éléments: les tests pour le Voir Coller bouton et la fenêtre modale qui apparaît après avoir cliqué sur le bouton. Je vais laisser cela comme un exercice pour vous. Cependant, je vais vous laisser un indice.
La structure des objets de page et les spécifications de ViewPastePage sont similaires à celles de AddPastePage..
Plan directeur pour le composant ViewPasteVoici les scénarios que vous devez tester:
Essayez de vous en tenir aux directives dans la mesure du possible. En cas de doute, passez à la dernière branche pour voir la version finale du code..
Donc là vous l'avez. Dans cet article, nous avons abordé la rédaction de tests de bout en bout pour notre application Angular utilisant Protractor. Nous avons commencé par discuter des tests unitaires par rapport aux tests e2e, puis nous avons appris comment configurer, configurer et exécuter Protractor. Le reste du didacticiel s'est concentré sur la rédaction de tests réels pour l'application de démonstration Pastebin..
Faites-moi part de vos pensées et de votre expérience concernant la rédaction de tests avec Protractor ou la rédaction de tests sur Angular en général. J'aimerais les entendre. Merci d'avoir lu!
