Automatische Browsertests mit Selenium: Zielvorstellung und Einführung Selenium Builder (Teil 1)

Diese 6-teilige Blogpost-Reihe befasst sich mit dem Thema Test Automatisierung für grafische Benutzeroberflächen von Webanwendungen. Im ersten Teil wird eine kurze Einführung über das Ziel, welches mit den automatischen Tests mit Hilfe des Werkzeug Selenium Builder erreicht wird, gegeben. Des Weiteren wird auf die Installation der Software eingegangen und es erfolgt ein Vergleich mit dem Vorgänger-Tool, der  Selenium IDE, welche häufiger verwendet wird, aber einige Nachteile aufweist. Abschließend wird die Funktionsweise anhand eines kleinen Beispiels dargestellt.

In den weiteren Teilen der Blogpost-Reihe geht es um ein komplizierteres Beispiel mit mehreren Schritten sowie um Tipps und Tricks in Verbindung mit GUI Elementen (z. B. CKEditor, Farben, Tooltips, Menüs und Dialoge). Ebenfalls wird auf ein Client-Server-Szenario mit Selenium Grid im Zusammenspiel mit dem CI Server Jenkins eingegangen.

Warum Selenium Builder?

Ein gängiges und weit verbreitetes Tool für automatisiertes GUI Testing einer Web Applikation und die Aufzeichnung der Testfälle ist das Firefox Add-on Selenium IDE [1]. Die Neuentwicklung Se Builder wird auf GitHub gehostet und unter der Apache 2 Lizenz veröffentlicht. Gegenüber der Selenium IDE bietet Se Builder bisher noch einen geringeren Funktionsumfang [2][3]. Die nachfolgende Tabelle zeigt den vollständigen Funktionsumfang von Se Builder:

Die Funktionsumfänge von Selenium IDE, die noch nicht in Se Builder enthalten sind, werden nachfolgend aufgeführt:

Die aktuellste Liste aller Methoden gibt es auf der Homepage des Projekts bei GitHub [4]. Die verfügbaren Methoden untergliedern sich in die Gruppen:

• Navigation
• Input
• Misc
• Assertion
• Verify
• Wait und
• Store

Der große Vorteil von Se Builder liegt in der Unterstützung des Browser-Treibers Selenium WebDriver. Damit ist es möglich, fast jeden beliebigen Browser native fernzusteuern. Das bedeutet ihn genauso zu steuern, wie wenn ein menschlicher Anwender den Browser bedienen würde. Es stehen die folgenden Treiber zur Verfügung [5]: 

• AndroidDriver
• ChromeDriver
• EventFiringWebDriver
• FirefoxDriver
• HtmlUnitDriver
• InternetExplorerDriver
• PhantomJSDriver
• RemoteWebDriver
• SafariDriver

Außerdem unterstützt Se Builder den Selenium Server mit seiner eingebauten Grid-Funktion [6]. Damit ist es möglich, ein eigenes Grid an Testrechnern zu betreiben und komplette Testreihen auf verteilten Knoten zu fahren. Beispielsweise könnte eine Testreihe die Tests einer Webanwendung mit den Browsern Internet Explorer IE8 bis IE11 vorsehen.

Zielvorstellung

Zur Steigerung der Softwarequalität unserer Webanwendungen setzen wir auf kontinuierliche Integration. Dafür verwenden wir den Buildserver Jenkins [7]. Dieser Server steuert alle Softwaretests. Neben den Unit- und Integrationstests soll er insbesondere auch die funktionalen Tests steuern und kontrollieren. Außerdem sollen bestimmte Zielplattformen (insbesondere Internet Explorer 8) getestet werden können. Und zuletzt muss das Anlegen von neuen bzw. das Ändern von bestehenden Tests einfach und schnell von der Hand gehen und keine lange Einarbeitungszeit oder umfangreiches Expertenwissen erfordern.

Installation

