ProtracTor-Testing-Tutorial: Framework für Automatisierungstools

Warum brauchen wir Profis?tracTor-Framework?

JavaSkripte werden in fast allen Webanwendungen verwendet. Mit zunehmendem Umfang der Anwendungen JavaSkript nimmt auch an Größe und Komplexität zu. In diesem Fall wird es für Tester zu einer schwierigen Aufgabe, die Webanwendung für verschiedene Szenarien zu testen.

Manchmal ist es schwierig, die Webelemente in AngularJS-Anwendungen zu erfassen JUnit or Selenium WebDriver.

Protractor ist ein NodeJS-Programm, das in geschrieben ist JavaDas Skript wird mit Node ausgeführt, um die Webelemente in AngularJS-Anwendungen zu identifizieren. Außerdem wird WebDriver verwendet, um den Browser mit Benutzeraktionen zu steuern.

Ok, gut, jetzt wollen wir besprechen, was genau eine AngularJS-Anwendung ist.

AngularJS-Anwendungen sind Webanwendungen, die die erweiterte HTML-Syntax verwenden, um Webanwendungskomponenten auszudrücken. Es wird hauptsächlich für dynamische Webanwendungen verwendet. Diese Anwendungen verwenden im Vergleich zu normalen Webanwendungen weniger und flexibleren Code.

Warum können wir mit Normal keine Angular JS-Webelemente finden? Selenium Webtreiber?

Angular JS-Anwendungen verfügen über einige zusätzliche HTML-Attribute wie ng-repeater, ng-controller, ng-model usw., die nicht in enthalten sind Selenium Ortungsgeräte. Selenium ist nicht in der Lage, diese Webelemente mithilfe von zu identifizieren Selenium Code. Also, ProtracTor auf der Spitze Selenium kann diese Attribute in Webanwendungen verarbeiten und steuern.

Der Profitractor ist ein umfassendes Testframework für AngularJS-basierte Anwendungen. Während sich die meisten Frameworks auf die Durchführung von Unit-Tests für AngularJS-Anwendungen konzentrieren, bietet Protractor konzentriert sich auf das Testen der tatsächlichen Funktionalität einer Anwendung.

Bevor wir mit Pro beginnentracFür Tor müssen wir Folgendes installieren:

1. SeleniumSie finden die Selenium Installationsschritte finden Sie unter den folgenden Links (https://www.guru99.com/installing-selenium-webdriver.html )
2. NPM (Node.js) NodeJS-Installation: Wir müssen NodeJS installieren, um Pro zu installieren.tractor. Die Installationsschritte finden Sie unter folgendem Link. https://www.guru99.com/download-install-node-js.html )

Protractor Installation

Schritt 1) Eingabeaufforderung öffnen und eingeben „npm install -g protractor“ und drücke Enter.

Der obige Befehl lädt die notwendigen Dateien herunter und installiert Pro.tractor auf dem Client-System.

Schritt 2) Überprüfen Sie die Installation und Version mit "Protractor -version" Bei Erfolg wird die Version wie im folgenden Screenshot angezeigt. Wenn nicht, führen Sie Schritt 1 erneut durch.

(Schritte 3 und 4 sind optional, werden aber zum besseren Üben empfohlen)

Schritt 3) Aktualisieren Sie den WebDriver-Manager. Der WebDriver-Manager wird verwendet, um die Tests der Angular-Webanwendung in einem bestimmten Browser auszuführen. Nach ProtracWenn Tor installiert ist, muss der WebDriver Manager auf die neueste Version aktualisiert werden. Dies kann durch Ausführen des folgenden Befehls in der Eingabeaufforderung erfolgen.

webdriver-manager update

Schritt 4) Starten Sie den WebDriver-Manager. Dieser Schritt führt den WebDriver-Manager im Hintergrund aus und überwacht alle Tests, die über Pro ausgeführt werden.tracThor.

Once ProtracTor wird verwendet, um beliebige Tests auszuführen. Der Webdriver lädt und startet den Test automatisch im entsprechenden Browser. Um den Webdriver-Manager zu starten, muss der folgende Befehl in der Kommandozeile ausgeführt werden.

webdriver-manager start

