Damit Sie als Admin stets über alle Parameter Ihrer IT Bescheid wissen, befasst sich IT-Administrator im Juni mit dem Schwerpunkt 'Monitoring'. Darin lesen Sie ... (mehr)

Resurrectio: Chrome-Extension als Recorder

Wie angedeutet eignet sich CasperJS auch für komplexere Szenarien, die mehrere Navigationsschritte auf einer Website umfassen. Dazu ermöglicht es das Programm, den HTML-Quellcode zu analysieren und auf ausgewählte Elemente zu "klicken", egal ob Links oder Forms. Damit lässt sich zum Beispiel der oben angesprochene Shopping-Vorgang simulieren. Um diese Aufgabe zu vereinfachen, gibt es unter dem Namen Resurrectio eine Extension für den Chrome-Browser, die die echte Interaktion mit einer Website aufnimmt und am Ende den zugehörigen Quellcode für einen CasperJS-Test ausgibt. Dies erspart einiges an Arbeit und weitgehend die detaillierte Auseinandersetzung mit der Struktur der getesteten Site. Anpassungen lassen sich natürlich immer noch vornehmen.

Der hier getestete Ablauf soll eine Einzelheftbestellung im Shop des Heinemann-Verlags sein. Dabei soll es zum Test genügen, dass das gewünschte Heft nach einem Klick auf dem Shopping-Button im Cart landet. Zur Aufnahme starten wir bei der URL "https://shop.heinemann-verlag.de/it-administrator/einzelhefte/162/ausgabe-maerz-2017-malware-und-angriffe-abwehren" und aktivieren die Resurrectio-Extension. Nachdem das Heft im Cart gelandet ist, stoppen wir die Aufnahme wieder und lassen uns von der Extension den CasperJS-Code anzeigen. Listing 4 zeigt einen Ausschnitt.

Listing 4: Test-Code fürs Shopping

