I recently had a request to monitor a dynamic website i.e. Mentimeter. The site allows to do interactive presentations with voting which are updated on-the-fly and display accordingly - in this case in a word cloud. The voting was setup and open for about one week and we wanted to monitor the progress over time and see how the word cloud grows. A quick digging in interned lead me to phantom.js, which allows to render a dynamic web page and create screenshots out of it. The script looks quite easy:

system = require('system');
var date = Date.now();
var page = require('webpage').create();
page.viewportSize = { width: 1800, height: 1200 };

//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1800, height: 1200 };
var timeout = system.args[1];
var url = "https://www.mentimeter.com/s/{some random numbers}/48c9cb16ae69i";

page.open(url, function (status) {
    function checkReadyState() {
        setTimeout(function () {
           filename = date + '.png';
           page.render(filename);
           console.log(filename + " rendered");
           phantom.exit();
        }, 4000);
    }
});

As the page to capture is dynamic we need to give it enough time to load, therefore we use the setTimeout function and give a timeout of 4 seconds.

With the script ready, I just need to run it on a regular basis - let’s say every 20 minutes and I also want to log the console output to a file for debugging purposes. For this purpose I simply add a cron job to my linux box where I run the script every 20 minutes:

0,20,40 * * * * phantomjs /home/user/getpage.js  >> /var/log/cronrun 2>&1

Here you can see the result of the capturing over time as an animated gif: