ProtracTor-testhandleiding: framework voor automatiseringstools

⚠️ Melding over afschaffing: Protractor is verouderd en gearchiveerdDe ondersteuning eindigde in augustus 2023 en de Angular CLI liet zijn Pro-versie vallen.tracTor-builder na Angular 15. Kies Toneelschrijver, Cypress, WebdriverIO of TestCafe voor nieuwe end-to-end testenDe onderstaande stappenplan blijft van toepassing op oudere suites.

Waarom hebben we Pro nodig?tracTor-framework?

JavaScripting wordt in vrijwel alle webapplicaties gebruikt. Naarmate de applicaties groeien, JavaScript Ook de omvang en complexiteit nemen toe. In dat geval wordt het voor testers een lastige taak om de webapplicatie te testen op verschillende scenario's.

Soms is het moeilijk om de webelementen in AngularJS-applicaties vast te leggen met behulp van JUnit or Selenium Webstuurprogramma.

ProtracTor is een Node.js-programma dat is geschreven in JavaScript en wordt uitgevoerd met Node om de webelementen in AngularJS-toepassingen te identificeren. Daarnaast wordt WebDriver gebruikt om de browser te besturen met gebruikersacties.

Wat is een AngularJS-applicatie nu precies?

angularjs AngularJS 1.x-applicaties zijn webapplicaties die gebruikmaken van een uitgebreide HTML-syntaxis om webapplicatiecomponenten uit te drukken. Ze worden voornamelijk gebruikt voor dynamische webapplicaties. Deze applicaties gebruiken minder en flexibelere code in vergelijking met normale webapplicaties. Houd er rekening mee dat de ondersteuning voor AngularJS 1.x op 31 december 2021 is beëindigd, waardoor dergelijke applicaties tegenwoordig als verouderd worden beschouwd.

Waarom kunnen we AngularJS-webelementen niet vinden met behulp van de normale zoekfunctie? Selenium WebDriver?

AngularJS-applicaties hebben een aantal extra HTML-attributen zoals ng-repeater, ng-controller, ng-model, enz., die niet standaard zijn opgenomen. Selenium plaatsbepalers. Selenium kan deze webelementen niet identificeren met behulp van Selenium code. Dus, Protractor op de top van Selenium kan deze attributen in webapplicaties beheren en controleren.

ProtracTor is een end-to-end testframework voor op AngularJS gebaseerde applicaties. Waar de meeste frameworks zich richten op het uitvoeren van tests, is Tor een framework voor end-to-end testen. eenheidstests voor AngularJS-applicaties, ProtracTor richt zich op het testen van de daadwerkelijke functionaliteit van een applicatie.

Voordat we beginnen met ProtracOm Tor te installeren, moeten we het volgende installeren:

1. Selenium: je kunt de vinden Selenium installatiestappen in de Selenium Installatiehandleiding voor WebDriver.
2. NPM (Node.js): We moeten Node.js installeren om Pro te kunnen installeren.tractor. Je vindt deze installatiestappen in de Handleiding voor het downloaden en installeren van Node.js.

Protractor Installatie

Stap 1) Open de opdrachtprompt en typ “npm install -g protracTor” en druk op Enter.

Met bovenstaande opdracht worden de benodigde bestanden gedownload en Pro geïnstalleerd.tractor op het clientsysteem, zoals hieronder weergegeven.

Stap 2) Controleer de installatie en versie met behulp van "protractor-versie. ' Als dit lukt, wordt de versie weergegeven zoals in onderstaande schermafbeelding. Als dit niet het geval is, voert u stap 1 opnieuw uit.

(Stappen 3 en 4 zijn optioneel, maar aanbevolen voor betere praktijk)

Stap 3) Update de WebDriver-manager. De WebDriver-manager wordt gebruikt om de tests voor de Angular-webapplicatie in een specifieke browser uit te voeren. Na ProtracAls Tor is geïnstalleerd, moet de WebDriver-manager worden bijgewerkt naar de nieuwste versie. Dit kan worden gedaan door de volgende opdracht in de opdrachtprompt uit te voeren.

