Automating Screenshots

July 19, 2016 0 Comments by

These are some options I explored for automating the creation of screenshots.

PhantomJS - Headless

This is easy to create screenshots. The screenshots didn't seem to render properly. There is less support for HTML5 and CSS3 in older versions of Webkit.

var page = require('webpage').create();  
page.open('http://localhost:8080/', function() {  
  page.render('localhost.png');
  phantom.exit();
});

Selenium Protractor - Configurable browser

This is useful to print screenshots when your tests fail. In my conf.js I defined a global in the onPrepare method and used this in my tests. Command to run: protractor conf.js

// in conf.js
global.screenshot = require('screenshot-protractor').saveScreenshot;

// in foo_spec.js
browser.get(url)  
screenshot('foo.png')

SlimerJS - Implemented in Firefox

This produced the best results for screenshots.

var page = require('webpage').create();  
var url = 'http://localhost:8080/'  
var widths = [320, 1280]  
page.open(url, function (status) {  
  widths.forEach(function(width) {
    window.setTimeout(function() {
      page.viewportSize = { width:width, height:768 };
      page.render('screenshot' + width + '.png')
      slimer.exit()
    }, 0)

  })
})

Nightmare and Horseman

These are the best options for dynamically controlling scripts from your Node application. These projects use Electron and Phantom.


Tag cloud