Tutorial zum Testen von Winkelmessern: Automation Tool Framework

Inhaltsverzeichnis:

Anonim

Was ist Winkelmessertest?

PROTRACTOR ist ein automatisierungs- und durchgängiges verhaltensgesteuertes Testwerkzeug , das eine wichtige Rolle beim Testen von AngularJS-Anwendungen spielt und als Lösungsintegrator fungiert, der leistungsstarke Technologien wie Selen, Jasmin, Webtreiber usw. kombiniert. Der Zweck des Winkelmessertests dient nicht nur zum Testen von AngularJS-Anwendungen, sondern auch zum Schreiben automatisierter Regressionstests für normale Webanwendungen.

In diesem Tutorial für Anfänger lernen Sie:

  • Warum brauchen wir ein Winkelmesser-Framework?
  • Winkelmesser Installation
  • Beispiel für einen AngularJS-Anwendungstest mit einem Winkelmesser
  • Ausführung des Codes
  • Generieren Sie Berichte mit Jasmine Reporters

Warum brauchen wir ein Winkelmesser-Framework?

JavaScript wird in fast allen Webanwendungen verwendet. Mit dem Wachstum der Anwendungen nimmt auch die Größe und Komplexität von JavaScript 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 mit JUnit oder Selenium WebDriver zu erfassen.

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

Ok, jetzt wollen wir diskutieren, 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 flexiblen Code.

Warum können wir Angular JS-Webelemente mit dem normalen Selenium-Webtreiber nicht finden?

Angular JS-Anwendungen verfügen über einige zusätzliche HTML-Attribute wie ng-repeater, ng-controller, ng-model usw., die in Selenium-Locators nicht enthalten sind. Selenium kann diese Webelemente nicht mit Selenium-Code identifizieren. Daher kann Protractor auf Selenium 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 Komponententests 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. Selen

    Sie finden die Schritte zur Selenium-Installation 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. Sie finden diese Installationsschritte unter folgendem Link. (https://www.guru99.com/download-install-node-js.html)

Winkelmesser Installation

Schritt 1) Öffnen Sie die Eingabeaufforderung, geben Sie "npm install -g Winkelmesser" ein und drücken Sie die Eingabetaste .

Mit dem obigen Befehl werden die erforderlichen Dateien heruntergeladen und Protractor auf dem Client-System installiert.

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 aus.

(Die Schritte 3 und 4 sind optional, werden jedoch für eine bessere Übung empfohlen.)

Schritt 3) Aktualisieren Sie den Webtreiber-Manager. Der Webtreiber-Manager wird zum Ausführen der Tests für die eckige Webanwendung in einem bestimmten Browser verwendet. Nach der Installation von Protractor muss der Webtreiber-Manager auf die neueste Version aktualisiert werden. Dies kann durch Ausführen des folgenden Befehls an der Eingabeaufforderung erfolgen.

webdriver-manager update

Schritt 4) Starten Sie den Webtreiber-Manager. In diesem Schritt wird der Webtreiber-Manager im Hintergrund ausgeführt und alle Tests abgehört, die über einen Winkelmesser ausgeführt werden.

Sobald Protractor zum Ausführen eines Tests verwendet wird, lädt der Webtreiber den Test automatisch und führt ihn im entsprechenden Browser aus. Um den Webtreiber-Manager zu starten, muss der folgende Befehl an der Eingabeaufforderung ausgeführt werden.

webdriver-manager start

Wenn Sie nun in Ihrem Browser zur folgenden URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) wechseln , wird der Webtreiber- Manager tatsächlich im Hintergrund ausgeführt.

Beispiel für einen AngularJS-Anwendungstest mit einem Winkelmesser

Der Winkelmesser benötigt zum Ausführen zwei Dateien, eine Spezifikationsdatei und eine Konfigurationsdatei .

  1. Konfigurationsdatei : Diese Datei hilft dem Winkelmesser, wo sich die Testdateien befinden (specs.js) und mit dem Selenium-Server (Selenium-Adresse) zu kommunizieren. Chrome ist der Standardbrowser für Winkelmesser.
  1. Spezifikationsdatei: Diese Datei enthält die Logik und die Locators für die Interaktion mit der Anwendung .

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

Schritt 2) In diesem Schritt

  1. Geben Sie den Namen "Guru99" ein
  2. Im Ausgabetext ist "Hello Guru99" zu sehen.

Schritt 3) Jetzt müssen wir den Text von der Webseite nach Eingabe des Namens erfassen und mit dem erwarteten Text überprüfen .

