AJAX-Apps mit Selenium testen

Tolles Steuerelement haben wir da bei uns auf der Eventeingabemaske, um die DJs den Events zuzuordnen. Das gleiche hätten wir gerne auch zum Suchen von Member eingestzt. Nur blöd, dass dieses Steuerelement ausschliesslich für Artists programmiert ist. Null Portabilität. Also: Refactoring.

Und was ist ein sauberer Ablauf eines Refactorings? Testen – Refactoren – Testen – Refactoren – Testen. Damit ich bei diesem AJAX-Steuerelement keine entzündete Gelenkkapseln vom Dauerklicken kriege, habe ich mir den Test automatisiert.

Serverseitig verwenden wir Simpletest. Da der Zauber von AJAX beim Client liegt, bringt uns hier Unit-Testing der Klassen nichts. Wir setzen hier Selenium ein. Selenium gibt alle Benutzearktivitäten wie Mausklicks und Tastatureingaben wieder und überprüft das Verhalten der Web-Applikation mit den bekannten assert*()-Funktionen. Existenz und Position von DOM-Elementen, Feldinhalte, Texte auf der Seite, alles kann mit Selenium überprüft werden.

Selenese: Esoterisch aber raffiniert.

Und dies alles in allen gängigen Browsern dank einem JavaScript-basierten Testrunner. Der Test ist in einer eigenen Programmiersprache namens “Selenese” geschrieben. Und diese Sprache besteht aus… dreispaltigen HTML-Tabellen. Etwas überraschend. Mutet etwas nach Hack an. Doch nur so kann das JavaScript die Kommandos auswerten. Hier ein Beispiel eines Skripts, welches die Seite “mypage” öffnet, in das Feld “nameField” den Text “John Smith” tippt, auf “submitButton” klickt um dann zu überprüfen, ob in der resultierenden HTML-Seite der Text “John Smith” enthalten ist.

Um die Aufzeichnung der Benutzeraktivitäten zu vereinfachen, gibt es die Firefox Extension Selenium IDE. Diese zeichnet Mausklicks, Formulareingaben auf und erzeugt das Selenese-Skript. Zusicherungen können bequem mittels Kontextmenü eingebaut werden.

Handarbeit trotz Recording-Tool

Handarbeit bleibt aber nicht erspart: Wie bei jedem Test muss man zuerst das Testinventar bereitstellen. In diesem Fall 2 Test-DJs. Und nach dem Testdurchlauf muss dieses wieder abgebaut werden. Erschwerend kommt hinzu, dass das Steuerelement auch das Hinzufügen von DJs in die Datenbank ermöglicht. Und diesen Datenmüll muss nach Testdurchlauf wieder abgebaut werden. Wie finden wir nun den Primary Key der hinzugefügten DJs? Zum Glück können Teile der Seite (Attribute, Feldinhalte) bei Selenese in Variablen abgespeichert werden. Mit diesen Variablen kann dan frei herumjongliert werden. Im Beispiel übergebe ich die erzeugte Artist-ID dem tearDown-Skript als GET-Parameter.

Folgender – etwas verschommener – Clip zeigt einen Testdurchlauf. Links sieht man den Browser. Rechts das Selenium IDE. Zuerst wird das Testinventar aufgebaut. Dann läuft der Test durch. Alle Benutzereingaben links werden durch das Selenium IDE gesteuert. Am Schluss wird das Testinventar abgebaut und der Datenmüll aus der DB entfernt. Jedes erfolgreiche assert() wird als grüne Zeile dargestellt. Schlägt eine Zusicherung fehl, so wird die entsprechende Zeile rot eingefärbt.

Um dieses Testskript zu schreiben, benötigte ich trotz IDE über zwei Stunden. Dies liegt daran, dass es sich hier um ein komplexes JavaScript-Steuerelement handelt. Und 80% der Schritte (z.B. Betätigung der Pfeiltasten) nicht automatisch aufgezeichnet werden konnten.

Sehr nützlich finde ich die flexible Adressierung der Elemente im DOM. Dies geht am einfachsten über das Attribut ID oder NAME, doch auch raffiniertere Methoden wie XPATH werden unterstützt. Für mich als XML-Fan ist diese klar mein Favorit.

Da das Schreiben eines Tests aufwändig ist und gute DOM-Kenntnisse erfordert, lohnt sich der Einsatz dieses Tools bei kommerziellen Websiten.

So, da wir den Test nun haben, kann ich endlich mit dem Refaktorisieren beginnen…