Frontend-Testing mit Codeception

1

Codeception ist ein PHP basiertes Framework für automatisiertes Frontend-Testing. Es liefert abgesehen von Tools für Akzeptanztests auch weitreichende Tools für Unit-Tests. In diesem Artikel gehen wir jedoch weitestgehend auf die Funktion der Akzeptanztests ein, also die Tests, die den Fall simulieren dass ein User sich gerade durch eine Webseite klickt. Im nachfolgenden Absatz möchte ich zunächst die Installation und die generelle Verwendung von Codeception für das Frontend-Testing erläutern, sowie auf die Basisfunktion der Akzeptanztests eingehen. Codeception ermöglicht es, reale Testszenarien anhand von festgelegten Abläufen zu durchlaufen, ohne selbst den Browser zu öffnen.

Die Installation

Codeception kann hier via Composer installiert werden. Jedoch wird davon in unserem Beispiel kein Gebrauch gemacht, da wir den sofortigen Einsatz von Codeception auf einer frischen VM realisieren, und somit keinen Composer installiert haben.

Mac/Linux:
Auf dem Mac bzw Linux und Unix derivaten kann Codeception auch per Command-line installiert werden.

mit diesem beidem Befehlen wird Codeception installiert und dessen Ordnerstruktur erstellt.

Windows:
Auf Windows muss das installationsarchiv hier manuell heruntergeladen werden von:

Nach der Installation auf Windows hat Codeception die benötigte Ordnerstruktur erstellt.

Sollte das Frontend-Testing mit Google Chrome, Firefox oder anderen Browsern durchgeführt werden, wird auch Selenium benötigt. Die Installation kann auf einem Mac/Linux per Kommandozeile mit folgenden Befehlen geschehen.

Mac:

Linux:

Auf Windows muss der Selenium Server von http://selenium.org heruntergeladen und installiert werden.

Nachdem Selenium und Codeception installiert sind, gestaltet sich der Rest der Konfiguration relativ einfach. Zunächst können im „_env“ Verzeichnis von Codeception sogenannte Testumgebungen angelegt werden, welche der Reihe nach von Codeception durchlaufen und abgearbeitet werden. Ein Beispiel für einen solche Datei sieht wie folgt aus.

Frontend-Testing mit Codeception

Chrome Konfigurationsdatei (Full HD test)

In diesem .yml file wird festgelegt, dass der zu testende Browser Google Chrome sein wird.
Des Weiteren wird festgelegt, dass wir in der Auflösung 1920×1080 testen werden.
Die URL kann pro Testumgebung jeweils eine URL beinhalten, welche in unserem Testszenario momentan auf einen unserer Testserver zeigt.

Vorbereitungen für das Frontend-Testing

Nachdem wir unsere Umgebungsvariablen festgelegt haben, können wir uns der nächsten wichtigen Datei widmen. Die Datei __bootstrap.php aus dem Verzeichnis „acceptance“ wird vor jedem Test aufgerufen und erlaubt es, Variablen zu deklarieren die dann in den jeweiligen Testszenarien verwendet werden können. Diese Variablen bestehen den ganzen Test über und können von den verschiedenen Szenarien gemeinsam benutzt werden. Eine sinnvolle Verwendung dieser Datei wäre zum Beispiel eine Funktion zum erkennen des benutzten Browsers, um in den Tests darauf entsprechend reagieren zu können und die Tests für den jeweiligen Browser besser anzupassen.

Beispiel: Sollte die Funktion in __bootstrap.php ein mobiles Endgerät entdecken, kann der darauf folgende Test in seinem Testszenario darauf reagieren und zum Beispiel die mobile Navigation anstatt die normale Navigation Testen.

Hinweis: Bevor die Testszenarien durchlaufen werden können, muss Selenium entweder auf Windows mit einem Doppelklick, oder auf Mac bzw Linux/Unix derivaten mit dem Konsolenbefehl „selenium-server -p 4444“ gestartet werden.

Das Testszenario

Kommen wir nun zu den eigentlichen Tests. Jedes Testszenario das wir anlegen wollen, muss sich im „acceptance“ Verzeichnis befinden. Jede PHP datei außer __bootstrap.php wird dort für jede einzelne Testumgebung die wir im „_env“ Verzeichnis liegen haben durchlaufen. Haben wir zum Beispiel ein Testszenario wie „Navigation.php“ im „acceptance“ folder, wird dieses Szenario für chrome_1920x1080.yml aufgerufen.
Ein Beispiel eines solchen Tests sieht wie folgt aus.

Der obrige test wurde mit dem Befehl „php codecept.phar run acceptance –env chrome_1920x1080“ aufgerufen. Für jede weitere Testumgebung die in die Testszenarien eingebunden werden soll, wird eine weitere –env Direktive benötigt.

Beispiel 2 Browser:

Hint: Während eines Tests der Funktionen wie $i->moveMouseOver() enthält darf die Maus nicht bewegt werden!

Footer Testszenario

Footer Testszenario (acceptance/FooterCept.php)

Wie man in unserem Test sehen kann, wird hier der Anmeldebereich einer Website getestet. Es handelt sich hierbei um einen simplen Test der einzig und allein die jeweilige Login-Seite ansteuert und das Form-Feld mit Daten befüllt. Die einfache Syntax von Codeception macht es dem Entwickler einfach in einer kurzen Zeit verständliche und benutzbare Testszenarien zu schreiben.

Je nach Generalisierung der Tests wie Beispielsweise oben beschrieben, lässt dich der Test für mehrere Anwendungszwecke verwenden. In unserem Fall ist der oben zu sehende Test für jegliches Login-Formular einer Magento-Shop Webseite einsetzbar.

Nachdem Codeception die Tests erfolgreich (oder auch nicht) beendet hat, wenden wir uns dem Verzeichnis „records“ zu. Im Verzeichnis „records“ befinden sich Screenshots von jedem einzelnen Schritt unserer Tests und dem Ergebnis. Es bleibt einem die Möglichkeit entweder die Datei „index.html“ zu öffnen und sich in einem minimalistisch gestalteten Web-interface durch die Ergebnisse zu klicken oder sich die einzelnen Fehlgeschlagenen Tests heraus zu suchen. Fehlgeschlagene Tests haben eine „.fail.“-Endung im Dateiname und sind direkt in „records“ Ordner zu finden.

Hint: Der Befehl $i->wait() veranlasst Codeception dazu, eine gewisse Zeit zu warten und einen neuen Screenshot zu erstellen.

Fazit:

Codeception ist ein effizient einsetzbares Tool mit noch kleinen Schönheitsfehlern, wie zum Beispiel das unnötige Erstellen eines Screenshots nach Verwendung des $i->wait() Befehls, die einen Entwickler jedoch keinesfalls am produktiven Einsatz des Frameworks hindern. Es stellt mit seiner einfachen Syntax und leichten Bedienbarkeit eine effektive Methode für das Frontend-Testing dar.

Empfehlen.

Über den Autor

Benjamin Vieren ist seit 2009 in der PHP-Entwicklung tätig und entwickelt Designs und User Interfaces auf Basis von HTML, PHP, CSS und Javascript. Der Fokus des Magento Frontend Developers der webvisum GmbH liegt auf der Entwicklung von E-Commerce-Lösungen.

1 Kommentar

  1. Pingback: Recap Meet Magento 2017 - Leipzig - PHP-Schulungen, Seminare und Workshops

Hinterlasse eine Antwort

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.