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

If you don’t have node and npm installed, it takes five minutes and I have written a quick start guide already.

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 = '';

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));, function (status) {

        var filename = siteName + size[0] + 'x' + size[1] + '.png';

        page.render(imageDir + filename);

async.eachSeries(sizes, scrot, function(err){
    if (err) console.log(err);
    console.log('done, quitting');

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.

More flexibility

I’m pretty new to npm, so I have to figure out if I can meaningfully publish this as a module, but I’ll put the code on github one of the next days.

4 thoughts on “Automate mobile testing: phantom.js”

  1. This looks great, but as a novice, I don’t know how to use the code. I have phantom.js and async both installed on my local machine. I’d love to get a way to create screenshots easily and at different resolutions, to mimic mobile use for various websites. Best of all would be running this from Terminal. Can you give a few pointers? Sorry for my ignorance.

  2. Okay. You can disregard my first comment, because I was able to figure out from here how to run the script in Terminal:

    But I have a problem: The site I want to test is slow loading and includes some animation. The first screenshots are capturing half-loaded pages, but also pages with animated areas (which I suppose would render on scrolling) absent. Is there anyway to force either a day, or ideally a kind of virtual scroll?

    Thanks for this great script!

Leave a Reply

Your email address will not be published. Required fields are marked *