casper.test.begin('Test Heinemann-Shop', function(test) {
    casper.start('https://shop.heinemann-verlag.de/it-administrator/einzelhefte/162/ ausgabe-maerz-2017-malware-und-angriffe-abwehren');
    casper.waitForSelector("form[name=sAddToBasket] input[type=submit][value='In den Warenkorb']",
       function success() {
          test.assertExists("form[name=sAddToBasket] input[type=submit][value='In den Warenkorb']");
          this.click("form[name=sAddToBasket] input[type=submit][value='In den Warenkorb']");
       },
       function fail() {
          test.assertExists("form[name=sAddToBasket] input[type=submit][value='In den Warenkorb']");
    });

Listing 5: Ist die Erfolgsmeldung zu sehen?



casper.waitForSelector(".ajax_add_article_container .heading h2",
    function success() {
       msg_success = "Der Artikel wurde erfolgreich in den Warenkorb gelegt"
       test.assertEquals(casper.fetch Text (".ajax_add_article_container .heading h2"), msg_success, "check success message");
    },

Hier ist die erwähnte URL zu sehen, bei der der Einkaufsvorgang startet. Danach folgt die erste Erwartung in Form eines CSS3-Selectors, der das HTML-Formular und den Submit-Button spezifiziert. Dies alles hat Resurrectio automatisch erzeugt. Alternativ zu CSS3 erlaubt CasperJS es auch, XPath-Expressions für die Auswahl von HTML-Elementen zu verwenden. Mit der Funktion "waitForSelector" wartet CasperJS, bis eventuell im virtuellen Browser das gesuchte HTML-Element auftaucht. Die maximale Wartezeit wird durch einen konfigurierbaren Timeout bestimmt, der per Default fünf Sekunden beträgt. Der Test "assertExists" verifiziert die Existenz des Elements.

Nach einem Klick auf den Submit-Button (in CasperJS "this.click") zeigt der Heinemann-Shop ein Popup in Form eines Div-Elements an (Bild 1), das Resurrectio ebenfalls im Quellcode abgebildet hat. An dieser Stelle greifen wir aber manuell ein und testen, ob dort die erwartete Erfolgsmeldung auftaucht. Der zugehörige Code ist in Listing 5 zu sehen.

Ausgeführt wird ein solches Testskript zusätzlich mit dem Parameter "test", der automatisch einen Testrunner erstellt, der sich um das Setup von CasperJS kümmert. Gelegentlich gibt es Probleme mit SSL-Verbindungen, weil CasperJS per Default SSLv3 verwendet, die sich mit zwei weiteren Parametern umgehen lassen:

node_modules/casperjs/bin/casperjs --ignore-ssl-errors=true --ssl-protocol=any test shopping.js

Das Ergebnis eines solchen Laufs ist in Bild 2 zu sehen. Nach alter Unix-Manier gibt der Testrunner außerdem bei Erfolg den Wert 0 zurück; schlägt der Test fehl, ist es ein Wert ungleich 0.

Weil es in den Testskripts keinen Konstrukteur "create" gibt (wie in Listing 2), müssen Sie dort eventuelle Optionen anders angeben, nämlich so:

casper.options.viewportSize = {width: 1259, height: 868};

Treten bei der Entwicklung eines CasperJS-Skripts Probleme auf, helfen bei der Fehlersuche die folgenden Optionen:

casper.options.verbose = true;
casper.options.logLevel = "debug";

Jetzt können Sie wie gezeigt Ihre CasperJS-Testsskripts in das Monitoring-System integrieren. Oder Sie greifen auf das Projekt HolyGhost [5] zurück, das eine solche Integration in Nagios und andere Monitoring-Systeme mit dem gleichen Plug-in-Interface (Naemon, Shinken, Icinga) erleichtert.

Fazit

CasperJS ermöglicht es, mit wenig Javascript-Code komplexe Interaktionen mit Websites abzubilden und darauf basierend funktionale Tests zu schreiben. Vereinfacht wird die Aufgabe durch die Chrome-Extension Resurrectio, die eine Browser-Interaktion aufnimmt und den zugehörigen Test-Code erzeugt. Die daraus entstehenden CasperJS-Tests lassen sich in Monitoring- oder Continuous-Integration-Systeme integrieren, um die Tests zu automatisieren.

(of)

Link-Codes

[1] CasperJS: http://casperjs.org/

[2] PhantomJS Download: http://phantomjs.org/download.html/

[3] Node.js: https://nodejs.org/en/download/

[4] Nagios Plugin Development Guidelines: https://nagios-plugins.org/doc/guidelines.html/

[5] HolyGhost: https://github.com/m-kraus/HolyGhost/

Ähnliche Artikel

comments powered by Disqus
Mehr zum Thema

HTTP/2 mit Nginx und Co.

Seitdem die finale Version von HTTP/2 fertiggestellt worden ist, wurden zahlreiche Implementationen des neuen Webprotokolls veröffentlicht. Nachdem zuerst die gängigen Browser mit der Umsetzung vorangegangen waren, zogen nun die verbreiteten Webserver nach. Wir beschreiben, wie Sie HTTP/2 in Nginx aktivieren, und werfen einen Blick auf die Alternativen mit Apache und H2O.

Artikel der Woche

Eigene Registry für Docker-Images

Wer selber Docker-Images herstellt, braucht auch eine eigene Registry. Diese gibt es ebenfalls als Docker-Image, aber nur mit eingeschränkter Funktionalität. Mit einem Auth-Server wird daraus ein brauchbares Repository für Images. (mehr)
Einmal pro Woche aktuelle News, kostenlose Artikel und nützliche ADMIN-Tipps.
Ich habe die Datenschutzerklärung gelesen und bin einverstanden.

Konfigurationsmanagement

Ich konfiguriere meine Server

  • von Hand
  • mit eigenen Skripts
  • mit Puppet
  • mit Ansible
  • mit Saltstack
  • mit Chef
  • mit CFengine
  • mit dem Nix-System
  • mit Containern
  • mit anderer Konfigurationsmanagement-Software

Google+

Ausgabe /2019