Share
Wat je gaat creërenGradenboog is een populair end-to-end-testraamwerk waarmee u uw Angular-toepassing kunt testen op een echte browser die de interacties van de browser simuleert, net zoals een echte gebruiker ermee zou werken. End-to-end tests zijn ontworpen om ervoor te zorgen dat de applicatie zich gedraagt zoals verwacht vanuit het perspectief van een gebruiker. Bovendien zijn de tests niet bezorgd over de daadwerkelijke code-implementatie.
Protractor draait bovenop de populaire Selenium WebDriver, een API voor browserautomatisering en testen. Naast de functies van Selenium WebDriver biedt Protractor lokatoren en methoden voor het vastleggen van de UI-componenten van de Angular-toepassing.
In deze tutorial leert u over:
Klinkt dat niet opwindend? Maar de eerste dingen eerst.
Als u Angular-CLI heeft gebruikt, weet u waarschijnlijk dat dit standaard wordt geleverd met twee frameworks voor testen. Zij zijn:
Het duidelijke verschil tussen beide is dat de eerste wordt gebruikt om de logica van de componenten en services te testen, terwijl de laatste wordt gebruikt om ervoor te zorgen dat de functionaliteit op hoog niveau (die betrekking heeft op de UI-elementen) van de toepassing werkt zoals verwacht.
Als u nog niet vertrouwd bent met testen in Angular, raad ik u aan de testcomponenten in Angular met behulp van de Jasmine-serie te lezen om een beter idee te krijgen van waar u de lijn wilt trekken.
In het geval van eerstgenoemde kunt u gebruikmaken van de kracht van Angular-testprogramma's en Jasmine om niet alleen unit tests voor componenten en services te schrijven, maar ook eenvoudige UI-tests. Als u echter van begin tot eind de front-endfunctionaliteit van uw toepassing moet testen, is de gradenboog de juiste keuze. Protractor's API in combinatie met ontwerppatronen, zoals pagina-objecten, maken het gemakkelijker om tests te schrijven die beter leesbaar zijn. Hier is een voorbeeld om dingen aan het rollen te krijgen.
Accentsconagua
/ * 1. Er moet een knop Plakken maken worden gemaakt. 2. Als u op de knop klikt, wordt een modaal venster weergegeven * / it ('moet een knop Maken plakken en een modaal venster bevatten', () => expect (addPastePage.isCreateButtonPresent () ) .toBeTruthy ("De knop zou moeten bestaan"); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy ("Het modale venster zou niet moeten bestaan, nog niet!"); addPastePage.clickCreateButton (); expect (addPastePage.isCreatePasteModalPresent ( )) .BeTruthy ("Het modale venster zou nu moeten verschijnen"););Het instellen van gradenboog is eenvoudig als u Angular-CLI gebruikt om uw project te genereren. De mapstructuur gemaakt door ng nieuw is als volgt.
. ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── package-lock.json ├── protractor.conf.js ├── README.md ├── src │ ├── app │ ├── assets │ ├── omgevingen │ ├── favicon.ico │ ├── index .html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └ ── typings.d.ts ├── tsconfig.json └── tslint.json 5 mappen, 19 bestanden
De standaard projectsjabloon gemaakt door Protractor hangt af van twee bestanden om de tests uit te voeren: de spec-bestanden die zich in de e2e map en het configuratiebestand (protractor.conf.js). Laten we eens kijken hoe configureerbaar protractor.conf.js is:
/ * Pad: protractor.conf.ts * / // Protractor-configuratiebestand, zie link voor meer informatie // https://github.com/angular/protractor/blob/master/lib/config.ts const SpecReporter = vereisen ( 'jasmijnvoeten spec-reporter'); exports.config = allScriptsTimeout: 11000, specs: ['./e2e/**/*.e2e-spec.ts'], mogelijkheden: 'browserName': 'chrome', directConnect: true, baseUrl: 'http : // localhost: 4200 / ', framework:' jasmine ', jasmineNodeOpts: showColors: true, defaultTimeoutInterval: 30000, print: function () , onPrepare () require (' ts-node '). register ( project: 'e2e / tsconfig.e2e.json'); jasmine.getEnv (). addReporter (new SpecReporter (spec: displayStacktrace: true)); ; Als u de test in Chrome-webbrowser goed uitvoert, kunt u dit laten zoals het is en de rest van deze sectie overslaan.
De directConnect: true laat Protractor rechtstreeks verbinding maken met de stuurprogramma's van de browser. Op het moment dat deze zelfstudie wordt geschreven, is Chrome de enige ondersteunde browser. Als u ondersteuning voor meerdere browsers nodig heeft of een andere browser dan Chrome wilt gebruiken, moet u een zelfstandige Selenium-server instellen. De stappen zijn als volgt.
Installeer de gradenboog wereldwijd met behulp van npm:
npm install -g gradenboog
Hiermee installeert u de opdrachtregelhulpprogramma voor webdriver-manager samen met die van gradenboog. Werk nu de webdriver-manager bij om de nieuwste binaire bestanden te gebruiken en start vervolgens de zelfstandige Selenium-server.
webdriver-manager update webdriver-manager start
Stel tot slot de directConnect: false en voeg de seleniumAddress eigendom als volgt:
mogelijkheden: 'browserName': 'firefox', directConnect: false, baseUrl: 'http: // localhost: 4200 /', seleniumAddress: 'http: // localhost: 4444 / wd / hub', framework: 'jasmine' , jasmineNodeOpts: showColors: true, defaultTimeoutInterval: 30000, print: function () ,
Het configuratiebestand op GitHub biedt meer informatie over de configuratie-opties die beschikbaar zijn op de Gradenboog. Ik zal de standaardopties voor deze tutorial gebruiken.
ng e2e is het enige commando dat u nodig hebt om de tests te starten als u Angular-CLI gebruikt. Als de tests traag lijken, is het omdat Angular de code moet compileren elke keer dat u hardloopt ng e2e. Als je het een beetje wilt versnellen, dan is dit wat je zou moeten doen. Bedien de applicatie met ng serveren.
Open vervolgens een nieuw tabblad van de console en voer het volgende uit:
ng e2e -s false
De tests zouden nu sneller moeten laden.
We zullen E2E-tests schrijven voor een eenvoudige Pastebin-toepassing. Kloon het project van de GitHub repo.
Zowel de versies, de starterversie (die zonder de tests) en de definitieve versie (die met de tests), zijn beschikbaar op afzonderlijke takken. Klop voorlopig de starter af. Optioneel, bedien het project en doorloop de code om kennis te maken met de toepassing die voor u ligt.
Laten we onze Pastebin-toepassing kort beschrijven. De toepassing laadt in eerste instantie een lijst met pasta's (opgehaald van een schijn-server) in een tabel. Elke rij in de tabel heeft een Bekijk Paste knop die, wanneer erop wordt geklikt, een bootstrap modaal venster opent. Het modale venster geeft de pastagegevens weer met opties om de plakken te bewerken en te verwijderen. Tegen het einde van de tafel is er een Maak plak knop die kan worden gebruikt om nieuwe pasta's toe te voegen.
De voorbeeldtoepassing. De rest van de tutorial is gewijd aan het schrijven van gradenboogproeven in Angular.
Het spec-bestand, eindigend met .E2E-spec.ts, zal de daadwerkelijke tests voor onze toepassing hosten. We plaatsen alle testspecificaties in de e2e directory omdat dat de plaats is waar we Protractor hebben geconfigureerd om naar de specificaties te zoeken.
Er zijn twee dingen waar je rekening mee moet houden tijdens het schrijven van gradenboogproeven:
Maak een nieuw bestand met de naam test.e2e-spec.ts met de volgende code om te beginnen.
/ * Pad: e2e / test.e2e-spec.ts * / import browser, op, element uit 'gradenboog'; beschrijven ('Protractor Demo', () => beforeEach (() => // De code hier wordt uitgevoerd voordat elk blok //browser.get('/ ');); it (' zou de naam van de toepassing moeten weergeven ', () => / * Verwachtingen accepteren parameters die gepaard gaan met de echte waarde met behulp van de matcherfuncties van Jasmine, bijvoorbeeld toEqual (), toContain (), toBe (), toBeTruthy () etc . * / expect ("Pastebin Application"). toEqual ("Pastebin Application");); it ('zou moeten klikken op de knop' Plakken maken ', () => // spec goes here););Dit toont hoe onze tests binnen het spec-bestand worden georganiseerd met de syntaxis van Jasmine. beschrijven(), beforeEach () en het() zijn wereldwijde Jasmine-functies.
Jasmine heeft een geweldige syntaxis voor het schrijven van tests, en het werkt net zo goed met gradenboog. Als je Jasmine nog niet kent, raad ik je aan om eerst de Jasmine's GitHub-pagina te bekijken.
De beschrijven blok wordt gebruikt om de tests in logische testsuites te verdelen. Elk beschrijven blok (of testsuite) kan meerdere bevatten het blokken (of testspecificaties). De eigenlijke tests worden gedefinieerd in de testspecificaties.
"Waarom zou ik mijn tests op deze manier moeten structureren?" je mag vragen. Een testsuite kan worden gebruikt om een bepaalde functie van uw toepassing logisch te beschrijven. Bijvoorbeeld, alle specificaties met betrekking tot de Pastebin-component moeten idealiter worden behandeld in een beschrijvend blok met de titel Pastebin-pagina. Hoewel dit kan resulteren in tests die overbodig zijn, zullen uw tests leesbaarder en onderhoudbaarder zijn.
Een beschrijvingsblok kan een beforeEach () methode die één keer wordt uitgevoerd, vóór elke specificatie in dat blok. Dus als u de browser nodig hebt om vóór elke test naar een URL te navigeren, plaatst u de code voor navigatie erin beforeEach () is het juiste ding om te doen.
Verwachtingen, die een waarde accepteren, worden geketend met enkele matcher-functies. Zowel de reële als de verwachte waarden worden vergeleken en er wordt een boolean geretourneerd die bepaalt of de test faalt of niet.
Laten we er nu wat vlees op doen.
/ * Pad: e2e / test.e2e-spec.ts * / import browser, op, element uit 'gradenboog'; beschrijven ('Protractor Demo', () => beforeEach (() => browser.get ('/');); it ('zou de naam van de applicatie moeten weergeven', () => expect ( element (by.css ('. pastebin')). getText ()). toContain ('Pastebin Application');); it ('create Paste button should operate', () => expect (element (by. id ('source-modal')). isPresent ()). toBeFalsy ("Het modale venster zou nu niet moeten verschijnen"); element (by.buttonText ('create Paste')). click (); expect (element (by.id ('source-modal')). isPresent ()). toBeTruthy ('Het modale venster zou nu moeten verschijnen');););browser.get ( '/') en element (by.css ('. Pastebin)) getText. () zijn onderdeel van de Protractor API. Laten we onze handen vies maken en meteen doorgaan naar wat Protractor te bieden heeft.
De prominente componenten geëxporteerd door Protractor API staan hieronder vermeld.
browser (): Je zou moeten bellen browser () voor alle bewerkingen op browser niveau, zoals navigatie, debugging, enz. element(): Dit wordt gebruikt om een element op te zoeken in de DOM op basis van een zoekvoorwaarde of een reeks voorwaarden. Het retourneert een ElementFinder-object en u kunt acties uitvoeren zoals getText () of Klik() op hen.element.all (): Dit wordt gebruikt om te zoeken naar een reeks elementen die overeenkomen met een bepaalde reeks voorwaarden. Het retourneert een ElementArrayFinder-object. Alle acties die op ElementFinder kunnen worden uitgevoerd, kunnen ook op ElementArrayFinder worden uitgevoerd.Omdat we heel vaak locators gebruiken, zijn hier enkele veelgebruikte locators.
by.css ( 'selector-naam'): Dit is verreweg de meest gebruikte locator voor het vinden van een element op basis van de naam van de CSS-selector.by.name (naam-waardeparen): Zoekt een element met een overeenkomende waarde voor het kenmerk name.by.buttonText ( 'button-value'): Zoekt een knopelement of een reeks knopelementen op basis van de innerlijke tekst. Opmerking: De locators by.model, by.binding en by.repeater werken niet met Angular 2+-toepassingen op het moment dat deze zelfstudie wordt geschreven. Gebruik de CSS-gebaseerde locators.
Laten we nog meer tests schrijven voor onze Pastebin-toepassing.
it ('moet invoerwaarden accepteren en opslaan', () => element (by.buttonText ('create Paste')). click (); // verzend invoerwaarden naar het formulier met sendKeys-element (by.name (' titel ')). sendKeys (' Hallo wereld in Ruby '); element (by.name (' taal ')). element (by.cssConatingText (' option ',' Ruby ')). click (); element (by .name ('paste')). sendKeys ("zet 'Hello world';"); element (by.buttonText ('Opslaan')). click (); // verwacht dat de tabel de nieuwe paste const bevat lastRow = element.all (by.tagName ('tr')). last (); expect (lastRow.getText ()). toContain ("Hello world in Ruby"););De bovenstaande code werkt, en u kunt dat zelf verifiëren. Voelt u zich echter niet comfortabeler in het schrijven van toetsen zonder de Protractor-specifieke woordenschat in uw spec-bestand? Dit is waar ik het over heb:
it ('zou een Create Paste knop en modaal venster moeten hebben', () => expect (addPastePage.isCreateButtonPresent ()). toBeTruthy ("De knop zou moeten bestaan"); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy (" Het modale venster zou niet moeten verschijnen, nog niet! "); AddPastePage.clickCreateButton (); expect (addPastePage.isCreatePasteModalPresent ()). ToBeTruthy (" Het modale venster zou nu moeten verschijnen ");); it ('moet invoerwaarden accepteren en opslaan', () => addPastePage.clickCreateButton (); // Invoerveld moet in eerste instantie leeg zijn const emptyInputValues = ["", "", ""]; expect (addPastePage.getInputPasteValues ( )). toEqual (emptyInputValues); // Werk nu de invoervelden bij addPastePage.addNewPaste (); addPastePage.clickSaveButton (); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy ("Het modale venster zou moeten verdwijnen"); expect ( mainPage.getLastRowData ()) .Contain ("Hello World in Ruby"););De specificaties lijken eenvoudiger te zijn zonder de extra Protractor-bagage. Hoe heb ik dat gedaan? Laat me je voorstellen aan pagina-objecten.
Page Object is een ontwerppatroon dat populair is in de kringen van testautomatisering. Een paginaobject modelleert een pagina of deel van een toepassing met een objectgerichte klasse. Alle objecten (die relevant zijn voor onze tests) zoals tekst, kopjes, tabellen, knoppen en links kunnen worden vastgelegd in een pagina-object. We kunnen dan deze pagina-objecten importeren in het spec-bestand en hun methoden aanroepen. Dit vermindert codeduplicatie en maakt het onderhoud van code eenvoudiger.
Maak een map met de naam page-objecten en voeg een nieuw bestand toe binnen het opgeroepen pastebin.po.ts. Alle objecten die te maken hebben met de Pastebin-component worden hier vastgelegd. Zoals eerder vermeld, hebben we de hele app in drie verschillende componenten verdeeld, en elke component heeft een paginaobject dat eraan is gewijd. Het schema voor naamgeving .po.ts is puur conventioneel en je kunt het alles noemen wat je maar wilt.
Hier is een blauwdruk van de pagina die we aan het testen zijn.
Hier is de code.
/ * Pad e2e / page-objects / pastebin.po.ts * / import browser, op, element, beloven, ElementFinder, ElementArrayFinder van 'protractor'; exportklasse Pastebin breidt Base uit navigateToHome (): promise.Promisereturn browser.get ('/'); getPastebin (): ElementFinder return element (by.css ('. pastebin')); / * Pastebin Heading * / getPastebinHeading (): promise.Promise return this.getPastebin (). element (by.css ("h2")). getText (); / * Table Data * / getTable (): ElementFinder return this.getTable (). Element (by.css ('table')); getTableHeader (): promise.Promise return this.getPastebin (). all (by.tagName ('tr')). get (0) .getText (); getTableRow (): ElementArrayFinder return this.getPastebin (). all (by.tagName ('tr')); getFirstRowData (): promise.Promise retourneer this.getTableRow (). get (1) .getText (); getLastRowData (): promise.Promise retourneer this.getTableRow (). last (). getText (); / * app-add-paste tag * / getAddPasteTag (): ElementFinder return this.getPastebin (). element (by.tagName ('app-add-paste')); isAddPasteTagPresent (): promise.Promise retourneer this.getAddPasteTag (). isPresent ();
Laten we bespreken wat we tot nu toe hebben geleerd. Protractor's API retourneert objecten en we zijn tot nu toe drie soorten objecten tegengekomen. Zij zijn:
Kortom, element() geeft een ElementFinder terug, en element (). Alle geeft een ElementArrayFinder terug. U kunt de locators gebruiken (by.css, by.tagName, enz.) om de locatie van het element in de DOM te vinden en door te geven element() of element.all ().
ElementFinder en ElementArrayFinder kunnen dan worden geketend met acties, zoals is aanwezig(), getText (), Klik(), enz. Deze methoden geven een belofte terug die wordt opgelost wanneer die specifieke actie is voltooid.
De reden waarom we geen keten hebben dan()s in onze test is omdat Protractor er intern voor zorgt. De tests lijken synchroon te zijn, ook al zijn ze dat niet; daarom is het eindresultaat een lineaire codeerervaring. Ik raad echter aan asynchrone te gebruiken / syntaxis af te wachten om ervoor te zorgen dat de code toekomstbestendig is.
Je kunt meervoudig ketenen ElementFinder objecten, zoals hieronder getoond. Dit is vooral handig als de DOM meerdere selectors met dezelfde naam heeft en we de juiste moeten selecteren.
getTable (): ElementFinder return this.getPastebin (). element (by.css ('table')); Nu we de code voor het paginaobject klaar hebben, laten we het in onze spec importeren. Hier is de code voor onze eerste tests.
/ * Pad: e2e / mainPage.e2e-spec.ts * / import Pastebin van './page-objects/pastebin.po'; importeer browser, gradenboog van 'gradenboog'; / * Te testen scenario's 1. Pastebin-pagina zou een kop met tekst moeten tonen Pastebin-toepassing 2. Het zou een tabelkop moeten hebben 3. De tabel zou rijen moeten hebben 4. app-add-paste-tag zou moeten bestaan * / beschrijven ('Pastebin-pagina ', () => const mainPage: Pastebin = new Pastebin (); beforeEach (() => mainPage.navigateToHome ();); it (' zou de kop Pastebin Application 'moeten weergeven, () => verwachten (mainPage.getPastebinHeading ()). toEqual ("Pastebin Application");); it ('should have a table header', () => expect (mainPage.getTableHeader ()). ToContain ("id Title Language Code ");) it ('tabel moet minimaal één rij hebben', () => verwacht (mainPage.getFirstRowData ()) .Contain (" Hello world ");) it ('zou de app moeten hebben toevoegen -paste tag ', () => expect (mainPage.isAddPasteTagPresent ()). toBeTruthy ();));Tests moeten zo worden georganiseerd dat de algemene structuur zinvol en rechtlijnig lijkt. Hier zijn enkele eigenzinnige richtlijnen die u in gedachten moet houden tijdens het organiseren van E2E-tests.
navigateToHome ()), maak een basispagina-object. Andere paginamodellen kunnen erven van het basispaginamodel. Volgens de bovenstaande richtlijnen, hier is wat de pagina-objecthiërarchie en de bestandsorganisatie eruit zou moeten zien.
We hebben het al behandeld pastebin.po.ts en mainPage.e2e-spec.ts. Dit zijn de rest van de bestanden.
/ * pad: e2e / page-objects / base.po.ts * / import browser, op, element, beloven, ElementFinder, ElementArrayFinder van 'protractor'; exportklasse Base / * navigatiemethoden * / navigateToHome (): promise.Promisereturn browser.get ('/'); navigateToAbout (): promise.Promise return browser.get ('/ about'); navigateToContact (): promise.Promise return browser.get ('/ contact'); / * Bespotten gegevens voor het maken van een nieuwe plakken en bewerken van bestaande plakken * / getMockPaste (): elke let paste: any = title: "Something here", taal: "Ruby", plak: "Test" return paste; getEditedMockPaste (): any let paste: any = title: "Paste 2", language: "JavaScript", plak: "Test2" return paste; / * Methoden gedeeld door addPaste en viewPaste * / getInputTitle (): ElementFinder return element (by.name ("title")); getInputLanguage (): ElementFinder returnelement (by.name ("taal")); getInputPaste (): ElementFinder return element (by.name ("paste"));
Blauwdruk voor het onderdeel AddPaste/ * Pad: e2e / page-objects / add-paste.po.ts * / import browser, op, element, beloven, ElementFinder, ElementArrayFinder van 'protractor'; importeer Base van './base.po'; exportklasse AddPaste verlengt Base getAddPaste (): ElementFinder returnelement (by.tagName ('app-add-paste')); / * Maak knop Plakken * / getCreateButton (): ElementFinder return this.getAddPaste (). Element (by.buttonText ("create Paste")); isCreateButtonPresent (): promise.Promise return this.getCreateButton (). isPresent (); clickCreateButton (): promise.Promise return this.getCreateButton (). klik (); / * Maak modaliteit Plakken * / getCreatePasteModal (): ElementFinder return this.getAddPaste (). Element (by.id ("source-modal")); isCreatePasteModalPresent (): promise.Promise retourneer this.getCreatePasteModal (). isPresent (); / * Save-knop * / getSaveButton (): ElementFinder return this.getAddPaste (). Element (by.buttonText ("Save")); clickSaveButton (): promise.Promise return this.getSaveButton (). klik (); / * Knop Sluiten * / getCloseButton (): ElementFinder return this.getAddPaste (). Element (by.buttonText ("Close")); clickCloseButton (): promise.Promise return this.getCloseButton (). klik (); / * Krijg Input Paste-waarden in het Modal-venster * / getInputPasteValues (): Promise let inputTitle, inputLanguage, inputPaste; // Retourneer de invoerwaarden nadat de belofte is opgelost // Houd er rekening mee dat this.getInputTitle (). GetText niet werkt // Gebruik getAttribute ('waarde') retourneer in plaats daarvan Promise.all ([this.getInputTitle (). GetAttribute ( "waarde"), this.getInputLanguage (). getAttribute ("value"), this.getInputPaste (). getAttribute ("value")]) .then ((values) => return values;); / * Voeg een nieuwe Paste * / addNewPaste () toe: any let newPaste: any = this.getMockPaste (); // Stuur invoerwaarden this.getInputTitle (). SendKeys (newPaste.title); this.getInputLanguage () .element (by.cssContainingText ('option', newPaste.language)). click (); . This.getInputPaste () Sendkeys (newPaste.paste); // Converteer het paste-object naar een array. Retourneer Object.keys (newPaste) .map (key => newPaste [key]); / * Pad: e2e / addNewPaste.e2e-spec.ts * / import Pastebin van './page-objects/pastebin.po'; import AddPaste uit './page-objects/add-paste.po'; importeer browser, gradenboog van 'gradenboog'; / * Te testen scenario's 1. AddPaste-pagina moet een knop hebben wanneer erop wordt geklikt, moet een modaal venster presenteren 2. Het modaal venster zou de nieuwe waarden moeten accepteren en opslaan 4. De opgeslagen gegevens zouden in de MainPage 3 moeten verschijnen. werk * / beschrijven ('Toevoegen-nieuwe-plakken-pagina', () => const addPastePage: AddPaste = nieuwe AddPaste (); const mainPage: Pastebin = new Pastebin (); beforeEach (() => addPastePage.navigateToHome ( );); it ('moet een knop Maken plakken en een modaal venster hebben', () => verwachten (addPastePage.isCreateButtonPresent ()). toBeTruthy ("De knop zou moeten bestaan"); expect (addPastePage.isCreatePasteModalPresent () ) .toBeFalsy ("Het modale venster zou niet moeten verschijnen, nog niet!"); addPastePage.clickCreateButton (); expect (addPastePage.isCreatePasteModalPresent ()). toBeTruthy ("Het modale venster zou nu moeten verschijnen");); ("moet invoerwaarden accepteren en opslaan", () => addPastePage.clickCreateButton (); const emptyInputValues = ["", "", ""]; expect (addPastePage.getInputPasteValues ()). toEqual (EmptyInputValues); const newInputValues = addPastePage.addNewPaste (); verwachten (addPastePage.getInputPasteValues ()) toEqual (newInputValues).; addPastePage.clickSaveButton (); verwachten (addPastePage.isCreatePasteModalPresent ()). toBeFalsy ("Het modale venster zou moeten verdwijnen"); verwacht (mainPage.getLastRowData ()) .ConContain ("Something here"); ); it ("sluitknop zou moeten werken", () => addPastePage.clickCreateButton (); addPastePage.clickCloseButton (); expect (addPastePage.isCreatePasteModalPresent ()). toBeFalsy ("Het modale venster zou moeten verdwijnen");); ); Er ontbreken echter een aantal dingen: de tests voor de Bekijk Paste knop en het modale venster dat opduikt na het klikken op de knop. Ik ga dit verlaten als een oefening voor jou. Ik zal je echter een hint geven.
De structuur van de pagina-objecten en de specificaties voor de ViewPastePage zijn vergelijkbaar met die van de AddPastePage.
Blauwdruk voor de ViewPaste-componentDit zijn de scenario's die u moet testen:
Probeer waar mogelijk de richtlijnen te volgen. Als u twijfelt, schakelt u naar de laatste tak om de definitieve versie van de code te bekijken.
Dus daar heb je het. In dit artikel hebben we het schrijven van end-to-end-tests voor onze hoekapplicatie met gradenboog behandeld. We begonnen met een discussie over eenheidstesten versus e2e-tests, en daarna leerden we over het instellen, configureren en uitvoeren van gradenboog. De rest van de tutorial concentreerde zich op het schrijven van echte tests voor de demo Pastebin-applicatie.
Laat me je gedachten en ervaringen over het schrijven van tests met behulp van de gradenboog of het schrijven van tests voor Angular in het algemeen. Ik zou ze graag willen horen. Bedankt voor het lezen!