Wenn Sie nun zu Folgendem gehen URL (http://localhost:4444/wd/hub/static/resource/hub.html) in Ihrem Browser sehen Sie tatsächlich, dass der Web-Treibermanager im Hintergrund läuft.

Beispieltest einer AngularJS-Anwendung mit ProtracDo.

ProtracTor benötigt zwei Dateien zum Ausführen, eine spec Datei-und Konfiguration Datei.

1. KonfigurationsdateiDiese Datei hilft Profistracum dorthin zu gelangen, wo sich die Testdateien (specs.js) befinden, und um mit ihnen zu sprechen Selenium Server (Selenium Adresse). Chrome ist der Standardbrowser für Pro.tracThor.

2. Spezifikationsdatei: Diese Datei enthält die Logik und Locators für die Interaktion mit der Anwendung.

Schritt 1) Wir müssen uns anmelden https://angularjs.org und geben Sie den Text „GURU99“ in das Textfeld „Geben Sie hier einen Namen ein“ ein.

Schritt 2) In diesem Schritt

1. Name eingegebenGuru99 "
2. Im Ausgabetext „Hallo“ Guru99″ ist zu sehen.

Schritt 3) Jetzt müssen wir den Text von der Webseite erfassen, nachdem wir den Namen eingegeben haben, und ihn mit dem erwarteten Text vergleichen.

Code:

Wir müssen eine Konfigurationsdatei vorbereiten (conf.js) und Spezifikationsdatei (spec.js) wie oben erwähnt.

Logik von 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 Erläuterung von spec.js:

1. beschreiben(„Geben Sie den GURU99-Namen ein“, Funktion()Die Beschreibungssyntax stammt aus dem Jasmine-Framework. Hier definiert „beschreiben“ („Geben Sie den GURU99-Namen ein“) normalerweise Komponenten einer Anwendung, die eine Klasse oder Funktion usw. sein können. In der Code-Suite Es heißt „Enter GURU99“ und ist nur eine Zeichenfolge und kein Code.
2. it('sollte einen Namen als GURU99 hinzufügen', Funktion()
3. browser.get('https://angularjs.org')Wie in Selenium Webdriver browser.get öffnet eine neue Browserinstanz mit dem angegebenen Inhalt. URL.
4. Element(von.model('IhrName')).sendKeys('GURU99') Hier finden wir das Webelement, das den Modellnamen als „yourName“ verwendet, was dem Wert von „ng-model“ auf der Webseite entspricht. Sehen Sie sich den Screenshot unten an:

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Hier finden wir das Webelement mit XPath und seinen Wert in einer Variablen „guru“ speichern.
6. erwarten(guru.getText()).gleich(„Hallo GURU99!“) Schließlich überprüfen wir den Text, den wir von der Webseite erhalten haben (mit gettext() ), mit dem erwarteten Text.

Logik von conf.js:

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

Code Erläuterung der Datei conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub' Die Konfigurationsdatei teilt Pro mittracfür den Standort von Selenium Adresse zum Gespräch Selenium WebDriver.
2. specs: ['spec.js']Diese Zeile teilt Pro mit, dasstraczum Speicherort der Testdateien spec.js

Ausführung der Code

Hier ändern wir zunächst den Verzeichnispfad oder navigieren zu dem Ordner, in dem die Datei „confi.js“ und „spec.js“ in unserem System abgelegt sind.

Befolgen Sie den folgenden Schritt.

Schritt 1) Öffnen Sie die Eingabeaufforderung.

Schritt 2) Stellen Sie sicher, dass der Selenium Web Driver Manager läuft. Geben Sie dazu den Befehl „webdriver-manager start“ ein und drücken Sie die Eingabetaste..

(Wenn der Selenium WebDriver nicht ausgeführt wird, können wir den Test nicht wie gewohnt durchführen.)trac(Tor kann den Webtreiber zur Verarbeitung der Webanwendung nicht finden)

Schritt 3) Öffnen Sie eine neue Eingabeaufforderung und geben Sie den Befehl als ein "Profitractor conf.js” um die Konfigurationsdatei auszuführen.

Erläuterung:

• Hier Protractor führt die Konfigurationsdatei mit der darin enthaltenen Spezifikationsdatei aus.
• Wir können den Selenium-Server laufen sehen bei „http://localhost:4444/wd/hub” was wir in der Datei conf.js angegeben haben.
• Außerdem können Sie hier das Ergebnis sehen, wie viele bestanden und fehlgeschlagen sind, wie im obigen Screenshot.

