Ein Anwendungsbeispiel

Frontend-Testing mit CasperJS
Kommentare

CasperJS ist eine Open Source JavaScript Utility, mit der das Schreiben von Test ganz einfach von der Hand gehen soll. Ganz konkret handelt es sich dabei um eine Navigation Scripting und Testing Utility für den PhantomJS WebKit Headless Browser und SlimerJS. Wir wollen uns das Tool hier einmal an einem konkreten Beispiel genau ansehen: Das Entwicklungsteam von MSNBC hat CasperJS im Einsatz und scheint mehr als zufrieden.

Mit CasperJS soll es einfacher werden, ein Full Navigation-Szenario zu definieren, und es bringt Funktionen, Methoden und Syntax-Sugar mit, die euch helfen sollen, Tasks, wie Remote DOM Testing, Event Logging, das Ausfüllen und Abschicken von Form und eben das Schreiben funktionaler Test-Suites (wobei diese als JUnit XML gespeichert werden), zu absolvieren. Die vollständige Dokumentation  und den Download findet ihr auf casperjs.org.

Einen Anwendungsfall von CasperJS beschrieb der Entwickler Juan Pablo Novillo Requena erst kürzlich auf dem Lullabot-Blog: Die Beispiel-Website ist dabei keine geringere als MSNBC, die Medienseite des amerikanischen Fernsehsenders NBC. Die Aufgabe: Überprüfen, dass die Core Parts des Systems wie erwartet funktionieren und sich keine Regression Bugs einschleichen. An das Testing Framework wurden also folgende Anforderungen gestellt:

  • Fokus auf dem Frontend
  • Tests zur Simulation der User Navigation
  • Tests auf lokalen, Development- und Testing-Evironments
  • etc.

CasperJS habe dem Team zunächst gefallen, da die Test eben in JavaScript geschrieben sind, denn das fühle sich an, als ob man einfach die Browser Console öffne, JavaScript-Kommandos eingebe und so prüfe, ob eine Variable verfügbar ist oder ein CSS3-Selektor das richtige Ergebnis zurückgibt, so Novillo Requena. Darüber hinaus sei es sehr einfach zu installieren gewesen.

Als Vorteil stellte sich auch PhantomJS als verwendeter Browser heraus – vor allem wegen seiner Schnelligkeit.

Teil des Blog-Beitrags ist auch das Test-Beispiel, mit dem geprüft wird, ob der Header erwartungsgemäß lädt und 10 Artikel gelistet sind.

Zum Abschluss noch ein Rat: Getestet werden, sollte nur was kritisch ist oder viele Dependencies hat. Das Team von MSNBC hat ein Repository auf GitHub erstellt, das die Basics enthält, wie Test innerhalb eines Projektes installiert, konfiguriert und strukturiert werden.

Aufmacherbild: Vector concept in flat retro style – bug and virus in the programming code von Shutterstock / Urheberrecht:venimo

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -