Tutorial zum Testen von Winkelmessern: Automatisierungstool-Framework

Warum brauchen wir ein Winkelmesser-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 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, Winkelmesser oben drauf Selenium kann diese Attribute in Webanwendungen verarbeiten und steuern.

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

Bevor wir Protractor starten, 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 Protractor zu installieren. Diese Installationsschritte finden Sie unter dem folgenden Link. ( https://www.guru99.com/download-install-node-js.html )

Installation des Winkelmessers

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

Der obige Befehl lädt die erforderlichen Dateien herunter und installiert Protractor auf dem Client-System.

Schritt 2) Überprüfen Sie die Installation und Version mit "Winkelmesser – 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 Web-Treibermanager. Der Web-Treibermanager wird zum Ausführen der Tests für die Angular-Webanwendung in einem bestimmten Browser verwendet. Nachdem Protractor installiert wurde, muss der Web-Treibermanager 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 Web-Treibermanager. Dieser Schritt führt den Web-Treiber-Manager im Hintergrund aus und überwacht alle Tests, die über den Winkelmesser ausgeführt werden.

Sobald mit Protractor ein Test ausgeführt wird, wird der Webtreiber automatisch geladen und führt den Test im entsprechenden Browser aus. Um den Webtreibermanager zu starten, muss der folgende Befehl in der Eingabeaufforderung ausgeführt werden.

webdriver-manager start

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

Beispiel für AngularJS-Anwendungstests mit Protractor

Zum Ausführen benötigt Protractor zwei Dateien: a spec Datei-und Konfiguration Datei.

1. Konfigurationsdatei: Diese Datei hilft dabei, herauszufinden, wo die Testdateien abgelegt werden (specs.js) und mit ihnen zu kommunizieren Selenium Server (Selenium Adresse). Chrome ist der Standardbrowser für Protractor.

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. Den Namen „Guru99“ eingegeben
2. Im Ausgabetext ist „Hallo Guru99“ 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-Erklärung 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 der genannten 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-Erklärung von conf.js

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

Ausführung des Kodex

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-Webtreiber nicht betriebsbereit ist, können wir keinen Test durchführen, da Protractor den Webtreiber zum Verarbeiten der Webanwendung nicht finden kann.)

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

Erläuterung:

• Hier führt Protractor die Konfigurationsdatei mit der angegebenen 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 im Abschnitt „Ausführung des Codes“.

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 Web-Treiber. In AngularJS-Anwendungen werden die Elemente jedoch dynamisch generiert und geändert. Daher ist Protractor die bessere Methode für die Arbeit mit AngularJS-Anwendungen.

Erstellen Sie Berichte mit Jasmine Reporters

Protractor unterstützt Jasmine-Reporter zum Generieren von Testberichten. In diesem Abschnitt verwenden wir JunitXMLReporter, um automatisch Testausführungsberichte 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 Winkelmesser 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 der Winkelmesser macht. Der Winkelmesser ist der Industriestandard und die beste Vorgehensweise zum Testen von AngularJS-Anwendungen. Ein Winkelmesser kann auch mehrere Funktionen darin verwalten und die dynamischen Änderungen von Webelementen verarbeiten ng-Modell, ng-click.., usw. (Was Selenium nicht kann).