It’s #FrontendFriday – 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 Tests 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 Tests 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 Tests 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 Tests „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 Tests 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  :-)