Selenium Test – Eine Einführung

Was ist Selenium? Warum Testen? Solche Fragen stellen sich ja oft Entwickler.

Selenium automates browsers. That's it.

...schreibt das Framework über sich selbst. Selenium ist ein sehr effektives Testframework um Webinhalte zu testen. Bei diesen Tests ist es möglich einen Oberflächentest auf einer Webseite auszuführen. Es könnten damit alle möglichen Benutzerinteraktionen und –eingaben getestet werden.

Aber warum soll denn überhaupt ein Entwickler testen? Der Entwickler macht doch schließlich keine Fehler. Dies ist leider ein Trugschluss, denn es können sich immer wieder schwerwiegende Fehler einschleichen. Natürlich kostet Testen viel Geld, was sich jedoch nachher auszahlt.

Um eine Webanwendung / Webseite automatisch zu testen benötigen wir einige Werkzeuge die ich im folgenden, anhand eines Testszenarios näher bringen möchte.

Das Testszenario

  1. Wir suchen auf der Webseite http://xuad.net nach dem Begriff “xdebug”. Im Suchergebnis erscheinen mehrere Ergebnisse.
  2. Das erste Suchergebnis soll angeklickt werden.
  3. Im geöffneten Artikel soll geprüft werden, ob sich ein Bild mit einer Lightbox befindet.
  4. Wenn sich ein Bild im Artikel befindet, soll dieses angeklickt werden.
  5. Es soll geprüft werden ob sich eine Lightbox öffnet.
  6. Die Lightbox soll wieder geschlossen werden.

Die Logik

Um sich eine Logik für den Testfall zu überlegen, bedienen wir uns eines bequemen Werkzeugs. Die Selenium IDE für den Firefox-Browser eignet sich hervorragend für die Erstellung unseres Tests.

Neben den Firefox downloaden wir daher das benötigte Selenium IDE Plugin und um schnell die IDE zu starten den Selenium IDE Button. Um später bestimmte Selektoren im DOM zu finden benötigen wir noch das Firefox Add-on Firebug.

Nachdem wir den Firefox nebst Plugins installiert haben, fügen wir einfach den Selenium IDE Button zu unserer Symbolleiste hinzu. Damit ist es sehr leicht möglich die IDE per Popup oder als Sidebar zu öffnen.

selenium_ide_button

Wir starten am besten die IDE in der Sidebar damit wir die Webseite beim Testen genauer betrachten können. Um unser Testszenario nachzustellen, erstellen wir zunächst einen neuen Testfall (Rechtsklick auf Untitled » Properties…) mit dem Namen “SeleniumEinfuehrung”. Jetzt können wir entweder mit dem Aufnahmebutton (1) ein Szenario aufnehmen oder eigene Kommandos (2) definieren.

selenium_ide_legend

Wir wählen den zweiten Weg um die Kommandos genauer zu definieren. Als erstes erstellen wir mit Rechtsklick ein neues Kommando (Insert New Command) mit dem Befehl “open” (3). Als Target (4) tragen wir “http://xuad.net” ein. Ein Value-Wert (*5) brauchen wir für den Befehl nicht zu definieren.

selenium_ide_firststep

Wenn wir jetzt auf den Button “Play entire test suite” klicken öffnen wir mit dem Befehl “open” die Webseite “http://xuad.net”.

Test mit der Selenium IDE erstellen

