Digital Know How

Für ihren Fortschritt

Ein wichtiger Bestandteil der Entwicklung von Apps ist das Testen von bestimmten Szenarien und Abläufen. Neben dem manuellen Testen können aber bereits vorher automatisierte Oberflächentests durchgeführt werden, um die grundlegendsten Abläufe der Anwendung zu überprüfen. Für AngularJS können diese mit dem Framework Protractor umgesetzt, welches von den gleichen Entwicklern stammt und deshalb bereits alle Funktionalitäten zum Testen von Angular-Anwendungen mit sich bringt. Wie genau die Umsetzung aussehen kann soll hier gezeigt werden.

Einrichten der Testumgebung

Zuallererst sollte die Einrichtung der Testumgebung erfolgen, also die Installation aller notwendigen Frameworks und Module. Grundsätzlich ist für den hier beschriebenen Ablauf nur Protractor als solches notwendig, zur besseren Darstellung der Testergebnisse sollte aber ein zusätzlicher Reporter installiert werden. In den Beispielen hier wird der “jasmine-spec-reporter” genutzt. Die Installation erfolgt einfach auf der Konsole über

npm install -g protractor

bzw.

npm install -g jasmine-spec-reporter

Die Erfahrung hat gezeigt, dass es dabei ratsam ist, zumindest Protractor global zu installieren. So kann vermieden werden, dass es später im Projektkontext zu Fehlern kommt, weil Protractor nicht gefunden werden kann. Prinzipiell ist damit bereits alles installiert, was zum Schreiben von Oberflächentests benötigt wird. Da die Oberflächentests mit Protractor über einen Selenium-Server ausgeführt werden, muss allerdings noch eine Entscheidung diesbezüglich getroffen werden. Und zwar besteht die Möglichkeit, einen bereits laufenden Server, oder aber einen Standalone-Selenium-Server zu nutzen. Dieser startet sich beim Ausführen der Test jedes mal neu und beendet sich auch selbstständig wieder. Da somit das Risiko von Fehlern aufgrund eines nicht laufenden Servers minimal ist, wird diese Methode bevorzugt. Zu diesem Zweck kann über den Befehl

webdriver-manager update

die aktuelle Version heruntergeladen werden. Dabei wird ebenfalls die aktuellste Version des Chromedrivers mit installiert. Zur vollständigen Einrichtung der Testumgebung gehört neben den Modulen selbst auch das Anlegen einer Konfigurationsdatei, in welcher für Protractor wichtige Angaben gemacht werden. Die Benennung der Datei ist dabei grundsätzlich egal, kann aber der Einfachheit halber protractor.conf.js sein. Eine Beispielkonfiguration könnte so aussehen:

exports.config = {
    seleniumServerJar: '[Pfad zu Node-Modulen]/protractor/selenium/selenium-server-standalone-2.44.0.jar',
    specs: ['./app/spec/e2e/**/*.js'],
    baseUrl: '[Basispfad des Projektes],
    capabilities: {
        'browserName': 'chrome',
        'chromeOptions': {
            'args': ['--disable-web-security']
        }
    },
    onPrepare: function () {
        require('jasmine-spec-reporter');
        // add jasmine spec reporter
        jasmine.getEnv().addReporter(new jasmine.SpecReporter({displayStacktrace: false}));
    }
};

Der Punkt “seleniumServerJar” gibt den Pfad zum vorher erwähnten Standalone-Selenium-Server an. Bei globaler Installation befindet sich dieser im Verzeichnis aller installierten Node-Module und dort unter protractor/selenium. Sollte statt des Standalone-Servers ein selbst gestarteter verwendet werden, muss diese Angabe durch “seleniumAdress: [Adresse des Servers]” ersetzt werden. Im Punkt “specs” werden die Dateien mit den geschriebenen Testfällen angegeben. Ein wichtiger Punkt ist “capabilities”. Hier wird festgelegt, mit welchem Browser und unter welchen Optionen die Tests ausgeführt werden. Im Beispiel wird so Chrome mit dem Parameter “–disable-web-security” genutzt. Innerhalb der “onPrepare”-Funktion erfolgt die Einbindung des Reporters. Damit ist die Einrichtung abgeschlossen und es kann mit dem Schreiben von Tests begonnen werden.

Schreiben erster Tests

Die Struktur der in Jasmine geschriebenen Tests lässt sich anhand des folgenden Beispielcodes erkennen:

describe('Login', function () {

    beforeEach (function() {
        browser.get('[Pfad zur gewünschten Seite]');
    });

    it('click "Login", fill in login info and click login', function () {
        element(by.id('button-login')).click();
        element(by.model('auth.username')).sendKeys('testuser@test.com');
        element(by.model('auth.password')).sendKeys('testpwd');
        element(by.id('login')).click();
    });
});

Innerhalb eines “describe”-Blocks, welcher das gesamte Testszenario als solches benennt, befindet sich mindestens ein “it”-Block. Dieser stellt den Testfall an sich dar und beinhaltet die Interaktionen mit den Elementen auf der Seite. Im Beispiel wird so der Login auf einer Seite getestet. Nach einem Klick auf einen Button werden über den Selector “by.model” die Input-Felder für Nutzername und Passwort ausgewählt und mit der Methode “sendKeys()” ausgefüllt. Mit einem weiteren Klick auf den Button mit der ID “login” erfolgt dann ebendieser. Zu erwähnen ist noch die Funktion forEach(). Darüber können vor jedem Testfall noch zusätzlich notwendige Aktionen ausgeführt werden, ohne das sie in jedem Testfall separat erledigt werden müssen. Im Beispiel ist das der Wechsel zur gewünschten Seite.

Ausführen der Tests

Nach dem Schreiben folgt schließlich das Ausführen der Tests.  Dies kann einfach über das Ausführen des Befehls

protractor protractor.conf.js

auf der Konsole, im Verzeichnis in welchem die Dateien liegen, erledigt werden. Die Datei “protractor.conf.js” ist dabei die zuvor erwähnte Konfigurationsdatei und muss bei anderer Benennung entsprechend auch so angegeben werden. Im Anschluss an diesen Befehl startet sich der Selenium-Server und die Tests werden ausgeführt.

Im folgenden Artikel erfahrt ihr Tipps & Tricks für E2E (End-to-End) Tests mit dem Framework Protractor.

Wir freuen uns über eine Bewertung, um ein Feedback zu erhalten:

Durchschnittlich 2 Sterne aus 4 Meinungen.