Die Installation des Se Builders ist sehr einfach. Zuerst lädt man sich das Firefox Add-on aus dem Internet herunter. Der Anbieter Sauce Labs Inc. bietet es als XPI-Datei direkt auf seiner Homepage an unter https://saucelabs.com/builder. Alternativ kann es von GitHub unter https://github.com/sebuilder/se-builder heruntergeladen werden. Beim Download der XPI-Datei erkennt Firefox automatisch, dass es sich um ein Add-on handelt und fragt, ob es gleich installiert werden soll. Andernfalls wird das Add-on nachträglich installiert, durch Selektion der Option „Zahnrad -> Add-on aus Datei installieren“ auf der Seite about:addons.
Die grafische Benutzeroberfläche des Add-ons wird mit der Tastenkombination Strg+Alt+B im Firefox gestartet und erscheint als eigenständiger Dialog.

Ich empfehle die Spracheinstellung auf „en“ zu belassen, da die deutsche Formulierung teilweise nicht so gelungen ist. Mit der englischen Übersetzung hat man zudem gleich die richtigen Suchbegriffe parat, falls man mal Unterstützung benötigt. Nach dem Öffnen des Add-ons gibt es im Wesentlichen die beiden Alternativen: 

• Open a script or suite
• Start recording at

Beispiel für API.getBulkRequest

Wir zeichnen ein kleines Beispiel auf, indem im exensio IT Blog nach dem Begriff „Consulting“ gesucht wird. Dazu wähle ich die Option „Start recording at“. Das zugehörige Textfeld ist entweder schon mit der URL http://blog.exensio.de/ gefüllt (wenn ich vor dem Start des Se Builders im Firefox die entsprechende Seite geöffnet habe). Andernfalls geben Sie im Textfeld die URL bitte an und klicken danach auf den Knopf „Selenium 2“. Wir befinden uns jetzt im Aufnahme-Modus, zu sehen an der drehenden Sanduhr im rechten oberen Eck. Se Builder hat bereits den ersten Schritt der Aufzeichnung eingetragen, nämlich get http://blog.exensio.de/. Jetzt kann man bequem den Fokus zum Firefox Hauptfenster wechseln und dort ins Suchfeld rechts klicken. Alle vorgenommenen Klicks und Eingaben, werden vom Se Builder aufgezeichnet und später in unserem Skript gespeichert. Nach Klick in das Suchfeld geben wir den Text „Consulting“ ein und klicken auf den Knopf „Suchen“. Se Builder hat dafür drei weitere Schritte aufgezeichnet: 

• clickElement css selector : body
• setElementText locator name: search, text: Consulting
• clickElement css selector: input.gsc-search-button

Beenden wir unsere Aufnahme vorläufig, indem wir den Fokus wieder auf das Add-on Se Builder wechseln und dort den Knopf „Stopp recording“ drücken. Jetzt sollten wir als erstes das entstandene Skript speichern. Dazu im Se Builder im Menü File den Eintrag Save anklicken und das JSON Skript an beliebiger Stelle abspeichern.

Abspielen

Jetzt ist es an der Zeit, das aufgenommene Skript zu testen. Hierzu wird am besten ein neuer Tab geöffnet. Danach öffnen wir im Se Builder das Menü Run und wählen den Eintrag „Run test locally“ aus. Der Fokus kann dabei beim Add-on Se Builder bleiben; es gibt keinen Grund, das Hauptfenster von Firefox in den Vordergrund zu holen. Schaut man sich das Firefox Hauptfenster dennoch an, sieht man wie von Geisterhand die Webseite des exensio IT Blog geöffnet wird. Danach wird im Suchfeld das Wort „Consulting“ eingegeben und sofort darauf werden die Suchergebnisse angezeigt. Schaut man sich parallel die GUI des Se Builders an, so sieht man, dass jeder unserer 4 Schritte zuerst mit gelber Hintergrundfarbe und gleich danach mit grüner Hintergrundfarbe dargestellt wird. Nachdem das Skript zu Ende durchlaufen wurde, sieht die GUI wie folgt aus.

Status und Farben

Se Builder stellt beim Abspielen die einzelnen Schritte mit unterschiedlichen Hintergrundfarben dar. Jede Farbe hat eine andere Bedeutung:

Skript bearbeiten

Jetzt möchten wir das Skript noch um weitere Schritte ergänzen. Falls Se Builder zuvor beendet wurde, kann man jetzt nach dem Start die Option „Open a script or suite“ auswählen und das Beispielskript öffnen. Falls immer noch die vier Schritte mit grüner Hintergrundfarbe angezeigt werden, bitte den Knopf „Clear Results“ drücken. Wir wollen das Skript dahingehend bearbeiten, dass es nach dem Begriff „Consulting“ sucht und danach den Blogpost mit dem Titel „ClaretPortal wird mobil (Teil 3) - Fokus: Endless/Infinite Scrolling mit jQuery Mobile“ öffnet.

