Selenium für Firefox

Selenium für Firefox

In diesem Beitrag geht es nur sekundär um WordPress. Es geht um ein Plugin für Firefox: Selenium.

Selenium für Firefox dient dem automatisierten Testen von Webseiten.
Die Entwickler von Selenium beschreiben das Tool als „Browser Automation“ – also eine Automatisierung des Browsers.
Es gibt mehrere Möglichkeiten Selenium zu benutzen: http://docs.seleniumhq.org

Der leichteste Einstieg ist bestimmt das Plugin für Firefox. Bisher reichte mir dieses auch vollkommen aus.

Das Plugin kannst du dir hier runterladen: http://docs.seleniumhq.org/download/
Klicke dabei auf den Download im Bereich Selenium IDE. Nach dem Download installiert Firefox das Plugin.

Welche Vorteile bringt mir Selenium IDE für Firefox?

Wenn man Webseiten entwickelt kommt man irgendwann an einen Punkt, wo man seine Seite auch testet. In den meisten Fällen passiert das sowieso schon während der Entwicklung. Das Zeitraubende daran ist, dass man für gewöhnlich x-mal dasselbe durchspielt. Mein Lieblingsbeispiel dafür sind Webshops:

  • Ein Produkt auswählen
  • Die Menge des Produktes angeben
  • Das Produkt in den Warenkorb legen
  • Den Warenkorb ansehen
  • Zum Checkout wechseln
  • Seine ganzen Daten angeben – Name, Adresse, E-Mail,…
  • Auf „Bestellen“ klicken

In diesem Beispiel sind es „nur“ sieben Schritte. Bei der Entwicklung eines Webshops kann es vorkommen, dass man diese Schritte sehr, sehr oft wiederholt…
Und genau da kommt das „Automatisieren des Browsers“ mittels Selenium IDE zum Einsatz!

Beispiel mit Selenium IDE

Schauen wir uns gleich das oben genannte Beispiel an. Dazu besuchte ich einfachheitshalber einen Demoshop von WooCommerce.

Als erstes öffnest du das Selenium Plugin.

Selenium in Firefox öffnen

Selenium in Firefox öffnen

Es öffnet sich dann ein eigenes Pop-Up Fenster in Firefox. Das sieht dann folgend aus:

Selenium für Firefox

Selenium für Firefox

Dieses Pop-Up ist unser Selenium Fenster. Meist ist es so, dass Selenium auch gleich beginnt euer Verhalten auf der Webseite aufzunehmen. Das kannst du an dem „gedrückten“ Recordknopf im rechten Eck erkennen, bzw. wenn schon etwas im Table steht:

Selenium ist aktiviert

Selenium ist aktiviert

D.h. du könntest erst einmal den Recordknopf deaktivieren.

Unterschied zwischen Test Case und Test Suite

Eine Test Suite dient uns dazu, mehrere Test Cases gebündelt zu speichern. Das macht insofern Sinn, als dass jeder Test Case anders ist. So kann z.B. der erste Test Case der Ablauf eines Produktkaufes sein. Der nächste Test Case könnte das Ausfüllen eines Formulars beinhalten.

Ersten Test Case erstellen

Als ersten Schritt benennen wir den aktuellen Test Case (derzeit „Untitled“) um. Das geschieht, indem du die rechte Maustaste auf den Namen  klickst (hier „Untitled“) und in weiterer Folge Properties auswählt:

Selenium Test Case umbenennen

Selenium Test Case umbenennen

Das Feld File kannst du auslassen. In das Feld Title kommt der Titel des Test Cases rein:

Selenium Test Case benennen

Selenium Test Case benennen

Ersten Test Case aufnehmen

Danach kann es schon losgehen. Du betätigst den Recordknopf und klickst auf der Website herum. 🙂
Innerhalb des roten Rahmen im Bild siehst du einen Zwischenstand von meinem Verhalten/Klicken auf der Website:

Selenium - Verhalten wird aufgezeichnet

Selenium – Verhalten wird aufgezeichnet

Hier klickte ich auf ein Produkt, erhöhte die Menge auf zwei Stück und ging auf den Warenkorb. Ihr seht, dass Selenium die Aktionen immer in Command, Target und Value speichert. Darauf gehe ich in späteren Blogeinträgen noch genauer ein.