webdriver-manager update

De driverbestanden worden gedownload zoals hieronder weergegeven.

Stap 4) Start de WebDriver-manager. Deze stap zorgt ervoor dat de WebDriver-manager op de achtergrond wordt uitgevoerd en luistert naar alle tests die via pro worden uitgevoerd.tracdoel.

Zodra een test is uitgevoerd, laadt de WebDriver deze automatisch in de betreffende browser. Start de manager met het onderstaande commando.

webdriver-manager start

De console meldt het luisteradres.

Als je nu naar het volgende gaat: URL (http://localhost:4444/wd/hub/static/resource/hub.htmlAls u dit in uw browser doet, ziet u de WebDriver-manager daadwerkelijk op de achtergrond draaien.

Testen van een voorbeeld van een AngularJS-applicatie met Protractor

Met de coureurmanager actief, ProtracTor heeft twee bestanden nodig om te draaien, een spec file en configuratie bestand.

1. ConfiguratiebestandDit bestand helpt professionalstractor naar de locatie waar de testbestanden zich bevinden (specs.js) en om te communiceren met Selenium server (Selenium Adres). Chrome is de standaardbrowser voor Protracdoel.
2. Specificatiebestand: Dit bestand bevat de logica en locators voor interactie met de applicatie.

Stap 1) We moeten open gaan https://angularjs.org en voer de tekst "GURU99" in het tekstvak "Voer hier een naam in".

Stap 2) In deze stap,

1. De naam “ is ingevoerdGuru99 "
2. In de uitvoertekst: "Hallo" Guru99″ is te zien.

Stap 3) Nu moeten we de tekst van de webpagina vastleggen nadat we de naam hebben ingevoerd en deze verifiëren met de verwachte tekst.

Code:

We moeten het configuratiebestand voorbereiden (conf.js) en spec-bestand (spec.js) 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 Uitleg van spec.js:

1. beschrijven('Voer de GURU99-naam in', functie() De beschrijvingssyntaxis is afkomstig van de Jasmine-frameworkHier definieert "describe" ('Enter GURU99 Name') doorgaans componenten van een applicatie, zoals een klasse of functie. In de codesuite genaamd "Enter GURU99" is het echter slechts een tekenreeks en geen code.
2. it('moet een naam toevoegen als GURU99', function()
3. browser.get('https://angularjs.org')Zoals in Selenium WebDriver browser.get opent een nieuwe browserinstantie met de genoemde gegevens. URL.
4. element(door.model('uwnaam')).stuursleutels('GURU99') Hier vinden we het web-element met behulp van de modelnaam "yourName", wat de waarde is van "ng-model" op de webpagina. Bekijk de schermafbeelding hieronder.

5. 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 de waarde ervan opslaan in een variabele “goeroe”.
6. verwachten(goeroe.getText()).gelijk maken('Hallo GURU99!') Tenslotte verifiëren we de tekst die we van de webpagina hebben gekregen (met behulp van gettext() ) met verwachte tekst .

Logica van conf.js:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

Code Uitleg van conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'Het configuratiebestand vertelt Protracvoor de locatie van Selenium Adres om mee te praten Selenium Webstuurprogramma.
2. specificaties: ['spec.js']Deze regel vertelt Protractor de locatie van testbestanden spec.js

uitvoering van de Code

Navigeer eerst naar de map waar de bestanden conf.js en spec.js zich bevinden en volg daarna de onderstaande stappen..

Stap 1) Open de opdrachtprompt.

Stap 2) Zorg ervoor Selenium WebDriver Manager is gestart en actief. Voer hiervoor het commando "webdriver-manager start" in en druk op Enter..