Anders als zuvor wollen wir dieses Mal die Abfolge von Klicks und Eingaben nicht aufzeichnen, sondern Schritt für Schritt eingeben. Dafür bewege ich meinen Mauszeiger über den letzten Schritt im Se Builder (clickElement css selector: input.gsc-search-button). Sogleich erscheint auf der linken Seite ein Menü welches mir diverse Möglichkeiten zur Verfügung stellt.

Ich wähle die Option „new step below“. Beim Ablegen eines neuen Schritts wird immer clickElement id: angelegt. Benötigt man eine andere Funktion, klickt man einfach auf den Funktionsnamen (hier: clickElement) und wählt dann die gewünschte Funktion aus.

Ich möchte den Fall absichern, dass sich die Darstellung der Suchergebnisse evtl. verzögert (z. B. falls der Server ausgelastet ist). Deshalb möchte ich zunächst die Funktion waitForTextPresent ausführen. Man findet sie im Abschnitt Wait. Als Argument erwartet die Funktion einen Text. Ich verwende dafür einen Teil des Titels des Blogposts, nämlich „(Teil 3) - Fokus". Anschließend füge ich noch einen Schritt unterhalb ein (erneut „new step below“ anklicken). Dieses Mal passt die vorausgewählte Funktion clickElement. Als Argument erwartet die Funktion eine ID oder eine andere Zielangabe. Klickt man auf das Wort „id“, hat man die Möglichkeit, eine ID als Freitext einzugeben.

Wesentlich bequemer ist, die Zielauswahl mit der Maus vorzunehmen. Dazu klickt man den Text „Find a different target“ an. Daraufhin springt der Fokus ins Hauptfenster von Firefox und befindet sich nun im Element-Auswahl-Modus. Jedes Element, das sich unter dem Mauszeiger befindet, wird jetzt automatisch fokussiert. Der Fokus ist an der Umrandung des Elements zu erkennen. In diesem Modus lässt sich das Wunsch-Element leicht erkennen und von anderen Elementen unterscheiden. Im Folgenden wird das Suchergebnis genau untersucht und fünf zugehörige Elemente identifiziert.

Ich entscheide mich für das zuerst ausgewählte Element (nur der Titel) und klicke dieses Element an. Der Fokus springt dann automatisch wieder zurück zum Se Builder. Außerdem wechselt der Locator-Typ von „id“ auf „link text“. Ferner wird folgender Linktext automatisch in das freie Textfeld eingetragen: „exensio it blog: ClaretPortal wird mobil (Teil 3) - Fokus ...“. Se Builder schlägt außerdem alternative Locators vor. Es liegt im Ermessen des Anwenders hier den geeigneten Locator auszuwählen. Das fertige Skript enthält danach die folgenden 6 Schritte:

Führt man das Skript nun aus, so wird die „exensio IT Blog“-Seite geöffnet, nach dem Begriff „Consulting“ gesucht, gewartet bis das Blogpost mit dem Text „(Teil 3) - Fokus" angezeigt wird und schließlich das Blogpost mit dem Titel „exensio it blog: ClaretPortal wird mobil (Teil 3) - Fokus ...“ angezeigt.

Im nächsten Teil [8] dieser Reihe erstelle ich eine Test-Suite, also eine Abfolge von Tests mit mehreren Skripten.

Links

[1] http://docs.seleniumhq.org/projects/ide
[2] https://github.com/sebuilder/se-builder/wiki/Selenium-2-Step-Support-Table
[3] http://blog.trident-qa.com/en/selenium-builder-vs-ide-list
[4] https://github.com/admc/se-builder/blob/master/seleniumbuilder/chrome/content/html/js/builder/selenium2/selenium2.js#L27
[5] http://docs.seleniumhq.org/projects/webdriver
[6] https://code.google.com/p/selenium/wiki/Grid2
[7] http://jenkins-ci.org
[8] Automatische Browsertests mit Selenium: JSON Dateiformat und Test-Suite (Teil 2)