Logo WebdriverIO

Teste deine Webseite mit WebdriverIO – superschnell und einfach!

Einleitung

Es gibt verschiedene Gründe, warum internetaffine Menschen gerne ein Tool haben wollen, mit dem sie programmatisch durch den Browser navigieren können. Der wahrscheinlich häufigste Anwendungsfall ist jedoch das Testen der eigenen Webseite.

Hier kommt Selenium ins Spiel!

Selenium

Selenium ist ein weit verbreitetes Tool, dass es zum Beispiel Qualitätssicherern erlaubt, ihre manuellen, täglichen Abläufe einmal in Code runterzuschreiben und diese dann durch einen Knopfdruck automatisch ablaufen zu lassen. Das spart Zeit und nerven und ist sehr skalierbar, da ein einmal geschriebener Test im besten Fall nicht mehr “angefasst” werden muss und neue Tests einfach hinzugefügt werden können.

Was hat das mit NodeJS, Gulp und WebdriverIO zu tun?

Ganz einfach: Hast Du schonmal ein komplett neues Selenium-Projekt in zum Beispiel Java aufgesetzt und damit erfolgreich getestet? Konnte deinen programmierten Code noch ein anderer Mitarbeiter verstehen bzw. wusste der nächste Kollege, der vielleicht noch nie Java genutzt hat, was er gerade vor sich sieht und konnte schnell anfangen, neue Tests zu schreiben?

Antwort eines Entwicklers: “Klar! Wenn ich programmiere, versteht das jeder….auch ohne Kommentare!” – Nope, im Regelfall nicht wahr und erst recht nicht, wenn der Kollege, der damit arbeiten muss, kein erfahrener Entwickler, sondern manueller Qualitätssicherer ist.

NodeJS

Der eigentliche Vorteil liegt in der Lesbarkeit und Leichtgewichtigkeit von NodeJS.
NodeJS ist eine auf JavaScript basierende Laufzeitumgebung, die sich zum Entwickeln von Komplexen Servern aber auch genauso für kleine Anwendungen eignet, da sie nicht so Hardwarehungrig ist und wenig Vorkenntnisse und Konfiguration benötigt.

Gulp

Zusammen mit Gulp wird selbst die ausführung und konfiguration kinderleicht.
Gulp ist ein Framework, dass es einem ermöglicht NodeJS-Anwendungen zu konfigurieren, Buildprozesse zu organisieren und generell sich das Leben mit NodeJS einfacher zu machen.

WebdriverIO

Die Spitze des Eisberges für das einfache, automatisierte Testen mit NodeJS ist dabei WebdriverIO. Dieses speziell für NodeJS entickwelte Tool ermöglicht es selbst unerfahrenen Hobbytestern, den vorhanden Code zu lesen und sogar in windeseile selber Tests zu implementieren. Ich habe mir sagen lassen, dass das sogar Spaß machen kann!

Vorbereitung / Installation

Die folgenden Schritte beinhalten eine Anleitung zum Installieren der benötigten Komponenten und das Herunterladen des Beispielprojektes zum besseren Verständnis.
Da ich selber am liebsten Ubuntu nutze, geht die komplette Anleitung davon aus, dass Ubuntu oder ein ähnliches, Linux-basiertes, System bei dir installiert ist.

Als erstes sollten wir uns NodeJS installieren, da es die Grundlage für die folgenden Schritte bildet.

Öffne den Terminal (ctrl + alt + T) und gib folgende Schritte nacheinander ein und bestätige jeweils mit Enter:

Als erstes installieren wir nvm (node version manager zur besseren versionsverwaltung von NodeJS)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

bash ~/.nvm/nvm.sh

Öffne nun deine .bashrc – Datei via:

nano ~/.bashrc

und füge folgendes unten in die Datei ein:

export NVM_DIR=“$HOME/.nvm“
[ -s „$NVM_DIR/nvm.sh“ ] && . „$NVM_DIR/nvm.sh“ # This loads nvm

So haben wir dafür gesorgt, dass du auch bei einem Neustart nvm als Befehl im Terminal verwenden kannst.

Jetzt installieren wir via nvm NodeJS mit folgendem Befehl
(Zum Zeitpunkt des Schreibens dieses Blogs war die version 5.6.0 die neuste Version, weshalb wir diese verwenden werden.)

nvm install 5.6.0

Haben wir NodeJS so installiert, wurde bereits npm mitinstalliert.
npm ist das package-system von node, was uns später ermöglicht, weitere Libraries, die wir unter der Haube nutzen, zu laden und zu verwenden.

