PhantomJS & casperJS

Vor kurzem bin ich durch die c’t auf 2 interessante Projekte gestoßen. PhantomJS ist ein Webbrowser ohne GUI und casperJS (http://casperjs.org/), ein Framework um PhantomJS (http://phantomjs.org/) per Skript zu steuern und wiederkehrende Aufgaben automatisiert zu erledigen.

Lange hat kein passendes Testszenario auf sich gewartet. Ich betreue mehrere Kunden, die auf einem Shared-Hosting-Server liegen. Jeder Kunde kann sich in Confixx einloggen und in der Weboberfläche ein Backup auf dem Server anstoßen. Bei mehreren Kunden wird das sehr schnell mühselig.

Also…her mit den Wunderwaffen.

var casper = require('casper').create();
var mouse = require("mouse").create(casper);

casper.start('http://www.server.de/ordner/', function() {
	this.fill('.login-table', { 'username': casper.cli.get(0), 'password': casper.cli.get(1) }, true);
	this.mouse.click(50, 275);
});
casper.then(function() {
	this.page.switchToChildFrame(0);
    this.click('[title="Backup"]');
});
casper.then(function() {
	this.mouse.click(256, 279);
	this.echo(casper.cli.get(0));
});
casper.then(function() {
	this.capture('screen.png');
});

casper.run();

Obiges Skript war schnell programmiert. Beim Aufruf werden Benutzername und Passwort als Argumente übergeben. Damit ist dieses Skript für jeden Kunden einsetzbar und muss nur mit den passenden Argumenten aufgerufen werden…kann also problemlos in ein Shell-Skript verpackt werden und per Scheduler automatisiert aufgerufen werden.

Das Skript ruft die Webseite auf und füllt das Anmeldeformular aus. Nach dem Absenden werden 2 Klicks automatisiert ausgelöst (x- und y-Koordinate als Argumente) und damit das Backup gestartet. Die richtigen Koordinaten für den Klick, bekommt man am einfachsten, wenn man sich per “capture” einen Screenshot anfertigen lässt und in einer Bildbearbeitung die Koordinaten ermittelt.

Zum Schluss habe ich noch (http://www.ncftp.com/) ein Skript für ncFTP geschrieben, welches mir die gesicherten Dateien automatisiert herunterlädt. Ebenfalls einen Job im Scheduler angelegt und fertig ist die Laube;)

CasperJS und PhantomJS sind wirklich einfach einzusetzende und sehr mächtige Werkzeuge, um wiederkehrende Aufgaben im Browser zu automatisieren. Eine ganz klare Empfehlung!

Horizontale Layer-Navigation mit jQuery

Eine wirklich gute und schlanke horizontale Navigation findet man unter http://runnable.com/UdQdRyHniSpKAAXx/create-a-horizontal-navigation-menu-bar-using-jquery.  Ich finde sie besser als jegliche AdobeSpry-Lösungen oder andere Ansätze, die ich gefunden habe. Denn sie ist wirklich kinderleicht und schnell angepasst und ins eigene Projekt eingepflegt.

jQuery: Link zum Ein- und Ausblenden eines Elements

Möchte man ein Element mit einem Klick jeweils ein- und mit einem weiteren Klick ausblenden, hilft folgendes Snippet:

<script type="text/javascript">
$(document).ready(function(){
   $('#einausblenden').click(function(){
      $('#elementID').toggle('slow');
   })
});
</script>

Dem Element mit der ID “einausblenden” wird die Funktion zugewiesen, die das Element mit der ID “elementID” abwechselnd ein- und ausblendet. Zeile 2 dient der Ausführung nach dem Laden des Dokuments. Klein aber fein;)

Javascript: Zugriff auf Element in einem iFrame, der wiederum einen Frame enthält

Zuerst einmal das Wichtigste: Tagelang testete ich die Anweisung lokal auf meinem Rechner. Nichts hat funktioniert. Scheinbar verhindert das Rechtemanagement einen Zugriff. Generell kann man nur auf Quellen der gleichen Domain zugreifen und Elemente verhindern.
Ein weiterer Fallstrick: Das Dokument muss vollständig geladen sein, bevor die Manipulation gelingen kann. In meinem Beispiel wird einfach 1 Sekunde gewartet bis der Code ausgeführt wird. Evtl. kennt einer eine elegantere Lösung, die auch Frames und iFrames berücksichtigt. Der iFrame mit name=”Main” enthält einen Frame mit name=”Bestell-Footer”. In diesem befindet sich ein Formular mit dem Namen und der id “form1″, welches einen Button mit name=”ID103_Footer” enthält. Die Beschriftung des Buttons wird auf “Jetzt kostenpflichtig bestellen” geändert.

$(document).ready(function() {
setTimeout('window.parent.frames["Main"].frames["Bestell_Footer"].form1.ID103_Footer.value="Jetzt kostenpflichtig bestellen"',1000);
});