Gut, wir haben das Ergebnis überprüft, wenn es bestanden wurde oder wie erwartet. Schauen wir uns nun auch das Fehlerergebnis an.

Schritt 1) Öffnen und ändern Sie es voraussichtlich zu spec.js in „Hallo, ändern Sie GURU99“ wie unten.

Nach Änderung 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!');
  });
});

Schritt 2) Speichern Sie die Datei spec.js und wiederholen Sie die oben genannten Schritte unter „Ausführung des Code" Sektion

Führen Sie nun die oben genannten Schritte aus.

Ergebnis:

Wir können das Ergebnis als fehlgeschlagen sehen, das im Screenshot mit „F“ und dem Grund als angezeigt wird „Erwartetes ‚Hallo GURU99!‘ entspricht „Hallo Änderung GURU99!“. Außerdem wird angezeigt, wie viele Fehler beim Ausführen von Code auftreten.

Können wir das Gleiche erreichen? Selenium Web-Treiber?

Manchmal können wir die Webelemente von AngularJS-Anwendungen mithilfe von XPath oder dem CSS-Selektor identifizieren Selenium Webdriver. In AngularJS-Anwendungen hingegen werden die Elemente dynamisch generiert und geändert. Daher ProtracFür die Arbeit mit AngularJS-Anwendungen ist Tor die bessere Vorgehensweise.

Erstellen Sie Berichte mit Jasmine Reporters

ProtracTor unterstützt Jasmine-Reporter zur Generierung von Testberichten. In diesem Abschnitt verwenden wir den JunitXMLReporter, um Testausführungsberichte automatisch im XML-Format zu generieren.

Führen Sie die folgenden Schritte aus, um Berichte im XML-Format zu erstellen.

Installation von Jasmine Reporter

Es gibt zwei Möglichkeiten, dies zu tun: lokal oder global

1. Öffnen Sie die Eingabeaufforderung und führen Sie den folgenden Befehl aus, um die lokale Installation durchzuführen

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

Der obige Befehl installiert Jasmine Reports Node-Module lokal, d. h. aus dem Verzeichnis, in dem wir den Befehl in der Eingabeaufforderung ausführen.

2. Öffnen Sie die Eingabeaufforderung und führen Sie den folgenden Befehl für die globale Installation aus

npm install –g jasmine-reporters@^2.0.0

In diesem Tutorial werden wir die Jasmine Reporter lokal installieren.

Schritt 1) Führen Sie den Befehl aus.

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

von der Eingabeaufforderung wie unten.

Schritt 2) Überprüfen Sie die Installationsordner im Verzeichnis. „Node_modules“ sollte verfügbar sein, wenn es erfolgreich installiert wurde, wie im folgenden Schnappschuss.

Schritt 3) Fügen Sie den folgenden farbigen Code zu einer vorhandenen conf.js-Datei hinzu

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

Erklärung des Codes:

Im Code generieren wir den Bericht „JUnitXmlReporter” und geben Sie den Pfad an, wo der Bericht gespeichert werden soll.

Schritt 4) Öffnen Sie die Eingabeaufforderung und führen Sie den Befehl aus protractor conf.js.

Schritt 5) Wenn Sie den obigen Code ausführen, wird junitresults.xml im angegebenen Pfad generiert.

Schritt 6) Öffnen Sie das XML und überprüfen Sie das Ergebnis. Die Fehlermeldung wird in der Ergebnisdatei als unsere angezeigt Testfall Fehlgeschlagen. Der Testfall ist fehlgeschlagen, da das erwartete Ergebnis von „spec.js“ nicht mit dem tatsächlichen Ergebnis einer Webseite übereinstimmt

Schritt 7) Verwenden Sie die Datei junitresult.xml für Beweise oder Ergebnisdateien.

Zusammenfassung

Obwohl Selenium kann einige der Dinge tun, die Profis tuntracTor tut es, der Profitractor ist der Industriestandard und die beste Vorgehensweise zum Testen von AngularJS-Anwendungen. Ein ProtracTor kann außerdem mehrere Funktionen verwalten und die dynamischen Änderungen von Webelementen mithilfe von Tor handhaben. ng-Modell, ng-click.., usw. (Was Selenium nicht kann).