Screenshots mit PhantomJS machen
September 27, 2013
Mit PhantomJS und node.js kann man einfach Skripte erstellen, die automatisiert Screenshots von Webseiten machen. PhantomJS ist ein Chrome Browser, ohne Benutzeroberfläche (headless) und kann viel mehr als nur Screenshots machen, allerdings kann man mit Screenshots sehr gut testen wie sich eine Seite bei verschiedenen Auflösungen verhält und damit automatisiert veranschaulichen wie eine Seite auf einem Tablet oder Smartphone aussehen würde.
PhantomJS Grundlagen
PhantomJS basiert auf der webkit-engine und V8, ist aber kein node module. Es läuft als eigenständiges Programm auf der Kommandozeile und lässt sich einfach per npm install -g phantomjs
installieren. Für die -g, also globale Installation sind root Berechtigungen notwendig.
Einen Screenshot machen
Dieses Skript ist relativ kurz und an die Dokumentation angelehnt. Ich werde hier die wichtigsten Einstellungen auflisten, zum Beispiel um die Auflösung zu ändern.
<code class="javascript">var page = require('webpage').create(),
system = require('system');
var site = {
url : '<a href='http://nodejs.org'>http://nodejs.org</a>',
slug: 'nodejs'
}
page.viewportSize = { width: 1024, height: 768 };
page.zoomFactor = 1;
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
page.open(site.url, function (status) {
console.log('opening: '+ site.url + ' : ' + status);
var filename = site.slug +'.png';
window.setTimeout(function(){
page.render('images/' + filename);
page.close();
console.log('file rendered to: images/' + filename + '.png')
phantom.exit();
},2000);// wait 2 seconds
});
</code>
Hier ist das Bild, dass PhantomJS auf der Festplatte gespeichert hat:
Zu welcher Seite PhantomJS eine Verbindung aufbauen soll legen wir in site
Objekt fest, sowie wie das Bild heißen soll, das gespeichert wird.
PhantomJS Auflösung und Crop
Mit den Einstellungen page.viewportSize
und page.clipRect
legen wir die Bildschirmgröße fest und ob PhantomJS bis zum Ende der Seite scrollen soll um die gesamte Seite zu erfassen. In dem obigen Beispiel haben wir beide Einstellungen so gesetzt, dass das Bild 1024 x 768 Pixel groß wird. Würden wir die Zeile der page.clipRect
Einstellung auskommentieren, würde PhantomJS die Seite komplett in einen Screenshot speichern.
Bild bei Auskommentierung von: #page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
Als Auflösung empfehlen sich natürlich jene, die man gerade nicht als Gerät zur Hand hat, aber eine Webkit-engine einsetzen wie Android und iOS Tablets und Smartphones, wenn man testen möchte wie die eigene Seite oder die eines Kunden dort aussehen würden.
Fazit
PhantomJS ist ein geniales Tool und ich werde dazu noch mindestens einen Artikel schreiben, in dem ich mehr auf Automatisierung eingehe und wie man mehrere Auflösungen auf einmal testen kann.
Ich hoffe diese kleine Einführung hat euch gefallen!