Automate screenshots with Node and Grunt

nodeThe official site claims ‘Node is built on Chrome’s JavaScript runtime it can be used for building fast, scalable network applications’.  Drilling into that verbiage; it is quite obvious what fast means.  Scalable is also semi-obvious; but, only within context.  Scalable in this context means an application – for example a website similar to twitter – can easily be modified to cater for increasing demand: such as the number of users accessing a site increasing.  Without understanding the technology behind sites such as twitter we can all imagine the amount of people tweeting at any one time – a lot.  How does the technology behind twitter handle this amount of activity: in short the answer is, by being scalable.  The final part of Node’s official statement refers to the ‘network application’.  This simply means the components that provide technology behind any given website and/or mobile app.  Historically tools to provide fast, scalable network application have been available.  The difference with Node.js is they can now be written using JavaScript. – the language of the web.  Node.js has become a serious piece of kit which cannot be ignored. Mixed with Grunt which which is a task automation tool you can automate just about any task using JavaScript.  In this Blog article I demonstrate how I tackled the simple problem of automatically taking screenshot of any given website using Node.js and Grunt.

Getting Node.js Installed

Node.js is available as an installable package in most modern operating system such as Ubuntu.  For example, to install Node.js within Ubuntu simply run the following command:

sudo apt-get install node

If Node.js is not natively available follow the instructions here.  With all good eco-systems comes a good package manager.  Node.js is no different:  npm is a Node.js package manager. As its name would imply, you can use it to install node plugins.  The number of available packages available off-the-shelf for Node.js is growing by the day.  If you’ve got an idea, more often than not you may find someone else has already written and published it into the npm package manager.  You can search the package database here.

To install npm you’ll need to run a command similar to this:

sudo apt-get install npm

Getting Grunt Installed

Grint is available as an installable package using npm.  To install grunt run the following command:

sudo npm install -g grunt grunt-cli

You should see something similar to the following:

Installing Grunt

Creating a Grunt project

A typical set-up consists of two files.  These are the package.json and Gruntfile.js file.

  • package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as dependencies in this file.
  • Gruntfile.js: This is used to configure or define tasks and load Grunt plugins.

To create a basic package.json file copy and paste the following into create the new file as save.

{
 "name": "screenshot",
 "version": "0.0.0",
 "description": "Test Project",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "Me",
 "license": "ISC"
}

As mentioned above the development dependencies should be listed in this file.  We are going to use the package ‘grunt-webshot’. It is a simple wrapper for (https://github.com/brenden/node-webshot/) that uses phantomJS to render webpages to various image formats This plugin (dependency) can be added by running the following:

sudo npm install grunt-webshot --save-dev

Once installed, we need to create our Gruntfile.js file, so we can use Grunt to execute the plugin. The `grunt-webshot` configurable options that are required are: ‘site’ and ‘savePath’. These are used as arguments to call the webshot. The first should be the URL of the site you wish to take a screen shot of and the later is the path which the screenshot should be saved in. In our case we are going to take a screenshot of the UK Met Office’s weather page and save it into the local ‘tmp’ folder as a file named ‘weather.png’:

Create the Gruntfile.js and paste in the following:

module.exports = function(grunt) {

 // Project configuration.
 grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   webshot: {
     homepage: {
       options: {
         siteType: 'url',
         site: 'http://www.metoffice.gov.uk/weather/uk/uk_forecast_weather.html',
         savePath: './tmp/weather.png',
         windowSize: {
           width: 1024,
           height: 768
         },
         shotSize: {
           width: 1024,
           height: 'all'
         }
       }
     }
   }
 });

 // Load the plugin that provides the "uglify" task.
 grunt.loadNpmTasks('grunt-webshot');

 // Default task(s).
 grunt.registerTask('default', ['webshot']);

};

The ‘webshot’ options are fully documented  here https://github.com/brenden/node-webshot/.  We are now ready to execute the grunt task runner.  To achieve this execute the following:

grunt

This will generate the screenshot and write it to the ‘./tmp’ folder. You can open this with your favourite image viewer. If should be an exact snap-shot of the target URL e.g.

weather

 

This simple example could easily be expanded to take a hourly image, allowing you to build a collection of file which could be compared, archived, email and scanned for content.  The world is your oyster!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s