Vollzeitblogger

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:

phantomjs_screenshot

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 };

phantomjs_screenshot_clipRect

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!


© 2023, by Jonathan M. Hethey