CSS diff

README.md

Capture screenshots of 2 websites and render an animated gif of the differences

Inspired by

http://www.phpied.com/css-diff/

Depencencies:

• node
• phantomjs
• imagemagick

Run:

node diffcss.js staging.mywebsite.com www.mywebsite.com /about/

diffcss.js

var args = process.argv.slice(2);
var server1 = 'http://' + args[0];
var server2 = 'http://' + args[1];
var url = args[2];

var exec = require('child_process').exec;
 
var tmp = process.cwd() + '/tmp/';
 
exec('phantomjs url2png.js ' + server1 + url + ' tmp/server1.png',
  function () {
    exec('phantomjs url2png.js ' + server2 + url + ' tmp/server2.png',
      function () {
        exec('compare -metric PSNR tmp/server1.png tmp/server2.png tmp/diff.png',
          function(e, ste, result) {
            if (result !== 'inf') {
              console.log('bad, bad! See tmp/dif.gif');
              exec('convert -delay 50 -loop 0 ' +
                   'tmp/server1.png tmp/server2.png '+
                   'tmp/dif.gif');
            } else {
              console.log('all good');
            }
          }
        );
      }
    );
  }
);

url2png.js

var system = require('system');
var url = system.args[1];
var png = system.args[2];
 
var page = require('webpage').create();
page.viewportSize = { width: 1024, height: 600 };
console.warn('sup');
page.open(url, function (status) {
    console.warn('status',status,png);
  if (status !== 'success') {
    console.log('Unable to access the network!');
  } else {
    console.warn(page.url);
    page.render(png);
  }
  phantom.exit();
});