Published: , by Jonathan M. Hethey,reading time: ~2 minutes
Automate mobile testing: phantom.js
Phantom.js can be used for many purposes and this is a quite primitive one. It uses node.js and I've included the async.js module to create picture after picture and not clog up the RAM.
Installing phantom.js
npm install phantomjs -g
This installs phantom.js globally, so you have access to the phantomjs command.
Test for multiple resolutions with phantom.js
Automatic screen capturing used to be quite complicated, but the following script does exactly that and reveals how little I've taken care of the responsive design of one of my blogs. This will become a tool in my workflow to test different resolutions for the webkit engine, since the big two, Android and iOS use it as their default mobile browser engine./*
requires: phantomjs, async
usage: phantomjs index.js
*/
var async = require('async');
var sizes = ['1920x1080','1600x1200','1400x900','1024x768','800x600','420x360'];
var siteURL = 'http://vollzeitblogger.de';
var siteName = siteURL.replace('http://','');
siteName = siteName.replace('.','_') + '_';
var imageDir = './images/';
function scrot(sizes, callback){
size = sizes.split('x');
var page = require('webpage').create();
page.viewportSize = { width: size[0], height: size[1] };
page.zoomFactor = 1;
// checking the viewport settings
console.log(JSON.stringify(page.viewportSize));
page.open(siteURL, function (status) {
var filename = siteName + size[0] + 'x' + size[1] + '.png';
page.render(imageDir + filename);
page.close();
callback.apply();
});
}
async.eachSeries(sizes, scrot, function(err){
if (err) console.log(err);
console.log('done, quitting');
phantom.exit();
});
I use async to pass one resolution at a time to the scrot function which then renders the page to a .png file. It's quite simple and captures the full website, not only the viewport.