Wat is gradenboogtesten?
PROTRACTOR is een automatisering en end-to-end gedragsgestuurde testtool die een belangrijke rol speelt bij het testen van AngularJS-applicaties en werkt als een oplossingsintegrator die krachtige technologieën combineert zoals selenium, jasmijn, webstuurprogramma, enz. Het doel van gradenboogtesten is niet alleen om AngularJS-applicaties te testen, maar ook voor het schrijven van geautomatiseerde regressietests voor normale webapplicaties.
In deze tutorial voor beginners leer je:
- Waarom hebben we gradenboogkader nodig?
- Gradenboog Installatie
- Voorbeeld van AngularJS-applicatietests met Gradenboog
- Uitvoering van de code
- Genereer rapporten met Jasmine Reporters
Waarom hebben we gradenboogkader nodig?
JavaScript wordt in bijna alle webapplicaties gebruikt. Naarmate de applicaties groeien, neemt JavaScript ook toe in omvang en complexiteit. In dat geval wordt het voor Testers een lastige taak om de webapplicatie voor verschillende scenario's te testen.
Soms is het moeilijk om de webelementen in AngularJS-applicaties vast te leggen met JUnit of Selenium WebDriver.
Gradenboog is een NodeJS-programma dat is geschreven in JavaScript en wordt uitgevoerd met Node om de webelementen in AngularJS-applicaties te identificeren, en het gebruikt ook WebDriver om de browser te besturen met gebruikersacties.
Oké, goed, laten we nu bespreken wat precies een AngularJS-applicatie is?
AngularJS-applicaties zijn webapplicaties die uitgebreide HTML-syntaxis gebruiken om webapplicatiecomponenten uit te drukken. Het wordt voornamelijk gebruikt voor dynamische webapplicaties. Deze applicaties gebruiken minder en flexibele code in vergelijking met normale webapplicaties.
Waarom kunnen we Angular JS-webelementen niet vinden met de Normal Selenium Web-driver?
Angular JS-applicaties hebben enkele extra HTML-attributen zoals ng-repeater, ng-controller, ng-model…, enz. Die niet zijn opgenomen in Selenium-locators. Selenium kan die webelementen niet identificeren met behulp van Selenium-code. Dus, gradenboog bovenop selenium kan deze attributen in webapplicaties verwerken en besturen.
De gradenboog is een end-to-end testraamwerk voor Angular JS-gebaseerde applicaties. Terwijl de meeste frameworks zich richten op het uitvoeren van unit-tests voor Angular JS-applicaties, concentreert Protractor zich op het testen van de feitelijke functionaliteit van een applicatie.
Voordat we Gradenboog starten, moeten we het volgende installeren:
- Selenium
U kunt de Selenium-installatiestappen vinden in de volgende links, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
NodeJS Installation, we moeten NodeJS installeren om Protractor te installeren. U vindt deze installatiestappen in de volgende link. (https://www.guru99.com/download-install-node-js.html)
Gradenboog Installatie
Stap 1) Open de opdrachtprompt en typ "npm install -g gradenboog" en druk op Enter .
De bovenstaande opdracht downloadt de benodigde bestanden en installeert Protractor op het clientsysteem.
Stap 2) Controleer de installatie en versie met " Gradenboog --versie ". Als dit lukt, wordt de versie weergegeven zoals in de onderstaande schermafbeelding. Als dit niet het geval is, voert u stap 1 opnieuw uit.
(Stappen 3 en 4 zijn optioneel, maar worden aanbevolen voor een betere praktijk)
Stap 3) Werk de webstuurprogrammabeheerder bij. De webstuurprogrammabeheerder wordt gebruikt om de tests uit te voeren met de hoekige webapplicatie in een specifieke browser. Nadat Gradenboog is geïnstalleerd, moet de webstuurprogrammabeheerder worden bijgewerkt naar de nieuwste versie. Dit kan worden gedaan door de volgende opdracht uit te voeren in de opdrachtprompt.
webdriver-manager update
Stap 4) Start de webstuurprogrammabeheerder. Met deze stap wordt de webstuurprogrammabeheerder op de achtergrond uitgevoerd en wordt naar alle tests geluisterd die via gradenboog worden uitgevoerd.
Nadat Gradenboog is gebruikt om een test uit te voeren, wordt de webdriver automatisch geladen en wordt de test in de relevante browser uitgevoerd. Om de webstuurprogrammabeheerder te starten, moet de volgende opdracht worden uitgevoerd vanaf de opdrachtprompt.
webdriver-manager start
Als je nu in je browser naar de volgende URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) gaat, zul je de webstuurprogrammabeheerder op de achtergrond zien draaien.
Voorbeeld van AngularJS-applicatietests met Gradenboog
Gradenboog heeft twee bestanden nodig om te draaien, een specificatiebestand en een configuratiebestand .
- Configuratiebestand : dit bestand helpt gradenboog waar de testbestanden zijn geplaatst (specs.js) en om te praten met de Selenium-server (Selenium-adres). Chrome is de standaardbrowser voor gradenboog.
- Spec-bestand: Dit bestand bevat de logica en locators voor interactie met de applicatie .
Stap 1) We moeten inloggen op https://angularjs.org en de tekst invoeren als "GURU99" in het tekstvak "Voer hier een naam in".
Stap 2) In deze stap,
- Voer de naam 'Guru99' in
- In de uitvoertekst wordt "Hello Guru99" gezien.
Stap 3) Nu moeten we de tekst van de webpagina vastleggen nadat we de naam hebben ingevoerd en moeten we verifiëren met de verwachte tekst .
Code:
We moeten het configuratiebestand (conf.js) en het spec-bestand (spec.js) voorbereiden zoals hierboven vermeld.
Logica van spec.js:
describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello GURU99!');});});
Code Verklaring van spec.js:
- beschrijven ('Voer GURU99-naam in', function ()
De beschreven syntaxis is van het Jasmine-framework. Hier definieert "beschrijven" ('Voer GURU99-naam in') typisch componenten van een applicatie, die een klasse of functie kunnen zijn, enz. In de codesuite genaamd "Voer GURU99" is het gewoon een string en geen code.
- it ('zou een naam moeten toevoegen als GURU99', function ()
- browser.get ('https://angularjs.org')
Net als in de Selenium Webdriver-browser. Zal een nieuwe browserinstantie openen met de genoemde URL.
- element (by.model ('uwNaam')). sendKeys ('GURU99')
Hier vinden we het webelement met behulp van de modelnaam als "uwnaam", wat de waarde is van "ng-model" op de webpagina. Bekijk de screenshot hieronder-
- var guru = element (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Hier vinden we het webelement met XPath en slaan de waarde op in een variabele "guru" .
- verwachten (guru.getText ()). toEqual ('Hallo GURU99!')
Ten slotte verifiëren we de tekst die we van de webpagina hebben gekregen (met behulp van gettext ()) met de verwachte tekst.
Logica van conf.js:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Code Uitleg van conf.js
- seleniumAddress: 'http: // localhost: 4444 / wd / hub'
Het configuratiebestand vertelt Gradenboog de locatie van het Selenium-adres om met Selenium WebDriver te praten.
- specificaties: ['spec.js']
Deze regel vertelt Gradenboog de locatie van testbestanden spec.js
Uitvoering van de code
Hier zullen we eerst het mappad wijzigen of naar de map navigeren waar de confi.js en spec.js in ons systeem zijn geplaatst .
Volg de volgende stap.
Stap 1) Open de opdrachtprompt.
Stap 2) Zorg ervoor dat de selenium-webstuurprogrammabeheerder actief is. Geef daarvoor het commando "webdriver-manager start" en druk op Enter .
(Als selenium-webstuurprogramma niet actief is, kunnen we niet doorgaan met een test omdat Gradenboog het webstuurprogramma voor de webtoepassing niet kan vinden)
Stap 3) Open een nieuwe opdrachtprompt en geef de opdracht als "gradenboog conf.js" om het configuratiebestand uit te voeren.
Uitleg:
- Hier zal Gradenboog het configuratiebestand uitvoeren met het opgegeven specificatiebestand erin.
- We kunnen de selenium-server zien draaien op " http: // localhost: 4444 / wd / hub " die we hebben opgegeven in het conf.js-bestand.
- Hier kunt u ook het resultaat zien hoeveel er zijn gepasseerd en mislukkingen zoals in de bovenstaande schermafbeelding .
Goed, we hebben het resultaat geverifieerd wanneer het is geslaagd of zoals verwacht. Laten we nu ook het resultaat van de mislukking bekijken.
Stap 1) Openen en wijzigen zal naar verwachting resulteren in spec.js naar "'Hallo verandering GURU99" zoals hieronder.
Na wijziging in spec.js :
describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello change GURU99!');});});
Stap 2) Sla het spec.js-bestand op en herhaal de bovenstaande stappen van de sectie "Uitvoering van de code"
Voer nu de bovenstaande stappen uit.
Resultaat:
We kunnen het resultaat zien als mislukt aangegeven met 'F' in de schermafbeelding met de reden als "Verwacht 'Hallo GURU99!' gelijk aan 'Hallo verandering GURU99!' Het laat ook zien hoeveel fouten er zijn opgetreden bij het uitvoeren van code.
Kunnen we hetzelfde bereiken met de Selenium-webdriver?
Soms kunnen we de webelementen van AngularJS-applicaties identificeren met behulp van XPath of CSS-selector van Selenium-webstuurprogramma. Maar in AngularJS-applicaties worden de elementen dynamisch gegenereerd en gewijzigd. Gradenboog is dus de betere gewoonte om met AngularJS-applicaties te werken.
Genereer rapporten met Jasmine Reporters
Gradenboog ondersteunt Jasmine-verslaggevers om testrapporten te genereren. In deze sectie gebruiken we JunitXMLReporter om automatisch testuitvoeringsrapporten in XML-indeling te genereren.
Volg de onderstaande stappen om rapporten in XML-indeling te genereren.
Installatie van Jasmine Reporter
Er zijn twee manieren waarop u dit kunt doen, lokaal of wereldwijd
- Open de opdrachtprompt en voer de volgende opdracht uit om lokaal te installeren
npm install --save-dev jasmine-reporters@^2.0.0
Bovenstaande opdracht zal jasmine-rapporten node-modules lokaal installeren, betekent vanuit de map waar we de opdracht uitvoeren in de opdrachtprompt.
- Open de opdrachtprompt en voer de volgende opdracht uit voor een algemene installatie
npm install -g jasmine-reporters@^2.0.0
In deze tutorial zullen we de jasmijnreporters lokaal installeren .
Stap 1) Voer de opdracht uit.
npm install --save-dev jasmine-reporters@^2.0.0
vanaf de opdrachtprompt zoals hieronder.
Stap 2) Controleer de installatiemappen in de directory . "Node_modules" zou beschikbaar moeten zijn als het met succes is geïnstalleerd zoals in onderstaande snapshot.
Stap 3) Voeg de volgende gekleurde code toe aan een bestaand conf.js-bestand
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',capabilities: {'browserName': 'firefox'},specs: ['spec.js'],framework: 'jasmine2' ,onPrepare: function() {var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true));}};
Toelichting code:
In code genereren we het rapport " JUnitXmlReporter " en geven we het pad op waar het rapport moet worden opgeslagen.
Stap 4) Open de opdrachtprompt en voer de opdracht gradenboog conf.js. uit.
Stap 5) Wanneer u de bovenstaande code uitvoert, wordt junitresults.xml gegenereerd in het genoemde pad.
Stap 6) Open de XML en verifieer het resultaat. Het foutbericht wordt weergegeven in het resultatenbestand omdat onze testcase is mislukt. De testcase is mislukt omdat het verwachte resultaat van "spec.js" niet overeenkomt met het werkelijke resultaat van een webpagina
Stap 7) Gebruik het bestand junitresult.xml voor bewijzen of resultaatbestanden.
Overzicht:
Hoewel Selenium sommige dingen kan doen die gradenboog doet, is de gradenboog de industriële standaard en de beste praktijk om AngularJS-toepassingen te testen. Een gradenboog kan ook meerdere mogelijkheden erin beheren en de dynamische veranderingen van webelementen verwerken met behulp van ng-model, ng-click…, enz… (Welke selenium kan niet doen).
Dit artikel is bijgedragen door Ranjith Kumar Enishetti