Tutorial til vinkelmålertest: Automationsværktøjsramme

Hvorfor har vi brug for Protractor Framework?

JavaScript bruges i næsten alle webapplikationer. Efterhånden som applikationerne vokser, JavaScript også øges i størrelse og kompleksitet. I sådanne tilfælde bliver det en vanskelig opgave for testere at teste webapplikationen til forskellige scenarier.

Nogle gange er det svært at fange webelementerne i AngularJS-applikationer ved hjælp af JUnit or Selenium WebDriver.

Protractor er et NodeJS-program, som er skrevet i JavaScript og kører med Node for at identificere webelementerne i AngularJS-applikationer, og det bruger også WebDriver til at styre browseren med brugerhandlinger.

Okay, lad os nu diskutere, hvad der præcist er en AngularJS-applikation?

AngularJS-applikationer er webapplikationer, som bruger udvidet HTMLs syntaks til at udtrykke webapplikationskomponenter. Det bruges hovedsageligt til dynamiske webapplikationer. Disse applikationer bruger mindre og fleksibel kode sammenlignet med normale webapplikationer.

Hvorfor kan vi ikke finde Angular JS-webelementer ved hjælp af Normal Selenium Web driver?

Angular JS-applikationer har nogle ekstra HTML-attributter som ng-repeater, ng-controller, ng-model.. osv., som ikke er inkluderet i Selenium lokatorer. Selenium er ikke i stand til at identificere disse webelementer ved hjælp af Selenium kode. Så vinkelmåler på toppen af Selenium kan håndtere og kontrollere disse attributter i webapplikationer.

Gradestokken er en ende-til-ende-testramme for Angular JS-baserede applikationer. Mens de fleste rammer fokuserer på at udføre enhedstests for Angular JS-applikationer, fokuserer Protractor på at teste den faktiske funktionalitet af en applikation.

Før vi starter Protractor, skal vi installere følgende:

1. SeleniumDu kan finde Selenium Installationstrin i følgende links, (https://www.guru99.com/installing-selenium-webdriver.html )
2. NPM (Node.js)NodeJS-installation, vi skal installere NodeJS for at installere Protractor. Du kan finde disse installationstrin på følgende link. ( https://www.guru99.com/download-install-node-js.html )

Montering af vinkelmåler

Trin 1) Åbn kommandoprompten og skriv "npm install -g vinkelmåler" og tryk på Enter.

Ovenstående kommando vil downloade de nødvendige filer og installere Protractor på klientsystemet.

Trin 2) Tjek installationen og versionen vha "Vinkelmåler -version". Hvis det lykkes, vil det vise versionen som i nedenstående skærmbillede. Hvis ikke, udfør trin 1 igen.

(Trin 3 og 4 er valgfrie, men anbefales for bedre praksis)

Trin 3) Opdater webdrivermanageren. Webdrivermanageren bruges til at køre testene mod den kantede webapplikation i en bestemt browser. Efter at Protractor er installeret, skal webdrivermanageren opdateres til den nyeste version. Dette kan gøres ved at køre følgende kommando i kommandoprompten.

webdriver-manager update

Trin 4) Start web driver manager. Dette trin vil køre webdrivermanageren i baggrunden og vil lytte til alle test, der kører via vinkelmåler.

Når Protractor er brugt til at køre en test, vil webdriveren automatisk indlæse og køre testen i den relevante browser. For at starte webdrivermanageren skal følgende kommando udføres fra kommandoprompten.

webdriver-manager start

Hvis du nu går til følgende URL (http://localhost:4444/wd/hub/static/resource/hub.html) i din browser, vil du faktisk se Web-drivermanageren køre i baggrunden.

Prøve AngularJS applikationstest ved hjælp af Protractor

Protractor skal bruge to filer for at køre, en spec fil og konfiguration fil.

1. Konfigurationsfil: Denne fil hjælper vinkelmåleren til, hvor testfilerne er placeret (specs.js) og til at tale med Selenium server (Selenium Adresse). Chrome er standardbrowseren for Protractor.

2. Spec fil: Denne fil indeholder logikken og lokalisatorerne til at interagere med applikationen.

Trin 1) Vi skal logge ind https://angularjs.org og indtast teksten som "GURU99" i tekstboksen "Indtast et navn her".

Trin 2) I dette trin,

1. Indtastede navnet "Guru99"
2. I outputteksten ses "Hej Guru99".

Trin 3) Nu skal vi fange teksten fra websiden efter at have indtastet navnet og skal verificere med den forventede tekst.

Kode:

Vi skal forberede konfigurationsfilen (conf.js) og spec-fil (spec.js) som nævnt ovenfor.

Logik af 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!');
  });
});

Kode Forklaring af spec.js:

1. beskrive('Enter GURU99 Name', function()Describe-syntaksen er fra Jasmine frameworket. Her definerer "describe" ('Enter GURU99 Name') typisk komponenter i en applikation, som kan være en klasse eller funktion osv. I kodepakken kaldet "Enter GURU99", det er bare en streng og ikke en kode.
2. it('skal tilføje et navn som GURU99', funktion()
3. browser.get('https://angularjs.org')Som som i Selenium Webdriver browser.get åbner en ny browserinstans med nævnte URL.
4. element(by.model('ditnavn')).send nøgler('GURU99') Her finder vi webelementet ved at bruge modelnavnet som "ditnavn", hvilket er værdien af ​​"ng-model" på websiden. Tjek skærmbilledet nedenfor-

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Her finder vi webelementet vha. XPath og gemme dens værdi i en variabel "guru".
6. forvente(guru.getText()).til Lige('Hej GURU99!') Til sidst bekræfter vi teksten, som vi har fået fra websiden (ved hjælp af gettext() ) med forventet tekst .

Logik af conf.js:

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

Kode Forklaring af conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub' Konfigurationsfilen fortæller vinkelmålerens placering af Selenium Adresse at tale med Selenium WebDriver.
2. specs: ['spec.js']Denne linje fortæller Protractor placeringen af ​​testfiler spec.js

Udførelse af kodekset

Her vil vi først ændre biblioteksstien eller navigere til den mappe, hvor confi.js og spec.js er placeret i vores system.

Følg følgende trin.

Trin 1) Åbn kommandoprompten.

Trin 2) Sørg for, at selenium web driver manager er oppe og kører. For at give kommandoen som "webdriver-manager start" og tryk på Enter.

(Hvis selen web-driveren ikke er oppe at køre, kan vi ikke fortsætte med en test, da Protractor ikke kan finde webdriveren til at håndtere webapplikationen)

Trin 3) Åbn en ny kommandoprompt og giv kommandoen som "vinkelmåler conf.js" for at køre konfigurationsfilen.

Forklaring:

• Her vil Protractor udføre konfigurationsfilen med en given spec-fil i den.
• Vi kan se selenserveren køre på "http://localhost:4444/wd/hub” som vi har givet i filen conf.js.
• Her kan også se resultatet, hvor mange der er bestået og fejl som i ovenstående skærmbillede.

Fint, vi har verificeret resultatet, når det er bestået eller som forventet. Lad os nu også se på fejlresultatet.

Trin 1) Åbn og ændring forventes at resultere i spec.js til "'Hello change GURU99" som nedenfor.

Efter ændring i 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!');
  });
});

Trin 2) Gem spec.js-filen og gentag ovenstående trin i afsnittet "Udførelse af koden".

Udfør nu ovenstående trin.

Resultat:

Vi kan se resultatet som mislykket angivet med 'F' på skærmbilledet med årsagen som "Forventede 'Hej GURU99!' til at svare til 'Hej skift GURU99!'. Det viser også, hvor mange fejl der opstår ved udførelse af kode.

Kan vi opnå det samme med Selenium web driver?

Nogle gange kan vi identificere webelementerne i AngularJS-applikationer ved hjælp af XPath eller CSS-vælger fra Selenium web driver. Men i AngularJS-applikationer vil elementerne blive genereret og ændret dynamisk. Så Protractor er den bedste praksis at arbejde med AngularJS-applikationer.

Generer rapporter ved hjælp af Jasmine Reporters

Protractor understøtter Jasmine-reportere til at generere testrapporter. I dette afsnit vil vi bruge JunitXMLReporter til at generere testudførelsesrapporter automatisk i XML-format.

Følg nedenstående trin for at generere rapporter i XML-format.

Installation af Jasmine Reporter

Der er to måder, du kan gøre dette på, lokalt eller globalt

1. Åbn kommandoprompten udfør følgende kommando for at installere lokalt

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

Ovenstående kommando vil installere jasmine reports node-moduler lokalt betyder fra den mappe, hvor vi kører kommandoen i kommandoprompten.

2. Åbn kommandoprompten udfør følgende kommando til global installation

npm install –g jasmine-reporters@^2.0.0

I denne tutorial vil vi installere jasmin-reporterne lokalt.

Trin 1) Udfør kommandoen.

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

fra kommandoprompten som nedenfor.

Trin 2) Tjek installationsmapperne i mappen. "Node_modules" bør være tilgængelig, hvis den er installeret med succes som i nedenstående snapshot.

Trin 3) Tilføj følgende farvede kode til en eksisterende conf.js-fil

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)
          );
     }
   };

Forklaring af kode:

I kode genererer vi rapporten "JUnitXmlReporter” og giver stien til, hvor rapporten skal gemmes.

Trin 4) Åbn kommandoprompten og udfør kommandoen vinkelmåler konf.js.

Trin 5) Når du udfører ovenstående kode, vil junitresults.xml blive genereret i nævnte sti.

Trin 6) Åbn XML og bekræft resultatet. Fejlmeddelelsen vises i resultatfilen som vores Test sag er mislykket. Testtilfældet mislykkedes, da det forventede resultat fra "spec.js" ikke matches med det faktiske resultat fra en webside

Trin 7) Brug filen junitresult.xml til beviser eller resultatfiler.

Resumé

Selvom Selenium kan gøre nogle af de ting, som vinkelmåleren gør, er vinkelmåleren den industrielle standard og bedste praksis til at teste AngularJS-applikationer. En vinkelmåler kan også administrere flere muligheder i den og håndtere de dynamiske ændringer af webelementer ved hjælp af ng-model, ng-klik.. osv.. (Hvilket selen ikke kan).