Code:

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

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 ('GURU99 Name eingeben', Funktion ()

    Die Beschreibungssyntax stammt aus dem Jasmine-Framework. Hier definiert "beschreiben" ('Enter GURU99 Name') normalerweise Komponenten einer Anwendung, die eine Klasse oder Funktion usw. sein können. In der Codesuite mit dem Namen "Enter GURU99" ist es nur eine Zeichenfolge und kein Code.

  2. it ('sollte einen Namen als GURU99 hinzufügen', function ()
  3. browser.get ('https://angularjs.org')

    Wie in Selenium Webdriver öffnet browser.get eine neue Browserinstanz mit der genannten URL.

  4. element (by.model ('yourName')). sendKeys ('GURU99')

    Hier finden wir das Webelement unter Verwendung des Modellnamens als "yourName", was dem Wert von "ng-model" auf der Webseite entspricht. Überprüfen Sie den Screenshot unten-

  1. 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 speichern seinen Wert in einer Variablen "Guru" .

  2. erwarten (guru.getText ()). toEqual ('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 von conf.js.

  1. seleniumAddress: 'http: // localhost: 4444 / wd / hub'

    Die Konfigurationsdatei teilt Protractor den Speicherort der Selenium-Adresse mit, um mit Selenium WebDriver zu kommunizieren.

  2. Spezifikationen: ['spec.js']

    Diese Zeile teilt Protractor den Speicherort der Testdateien spec.js mit

Ausführung des Codes

Hier ändern wir zuerst den Verzeichnispfad oder navigieren zu dem Ordner, in dem sich die Dateien confi.js und spec.js in unserem System befinden .

Befolgen Sie den folgenden Schritt.

Schritt 1) Öffnen Sie die Eingabeaufforderung.

Schritt 2) Stellen Sie sicher, dass der Selenium Web Driver Manager aktiv ist. Geben Sie dazu den Befehl "webdriver-manager start" ein und drücken Sie die Eingabetaste .

(Wenn der Selenium-Webtreiber nicht aktiv ist, können wir keinen Test durchführen, da Protractor den Webtreiber für die Webanwendung nicht finden kann.)

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

Erläuterung:

  • Hier führt Protractor die Konfigurationsdatei mit der angegebenen Spezifikationsdatei aus.
  • Wir können sehen, dass der Selenserver unter " http: // localhost: 4444 / wd / hub " ausgeführt wird, den wir in der Datei conf.js angegeben haben.
  • Hier sehen Sie auch das Ergebnis, wie viele übergeben wurden und Fehler wie im obigen Screenshot .

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

Schritt 1) Öffnen und ändern Sie die erwartete Datei 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 obigen Schritte des Abschnitts "Ausführung des Codes"

Führen Sie nun die obigen Schritte aus.

Ergebnis:

Wir können das Ergebnis als fehlgeschlagen sehen, angezeigt mit 'F' im Screenshot mit dem Grund "Erwartet 'Hallo GURU99!' Dies entspricht auch "Hallo, ändern Sie GURU99!". Außerdem wird angezeigt , wie viele Fehler beim Ausführen von Code auftreten.

Können wir dasselbe mit dem Selenium-Webtreiber erreichen?

Manchmal können wir die Webelemente von AngularJS-Anwendungen mithilfe von XPath oder CSS Selector aus dem Selenium-Webtreiber identifizieren. In AngularJS-Anwendungen werden die Elemente jedoch dynamisch generiert und geändert. Daher ist Winkelmesser die bessere Methode, um mit AngularJS-Anwendungen zu arbeiten.

Generieren Sie Berichte mit Jasmine Reporters

Der Winkelmesser unterstützt Jasmine-Reporter bei der Erstellung von Testberichten. In diesem Abschnitt verwenden wir 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 lokal oder global zu tun

  1. Öffnen Sie die Eingabeaufforderung und führen Sie den folgenden Befehl aus, um die Installation lokal durchzuführen
npm install --save-dev jasmine-reporters@^2.0.0

Der obige Befehl installiert Jasmin Reports. Knoten-Module lokal bedeutet aus dem Verzeichnis, in dem wir den Befehl in der Eingabeaufforderung ausführen.

  1. Ö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 Jasminreporter 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 wie im folgenden Snapshot erfolgreich installiert wurde.

Schritt 3) Fügen Sie einer vorhandenen Datei conf.js den folgenden farbigen Code 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 den Pfad an, in dem der Bericht gespeichert werden soll.

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

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 angezeigt, da unser Testfall fehlgeschlagen ist. 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 Selen einige der Aufgaben des Winkelmessers ausführen kann, ist der Winkelmesser 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 mithilfe von ng-model, ng-click… usw. verarbeiten (was Selen nicht kann).

Dieser Artikel wurde von Ranjith Kumar Enishetti verfasst