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
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

  • By
    Redacted Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...

  • By
    Jack Rugile’s Favorite CodePen Demos

    CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!

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!