Create WebPage Screenshots with Node.js and SlimerJS

By  on  
SlimerJS

Last week I featured PhantomJS, a headless WebKit tool, which allows for taking screenshots, automating events on the page, and so on.  PhantomJS is an excellent tool that does so much but being locked into the WebKit engine doesn't help if you want to test other rendering engines like Firefox.  Mo engines, mo problems.

Luckily SlimerJS exists.  SlimerJS is very much like PhantomJS:  a promise-based automation system that uses Firefox's Gecko rendering engine instead of WebKit.  Let's have a look at how to automate screenshot creation using SlimerJS!

Creating a Screenshot

SlimerJS is Node.js-based so you'll write your screenshot snapping code with JavaScript:

var webpage = require('webpage').create();
webpage
  .open('https://davidwalsh.name')
  .then(function(){
    webpage.render('dwb.png', { onlyViewport: true });
    slimer.exit()
  });

With your script written you'll execute:

slimerjs take-screenshot.js

SlimerJS has its own command line tool which you'll get during install.

Setting Viewport Size

SlimerJS, much like PhatomJS, allows you to set the viewport so you can take screenshots at any size:

var webpage = require('webpage').create();
webpage
    .open('https://davidwalsh.name')
    .then(function(){
      webpage.viewportSize = { width: 1042, height: 768 };
      webpage.render('dwb.png', { onlyViewport: true });
      slimer.exit()
    });

... which is important for mobile Firefox testing as well.  I recommend setting up a script to take screenshots at all popular sizes when you hand designs over to a client or simply want to check your site's integrity!

Recent Features

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    New MooTools Plugin:  ElementFilter

    My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. The XHTML I've used a list for this example...

Discussion

  1. Kevin Grandon

    Hey David!

    Curious as to your thoughts on Slimer/Phantom APIs wrapped with async functions. For long running test scripts I think it makes the API easier to reason about. Plug for a project I’ve been working on: https://github.com/kevingrandon/ghostjs

  2. affan

    Hey David,

    I am using slimerjs to take a screenshot, I am getting screen shot but its taking almost 20 secfor screenshot, what we can do to reduce time. I have install mozilla on server

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!