(Als Selenium WebDriver is niet actief, we kunnen de test als Pro niet uitvoeren.tracTor kan de WebDriver niet vinden om de webapplicatie af te handelen.

Stap 3) Open een nieuwe opdrachtprompt en geef de opdracht as "protractor conf.js” om het configuratiebestand uit te voeren. De uitvoering wordt voltooid zoals hieronder weergegeven.

Uitleg:

• Hier ProtracTor voert het configuratiebestand uit met daarin het opgegeven specificatiebestand.
• We kunnen de zien Selenium server draait op “http://localhost:4444/wd/hub”die we hebben gegeven in het conf.js-bestand.
• Hier kunt u ook het resultaat zien, hoeveel er zijn doorgegeven en de mislukkingen, zoals in de bovenstaande schermafbeelding.

Een voldoende resultaat is nu geverifieerd. Bekijk vervolgens een onvoldoende resultaat.

Stap 1) Openen en wijzigen zou moeten resulteren in spec.js, zodat het eruitziet als “'Hello change 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 bestand spec.js op en herhaal de bovenstaande stappen van "Uitvoering van de Code" sectie

Voer nu de bovenstaande stappen uit.

Resultaat:

We kunnen het resultaat als mislukt zien, 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 optreden tijdens het uitvoeren van de code.

Kunnen we hetzelfde bereiken met Selenium WebDriver?

Soms kunnen AngularJS-elementen worden gevonden met behulp van XPath- of CSS-selectors. Selenium WebDriver. Deze elementen worden echter dynamisch gegenereerd en opnieuw gekoppeld, dus ProtracTor was de veiligere optie voor AngularJS-suites.

Genereer rapporten met Jasmine Reporters

ProtracTor ondersteunt Jasmine-reporters. Deze sectie maakt gebruik van JUnitGebruik XmlReporter om automatisch testuitvoeringsrapporten in XML-formaat te genereren, door de onderstaande stappen te volgen.

Installatie van Jasmijn Reporter

Er zijn twee opties: lokaal of wereldwijd.

1. Open de opdrachtprompt en voer de volgende opdracht uit om lokaal te installeren

npm install --save-dev jasmine-reporters@^2.0.0

Het bovenstaande commando installeert jasmine-reporters lokaal, in de map waarin het wordt uitgevoerd.

2. Open de opdrachtprompt en voer de volgende opdracht uit voor een wereldwijde installatie

npm install –g jasmine-reporters@^2.0.0

Hier zijn de verslaggevers lokaal gestationeerd..

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 map. "Node_modules" zou beschikbaar moeten zijn als het succesvol is geïnstalleerd, zoals in onderstaande momentopname.

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 geef het pad op waar het rapport moet worden opgeslagen.

Stap 4) Open de opdrachtprompt en voer de opdracht uit protractor conf.js.

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 in het resultaatbestand weergegeven als ons Testgeval is mislukt. De testcase is mislukt omdat het verwachte resultaat van "spec.js" niet overeenkomt met het daadwerkelijke resultaat van een webpagina.

Stap 7) Gebruik het bestand junitresult.xml voor bewijs- of resultaatbestanden.

ProtracTor versus moderne alternatieven voor testautomatisering

Sinds ProtracOmdat Tor geen updates meer ontvangt, moeten teams die nieuwe suites plannen, weten hoe het zich verhoudt tot de frameworks waarnaar Angular-projecten nu migreren. De onderstaande tabel vergelijkt ProtracTor met de drie alternatieven die het vaakst voorkomen in de onderstaande veelgestelde vragen.

Teams met een bestaande profspelertracTor Suite werkt over het algemeen het snelst. WebdriverIO, aangezien het een commandostijl heeft en Selenium-gebaseerd chauffeursmanagement blijft dicht bij wat ProtracTor-testers weten dit al. Teams die helemaal opnieuw beginnen, of die de snelste testruns nodig hebben, kiezen vaker voor... Cypress Of toneelschrijver.

Veelgestelde vragen