It’s #FrontendFriday – E2E Testing in Angular mit Protractor

30.10.2020

Es ist wieder Freitag, somit #FrontendFriday und heute geht es um E2E Testing in Angular mit Protractor.

Was ist Protractor und was steckt dahinter

Protractor bildet die Grundlage für E2E-Tests, speziell für Angular entwickelt und ist auf Webdriver aufgebaut. In Protractor kann man wie gewohnt in der Jasmine-Syntax, wie zum Beispiel: Set-up- und Tear-down-Routinen, Testsuites, Tests und Assertions, zurückgreifen. Das browser-Objekt stellt in Protactor das wichtigste Element dar. Hiermit kann man den registrierten Browser steuern. Die wichtigste Methode ist hier zum Beispiel die „get-Methode“, mit welcher man zu einer bestimmten URL navigieren kann.

Wie funktionieren E2E-Tests im Frontend

Bei einem typischen E2E-Test im Frontend, wird zuerst auf eine Seite navigiert und dort wird dann mit dieser interagiert. Dann werden diese Zustände mit „Soll“ und „Ist“ im Test verglichen. Hierbei werden normale Userszenarien, wie ein Login, durchgetestet. Die hierfür erforderlichen Befehle schreibt man normalerweise nicht direkt in den Test, da diese den Test sehr unübersichtlich machen können. Zudem werden Befehle meist häufiger benutzt, somit kann man Code Duplikation vermeiden. Diese Befehle können zum Bespiel ein Klick auf einen Button oder das Ausfüllen eines Inputs sein. Aus diesem Grund haben sich die so genannten „Page Objects“, kurz PO, etabliert. Das sind einfache Klassen, welche die wichtigsten Befehle zum Testen eines Frontendes beinhalten. Die PO-Klasse importiert man in den Test, dann instanziiert man das PO in der Set-up-Routine und nun kann man dessen Methoden in den einzelnen Test‘s verwenden und aufrufen.

Welche Browser werden von Webdriver unterstützt?

Folgende Webdriver werden Unterstützt: ChromeDriver, FirefoxDriver, SafariDriver und auch der  IEDriver. Leider werden zum Bespiel der OperaDriver nicht unterstützt. Zu der Offiziellen Seite mit Verlinkungen zu bekannten Problemen geht es hier: https://www.protractortest.org/#/browser-support

Erstes „Hello world“

Um Protractor nutzen zu können muss man dieses über npm global installieren:

npm install -g protractor

Nachdem dies erfolgreich passiert ist, sollte man nun den Web-driver, welcher von Selenium ist, aktualisieren. Dies kann man ganz einfach mit dem Befehl:

webdriver-manager update

Um mit Protractor Test’s schreiben zu können braucht man zu einem ein Config File, welches alle Konfigurationen von Protractor enthält:

// conf.js

exports.config = {

    framework: 'jasmine', 

     seleniumAddress: 'http://localhost:4444/wd/hub', 

     specs: ['spec.js']

}

Aber man braucht zudem auch ein Spec File, welches die eigentlichen Test’s beinhaltet:

// spec.js

describe('Protractor Demo App', function() { 

     it('should have a title', function() {   

           browser.get('http://juliemr.github.io/protractor-demo/');    

           expect(browser.getTitle()).toEqual('Super Calculator'); 

     });

});

Nun kann man mit dem Befehl:

protractor conf.js

alle Tests durchlaufen lassen und man bekommt sein Ergebnis.

 

Headless Browser testing mit Protractor

Warum sollte ich meine Test’s “headless” durchlaufen lassen? Hierfür gibt es ein paar Vorteile warum man dies machen sollte:

  • Das System spart die Rechenleistung, die sonst bei einem echten Browsertest verwendet würde. Somit werden die Test’s schneller ausgeführt.
  • Es kann Umgebungen geben, in denen die Installation eines Browsers nicht möglich ist, wie zum Beispiel auf einem Server. In diesen Fällen helfen “headless” Browser, Automatisierungstests einfach durchzuführen.

Achtung: der Internet Explorer unterstützt kein „headless“.

 

Zum Ende kann man nur sagen, dass man auf alle Fälle E2E-Test’s mit Protractor schreiben sollte, auch wenn sie ein “Zeitfresser” sein können, kann man mit ihnen immer noch massiv die Qualität steigern.

// Wir wünschen euch noch einen wundervollen Freitag und einen guten Start ins Wochenende  :-)

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.