ProtracTor-Testing-Tutorial: Framework für Automatisierungstools

⚠️ Hinweis zur Einstellung: ProtracTor ist veraltet und archiviertDer Support endete im August 2023 und die Angular CLI stellte ihre Pro-Version ein.tracTor Builder ab Angular 15. Auswählen Dramatiker, Cypress, WebdriverIO oder TestCafe für neue End-to-End-TestsDie folgende Anleitung gilt für ältere Suiten.

Warum brauchen wir Profis?tracTor-Framework?

JavaSkripte werden in nahezu allen Webanwendungen verwendet. Mit dem Wachstum der Anwendungen… JavaSkript Auch Größe und Komplexität nehmen zu. In diesem Fall wird es für Tester schwierig, 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 Node.js-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.

Was genau ist also eine AngularJS-Anwendung?

AngularJS AngularJS-Anwendungen sind Webanwendungen, die eine erweiterte HTML-Syntax verwenden, um ihre Komponenten auszudrücken. Sie werden hauptsächlich für dynamische Webanwendungen eingesetzt. Im Vergleich zu herkömmlichen Webanwendungen benötigen diese Anwendungen weniger und flexibleren Code. Beachten Sie, dass der Langzeit-Support für AngularJS 1.x am 31. Dezember 2021 eingestellt wurde; solche Anwendungen gelten daher heute als veraltet.

Warum können wir AngularJS-Webelemente nicht mit Normal finden? Selenium WebDriver?

AngularJS-Anwendungen verfügen über einige zusätzliche HTML-Attribute wie ng-repeater, ng-controller, ng-model usw., die nicht in der Standardbibliothek 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 verwalten und steuern.

Protractor ist ein End-to-End-Testframework für AngularJS-basierte Anwendungen. Während sich die meisten Frameworks auf die Durchführung von Tests konzentrieren, Komponententests für AngularJS-Anwendungen, 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. Selenium: Sie können die finden Selenium Installationsschritte im Selenium WebDriver-Installationsanleitung.
2. NPM (Node.js): Wir müssen Node.js installieren, um Pro zu installieren.tractor. Diese Installationsschritte finden Sie in der Node.js-Download- und Installationsanleitung.

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, wie unten dargestellt.

Schritt 2) Überprüfen Sie die Installation und Version mit "Profitractor -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 für die 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

Die Treiberdateien werden wie unten dargestellt heruntergeladen.

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

Sobald ein Testlauf startet, lädt der WebDriver ihn automatisch im entsprechenden Browser. Starten Sie den Manager mit dem folgenden Befehl.

webdriver-manager start

Die Konsole meldet die Listening-Adresse.

Wenn Sie nun zu Folgendem gehen URL (http://localhost:4444/wd/hub/static/resource/hub.htmlWenn Sie dies in Ihrem Browser tun, sehen Sie tatsächlich den WebDriver-Manager im Hintergrund laufen.

Beispieltest einer AngularJS-Anwendung mit ProtracDo.

Wenn der Treibermanager läuft, 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 öffnen https://angular.dev/ 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://angular.dev/');
 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', function()Die describe-Syntax stammt von der Jasmine-FrameworkHier definiert „describe“ („GURU99-Namen eingeben“) typischerweise Komponenten einer Anwendung, beispielsweise Klassen oder Funktionen. In der Code-Suite mit dem Namen „GURU99 eingeben“ handelt es sich jedoch lediglich um eine Zeichenkette und nicht um Code.
2. it('sollte einen Namen als GURU99 hinzufügen', Funktion()
3. browser.get(‘https://angular.dev/’)As like 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 Web-Element anhand des Modellnamens „yourName“, der dem Wert von „ng-Modell„auf der Webseite. Siehe den Screenshot unten.“

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

Navigieren Sie zunächst zu dem Ordner, in dem sich die Dateien conf.js und spec.js befinden, und folgen Sie dann den unten stehenden Schritten..

Schritt 1) Öffnen Sie die Eingabeaufforderung.

Schritt 2) Stelle sicher Selenium Der WebDriver-Manager ist gestartet. Geben Sie dazu den Befehl „webdriver-manager start“ ein und drücken Sie die Eingabetaste..

(Ob Selenium WebDriver ist nicht verfügbar, daher können wir den Test nicht als Pro durchführen.trac(Tor kann den WebDriver zur Verarbeitung der Webanwendung nicht finden)

Schritt 3) Öffnen Sie eine neue Eingabeaufforderung und geben Sie den Befehl als ein "Profitractor conf.js” Die Konfigurationsdatei wird ausgeführt. Der Vorgang wird wie unten dargestellt abgeschlossen.

Erläuterung:

• Hier Protractor führt die Konfigurationsdatei mit der darin enthaltenen Spezifikationsdatei aus.
• Wir können das sehen Selenium Server läuft unter „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.

Ein positives Ergebnis wurde nun verifiziert. Als Nächstes betrachten wir ein negatives Ergebnis.

Schritt 1) Öffnen und ändern Sie die Datei. Es wird erwartet, dass die Datei spec.js zu „'Hello change GURU99'“ wird, wie unten dargestellt.

Nach Änderung in spec.js :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angular.dev/');
 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 zeigt es an, wie viele Fehler bei der Codeausführung auftreten.

Können wir das Gleiche erreichen? Selenium WebDriver?

Manchmal können AngularJS-Elemente mit XPath- oder CSS-Selektoren lokalisiert werden. Selenium WebDriver. Diese Elemente werden jedoch dynamisch generiert und neu geladen, daher ProtracFür AngularJS-Suites war Tor die sicherere Option.

Erstellen Sie Berichte mit Jasmine Reporters

Protractor unterstützt Jasmine-Reporter. Dieser Abschnitt verwendet JUnitMit XmlReporter können Sie automatisch Testausführungsberichte im XML-Format generieren. Gehen Sie dazu wie folgt vor:

Installation von Jasmine Reporter

Es gibt zwei Möglichkeiten: 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-reporters lokal, und zwar in dem Verzeichnis, in dem er ausgeführt wird.

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

Hier sind die Reporter lokal installiert..

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 Der Test ist fehlgeschlagen. Der Testfall ist fehlgeschlagen, da das erwartete Ergebnis aus „spec.js“ nicht mit dem tatsächlichen Ergebnis einer Webseite übereinstimmt.

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

Protractor vs. Moderne Testautomatisierungsalternativen

Seit ProtracDa Tor keine Updates mehr erhält, müssen Teams, die neue Suiten planen, wissen, wie es sich im Vergleich zu den Frameworks schlägt, zu denen Angular-Projekte jetzt migriert werden. Die folgende Tabelle vergleicht Protracmit den drei Alternativen, die in den unten stehenden FAQs am häufigsten vorkommen.

Teams mit einem bestehenden ProtracTor-Suite-Systeme bewegen sich im Allgemeinen am schnellsten zu WebdriverIOda sein Befehlsstil und Selenium-basiertes Fahrermanagement bleibt nah an dem, was ProtracTor-Tester wissen das bereits. Teams, die neu anfangen oder die schnellsten Testläufe benötigen, wählen häufiger … Cypress oder stattdessen Dramatiker.

Häufig gestellte Fragen