Skip to content

capture webpage and diff the dom change with phantomjs ♨

Notifications You must be signed in to change notification settings

ppbbgg110/page-monitor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Page Monitor

capture webpage and diff the dom change with phantomjs

Effects

Element Add

element add

Element Removed

element removed

Text Changed

element removed

Style Changed

element removed

Make UI to show diffs of history

https://github.com/fouber/pmui

ui

Usage

First of all, install phantomjs, page-monitor relys on phantomjs to render webpage and genenrate screenshot. DO NOT use npm to install phantomjs on winidows, it can't be launched by spawn.

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]);

see the default options here: https://github.com/fouber/page-monitor/blob/master/index.js , you can override any option for your monitoring.

monitor.capture(callback [, noDiff]);

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

var monitor = new Monitor(url, options);
monitor.on('debug', function (data) {
    console.log('[DEBUG] ' + data);
});
monitor.on('error', function (data) {
    console.error('[ERROR] ' + data);
});
monitor.capture(function(code){
    console.log(monitor.log.info); // diff result
    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.on('debug', function (data) {
    console.log('[DEBUG] ' + data);
});
monitor.on('error', function (data) {
    console.error('[ERROR] ' + data);
});
monitor.diff(1408947323420, 1408947556898, function(code){
    console.log(monitor.log.info); // diff result
    console.log('[DONE] exit [' + code + ']');
});

events

var monitor = new Monitor(url);
monitor.on('debug', function (data) {
    console.log('[DEBUG] ' + data);
});
monitor.on('error', function (data) {
    console.error('[ERROR] ' + data);
});
  • debug: debug from phantom
  • notice: console from webpage
  • info: info from phantom
  • warning: error from webpage
  • error: error from phantom

About

capture webpage and diff the dom change with phantomjs ♨

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 94.6%
  • HTML 5.4%