javascript - How can I programmatically create screenshots of a web page on my localhost to generate a workflow-screencast? -

to document webdesign process want take screenshot timestamp of page on localhost on every reload of page or when save html document or stylesheet.

i use grunt task runner , headless browser phantomjs capture page. grunt-localscreenshots https://www.npmjs.org/package/grunt-localscreenshots it's easy capture page manually. it's cumbersome , takes 10 seconds task finish. screencapture process should happen in background, when page changes or saved.

so wrote shellscript monitors directory filechanges , fires phantomjs-script.

while true atime=`stat .`  if [[ "$atime" != "$ltime" ]] phantomjs screenshot.js ltime=$atime  fi sleep 0.5 done 

this phantomjs-script

var page = require('webpage').create();  page.onconsolemessage = function(msg) {     console.log(msg); };  page.open("http://127.0.0.1:8080/screenshot-test/dev", function(status) {     if (status === "success") {         window.settimeout(function() {             var = date.now();             page.render('screenshots/' + + '.png');             phantom.exit();         }, 1000);     } else {         console.log("nono");         phantom.exit();     } }); 

this kinda works, wonky , fires if html changed. takes 2 or 3 duplicate screenshots if nothing changes, , takes no screenshots @ all. reason rendering of page takes long. ideas stable , usable solution? ideal grunt task

i'd use selenium (with phantomjs / ghostdriver). there's python binding i'm partial to, though of course java , other languages supported.

you can check page changes taking page_source every half second , checking differences. on such change use save_screenshot() method save screenshot.

note: i've seen save_screenshot silently fail zero-byte screenshots large pages. though 5-10 mb screenshots fine, i've repeatedly stumbled on problem whenever tried capturing screenshot page having, let's say, hundreds of thousands of rows.