Page Monitor

capture webpage and diff the dom change with phantomjs

Effects

Element Add

Element Removed

Text Changed

Style Changed

Usage

var Monitor = require('page-monitor');

var url = 'http://www.google.com';
var monitor = new Monitor(url);
monitor.capture(function(code){
    console.log(monitor.log); // from phantom
    console.log('done, exit [' + code + ']');
});

API

Monitor

var monitor = new Monitor(url, options);

options:

var defaultSettings = {
    cli: { /* phantomjs cli options */ },
    page: { /* webpage settings */ },
    walk: {
        invisibleElements : [ /* invisible elements */ ],
        ignoreChildrenElements: [ /* ignore children elements */ ],
        styleFilters: [ /* record styles */ ],
        attributeFilters: [ /* record attribute */ ],
        includeSelectors: [ /* include selectors */ ],
        excludeSelectors: [ /* exclude selectors */ ],
        ignoreTextSelectors: [ /* ignore text selectors */ ],
        ignoreChildrenSelectors: [ /* ignore children selectors */ ],
        root: 'body' // root selector
    },
    diff: {
        highlight: { /* highlight styles */ }
    },
    events: {
        init: function(token){ /* page.onInitialized */ },
        beforeWalk: function(token){ /* before walk dom tree */ }
    },
    render: {
        delay: 1000 // delay before capture
    },
    path: {
        root: DEFAULT_DATA_DIRNAME,   //file save path
        // format: '{hostname}/{port}/{pathname}/{query}{hash}'
        format: function(url, opt){   //path format
            return opt.hostname + (opt.port ? '-' + opt.port : '') + '/' + base64(opt.path);
        }
    }
};

monitor.capture(callback [, noDiff]);

caputure webpage and save screenshot, then diff with last save.

var monitor = new Monitor(url, options);
monitor.capture(function(code){
    console.log(monitor.log); // from phantom
    console.log('done, exit [' + code + ']');
});

monitor.diff(left, right, callback);

diff change between left(date.getTime()) and right(date.getTime()).

var monitor = new Monitor(url, options);
monitor.diff(1408947323420, 1408947556898, function(code){
    console.log(monitor.log); // from phantom
    console.log('done, exit [' + code + ']');
});

events

var monitor = new Monitor(url);
monitor.on('debug', function(msg){
    console.log('debug:', msg);
});
monitor.capture(function(code){
    console.log('done, exit [' + code + ']');
});

• debug: debug from phantom
• notice: console from webpage
• info: info from phantom
• warning: error from webpage
• error: error from phantom