Nachdem ich alles für meinen Test Case durchgespielt hatte, beendete ich die Aufnahme:

Selenium Aufnahme beenden

Selenium – Aufnahme beenden

Bei meinem Test Case ging ich noch weiter bis zum Checkout und füllte alle notwendigen Felder aus:

Ansicht der ausgefüllten Felder

Ansicht der ausgefüllten Felder

Der Test Case dazu sieht so aus:

Test Case speichern

Um diesen Test Case jederzeit wieder zur Verfügung zu haben, speichern wir ihn nun. Dazu muss das Selenium Fenster angewählt (im Vordergrund) sein! Sonst bekommst du im Menü andere Menüpunkte! Da wir das erste mal diesen Test Case speichern, gehst du auf Datei » Save Test Case As…

Selenium Test Case speichern

Selenium Test Case speichern

Dann einen Namen vergeben und speichern. In meinem Fall gibt es einen eigenen Ordner auf dem Rechner der Selenium heißt. Darin speichere ich immer alle Test Suites und Test Cases ab. So sieht das dann aus:

Selenium Test Case speichern 2

Selenium Test Case speichern 2

Test Suite speichern

Wie erwähnt, kann man in einer Test Suite mehrere Test Cases bündeln. Um eine Test Suite zu speichern muss das Selenium Fenster angewählt (im Vordergrund) sein! Sonst bekommst du im Menü andere Menüpunkte! Da wir das erste mal eine neue Test Suite speichern, gehst du auf Datei » Save Test Suite As…

Selenium Test Suite speichern

Selenium Test Suite speichern

Dann gibst du einen sinnvollen Namen für diese Test Suite an.

Selenium Test Suite speichern 2

Selenium Test Suite speichern 2

Danach finden sich beide Dateien in dem Ordner. Wichtig: Selenium hat keine Dateiendung für Test Cases oder Test Suites. Deshalb umgehe ich das mit der Benennung. Wie in meinem Beispiel, schreibe ich bewusst -Suite an den Projektnamen dran.
Ich bin sogar noch einen Schritt weitergegangen und habe die Test Suite und den Test Case in einen eigenen Unterordner gepackt:

Selenium - gespeicherte Daten

Selenium – gespeicherte Daten

Gespeichtere Test Suite laden

Jetzt kannst du jederzeit Selenium schließen und die Test Suite/ den Test Case laden. Dazu Selenium neu öffnen, dann auf Datei » Open und die gewünschte Test Suite auswählen.

Selenium - Datei laden

Selenium – Datei laden

Und da in der Test Suite der Test Case (verlinkt) gespeichert ist, wird der auch gleich geöffnet.

Selenium - Test Case wurde geladen

Selenium – Test Case wurde geladen

Gespeicherten Test Case abspielen lassen

Nun kommen wir aber zur eigentlichen „Zauberei“! Nämlich dem Abspielen des Test Cases.
Im oberen Bereich befinden sich verschiedene Bedienelemente:

  • Fast/Slow
    • Hier kannst du die Abspielgeschwindigkeit des Test Cases einstellen.
    • Ist der Schieberegler auf Fast, werden alle Befehle sehr schnell durchgeführt.
    • Bei Slow kannst du zusehen, wie der Browser langsam durch die Webseite navigiert.
  • Play Entire Test Suite
    • Der Name verrät schon alles. Sollten sich mehrere Test Cases in der Test Suite befinden, werden alle hintereinander abgespielt.
  • Play Current Test Case
    • Der aktuell ausgewählte Test Case wird abgespielt.
    • Durch Doppelklick wählt man einen Test Case aus (die Schrift wird dann Fett).
  • Pause/Resume
    • Pausieren des Abspielens.
  • Step
    • Wenn man auf Pause gedrückt hat, kann man hier händisch die Schritte weiter klicken.

Resümee

Wir merken also: für immer wiederkehrende Tätigkeiten und vor allem für das Testen von Webseiten ist Selenium IDE für Firefox ein unglaublich wichtiges Tool! Nur so lässt sich effizient Testen und Debuggen.