Die nächsten Schritte im Testszenario sind ähnlich. Es werden neue Befehle hinzugefügt und das Event ausgewählt. Zusammenfassend kommt dann folgende Abfolge zu Stande. Für die Selektorwahl habe ich auf xpath gesetzt. Es ist jedoch auch möglich mit Javascript Selektoren auszuwählen.

  1. Öffnen der Webseite (open, http://xuad.net, “”)
  2. Suchbegriff eingeben (type, “xpath=//form[@class='search-form']//input[@name='keywords']”, “xdebug”) – Wir suchen mittels xpath das Formular mit der CSS-Klasse “search-form” und dem Eingabefeld “keywords”, danach geben wir als Suchbegriff “xdebug” ein
  3. Suchformular abschicken (clickAndWait, “xpath=//form[@class=search-form]//button[@type='submit']”, “”)  - Wir suchen wieder nach dem Formular und klicken den Submit-Button.
  4. Wir klicken auf den ersten Link (click, “xpath=//div[contains(@class,'first')]//a[1]”)
  5. Prüfen ob es ein Bild mit einer Lightbox im Artikel gibt (verifyVisible, “xpath=//div[@id='artikel']//a[contains(@data-lightbox, '')]”, “”)
  6. Die Lightbox anklicken (click, “xpath=//div[@id='artikel']//a[contains(@data-lightbox, '')]”, “”)
  7. Prüfen ob die Lightbox geöffnet wurde (verifyVisble, “xpath=//div[contains(@class, 'fancybox-overlay')]", “”)
  8. Lightbox schließen (click, “xpath=//div[contains(@class, 'fancybox-overlay')]”, “”)

Da nun der Testfall komplett ist, können wir wieder auf “Play entire test suite” (*6) und unseren automatisierten Test beobachten. Wenn alles grün geworden ist, ist unser Testfall erfolgreich verlaufen. Den erstellten Testfall können wir einfach mit Datei » “Save Test Case As” als HTML-Datei abspeichern. Dies dient uns später als Grundlage für den automatisierten Test mit Netbeans.

selenium_ide_completetest

Anmerkung: Wenn ein Kommando fehlschlägt, muss das nicht zwangsläufig am Programmierer liegen, sondern auch am Tester. Deshalb sollte man jedes Target vorher mit Find prüfen, ob das gesuchte Element überhaupt vorhanden ist.

Automatisierten Test mittels PHPUnit und Netbeans

Wir haben erfolgreich unseren ersten Testfall aufgenommen. Im nächsten Schritt wollen wir diesen Testfall in eine PHPUnit-Klasse überführen. Diese Klasse wird danach mittels der IDE Netbeans automatisiert getestet.

Wir benötigen als erstes einen Webserver, wie beispielsweise XAMPP und die IDE Netbeans, sowie das JDK von Oracle. Damit unsere Tests überhaupt interpretiert brauchen, benötigen wir PEAR.

Im ersten Schritt installieren wir XAMPP (am besten unter “C:\xampp”), sowie das JDK und Netbeans. Im nächsten Schritt installieren wir PEAR. Dazu kopieren wir die gedownloadete Datei “go-pear.phar” in das Verzeichnis “C:\xampp\php” und öffnen die Kommandozeile (Windowstaste + R » cmd » ENTER).

Wir navigieren zum PHP-Verzeichnis:

cd C:\xampp\php

...und führen mittels der php.exe die phar-Datei aus:

php.exe go-pear.phar

Wir bestätigen alles mit ENTER und PEAR wird initialisiert. Im nächsten Schritt müssen wir noch die Datei “C:\xampp\php\PEAR_ENV.reg” ausführen um die Umgebungsvariablen zu setzen. Damit die neuen Umgebungsvariablen geladen werden, loggen wir uns aus Windows aus – und wieder ein.

Als nächstes begeben wir uns wieder mittels Kommandozeile nach “C:\xampp\php” und führen folgende Befehle nacheinander aus:

pear config-set auto_discover 1 
pear install pear.phpunit.de/PHPUnit
pear install phpunit/PHPUnit_SkeletonGenerator
pear install phpunit/PHPUnit_Selenium

Um die Installation von PHPUnit zu testen geben wir folgenden Befehl ein:

phpunit --version

Es sollte jetzt folgende Ausgabe erscheinen: “PHPUnit 3.7.18 by Sebastian Bergmann.” Die Versionen ändern sich natürlich mit der Zeit Zwinkerndes Smiley.

Der Installer hat uns eine “phpunit.bat” und eine “phpunit-skelgen.bat” -Datei erstellt, welche wir in Netbeans Optionen angeben müssen, damit wir endlich mit den Testen anfangen können. Die Dateien werden unter Tools » Options » PHP » Unit Testing festgelegt.

netbeans_phpunit_settings

Im nächsten Schritt benötigen wir noch 2 Netbeans-Plugins für die Erstellung von Selenium-Tests. Das ist zum einem “Selenium Module for PHP” und zum anderen “Selenium Server”. Dazu gehen wir unter Tools » Plugins » Available Plugins und suchen nach “selenium”, danach installieren wir die genannten Plugins.

netbeans_selenium_plugins

Da leider ein veralteter Selenium Server mit dem Plugin ausgeliefert wird. Downloaden wir uns den aktuellsten Selenium RC Standalone Server unter https://code.google.com/p/selenium/ (Momentane Version 2.31.0).  Wir begeben uns zum Plugin-Verzeichnis von Netbeans (“C:\Users[USERNAME]\AppData\Roaming\NetBeans\7.2.1\modules\ext”) und tauschen im Ordner “selenium” die gedownloadete jar-Datei aus. ACHTUNG: Die Datei muss den selben Namen wie vorher besitzen, sonst wird der Server beim Testlauf nicht gestartet.
Optional kann man auch den Server in der Komandozeile manuell mit:

java –jar selenium-server-standalone-2.31.0.jar

...starten.

Jetzt erstellen wir eines neues Netbeans-Projekt mit den Namen “SeleniumEinfuehrung” unter dem Pfad “C:\xampp\htdocs\seleniumeinfuehrung”. Wir erstellen eine neue Datei vom Typ Selenium » Selenium Test Case for PHP.

netbeans_new_selenium_test

Wir werden aufgefordert einen Ordner für die “test files/data” festlegen, welchen wir auf “C:\xampp\htdocs\seleniumeinfuehrung\testfiles/data” festlegen. Nach dem festlegen eines Namens wird uns ein Grundgerüst eines Selenium-Tests erstellt.

image

Mit Umschalt + F6, oder Rechtsklick auf die Datei und Run, können wir unseren ersten automatisierten Test in Netbeans starten. Das Ergebnis sollte wie folgt aussehen:

netbeans_selenium_first_passed

Jetzt können wir den Test, welchen wir mit der Selenium IDE erstellt haben in eine PHPUnit-Klasse überführen:

Wir starten wieder den Test und bekommen ein erfolgreich abgeschlossenes Testergebnis:

netbeans_selenium_second_passed

Anmerkung: Um Intelli-Sense zu nutzen, kann man unter Include Path » Properties » PHP Include Path » Add Folder… den PHPUnit-Ordner angeben (“C:\xampp\php\pear\PHPUnit”).

Das Netbeans-Projekt könnt ihr hier downloaden: seleniumeinfuehrung.zip