Wenn alles funktioniert hat, sollte man bei jeder der folgenden drei Eingaben im Terminal eine Version angezeigt bekommen:

nvm –version

node -v

npm -v

Als nächstes clonen wir das öffentliche Projekt, das ich auf http://github.com erstellt habe, um die richtige Ordnerstruktur zu haben.

Dafür brauchen wir als erstes git (git ist das wohl am weitesten verbreitete Versionierungstool, das wir hier benötigen, um das Projekt, das von mir erstellt wurde herunterzuladen)

sudo apt-get install git

Dann “clonen” also laden wir uns das projekt in den Ordner, in dem wir uns im Terminal gerade befinden. Wenn es ein andrer Ordner, wie zum Beispiel “projects” werden soll, erstellen wir diesen vorher via dem Terminal:

mkdir ~/projects

(Das Tilde-Zeichen “~” steht für den home-Ordner des momentanen users. Der erstellte Ordner landet also unter /home/[derEingeloggteUser]/…).
Nun navigieren wir in den so erstellen ordner

cd ~/projects

…und clonen das Projekt.

git clone https://github.com/unicorn-it/wdio-mocha-example.git

Ist git damit fertig, navigieren wir in den so erstellten Ordner.

cd wdio-mocha-example

Hier müssen wir erstmal dafür sorgen, dass node alle Abhänigkeiten lokal herunterlädt, um diese während des testens nutzen zu können:

npm install

Als nächstes installieren wir Gulp global, damit wir es im terminal direkt benutzen können:

npm install -g gulp

Ausführung

Wir haben jetzt das gesamte Projekt aufgesetzt und konfiguriert. Nun können wir die vorbereiteten Tests starten:

gulp test

Nach der Eingabe sollte im Terminal zu sehen sein, wie der selenium-standalone-server heruntergeladen wird, danach sollte sich Chrome wie von Zauberhand öffnen, auf webdriver.io gehen und den Webseitentitel überprüfen.

Wichtig: Hast du kein Chrome lokal installiert, kannst du in der Datei wdio.conf.js die Stelle suchen, an der browserName steht und dort das Wort ‚chrome‘ durch zum Beispiel ‚firefox‘ ersetzen.
Dann einfach nochmal “gulp test” ausführen.

Wenn du im Terminal die Aussage “2 passing” , meist in grün, lesen kannst, hat alles funktioniert!

Überprüfen wir doch einmal, was eigentlich gerade wie getestet wurde. Sehen wir uns die Datei sample.js in wdio-mocha-example/test/specs/sample/ – Verzeichnis an.

samplejs

in dieser Datei wird per describe beschrieben, was in diesem Test getested werden soll.
Ich habe in diesem Beispiel zwei verschiedene Varianten der Aufrufe des webdrivers verwendet, der in dieser Datei durch die Variable browser dargestellt wird, die automatisch mit webdriverIO global gesetzt wird.

Im ersten Test nutzen wir die etwas veraltete Variante, die mit Callbacks arbeitet. Wenn wir hier also ein getTitle() ausführen, müssen wir ein Callback definieren, der durch “.then(..” hier dargestellt wird. Das kann zur folge haben, dass es zu timing-Problemen kommt, wenn man nun im Hauptstrang der Testmethode versucht, auf Variablen zuzugreifen, die erst in dem Callback gesetzt werden oder ähnliches.
Aus diesem Grund habe ich im zweiten Test die neue Variante mit Generatoren verwendet, was sich durch den Ausdruck yield zeigt. Schreibe ich vor browser.getTitle() ein yield, so wird diese Methode sequenziell ausgeführt und ich kann mir sicher sein, dass die Methode komplett ausgeführt wurde bevor die nächste Codezeile abgearbeitet wird.

So könnten wir uns noch viele weitere Testfälle einfallen lassen. Wenn du jetzt lust bekommen hast, dieses Setup für deine Seite zu nutzen, kannst du den Projekt-Ordner gerne kopieren oder das Projekt auf github.com forken und für dich verändern.

Möchtest du zum Beispiel einige eigene Tests schreiben, so kannst du einfach einen neuen Ordner unter /test/specs/ erstellen, dort eine .js – Datei anlegen und losschreiben.

Für weitere Informationen und Beispiele, was man mit dem WebdriverIO alles anstellen kann, empfehle ich, sich die Api-Dokumentation auf deren Webseite http://webdriver.io/api.html anzusehen.

Viel Spaß beim entwickeln deiner eigenen Tests!

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar