wraith 2.6.0 → 2.7.0

data/templates/javascript/README.md

@@ -0,0 +1,5 @@
+These JavaScript files have been provided by Wraith for your benefit, but you are free to edit these or add new JavaScript files if you wish.
+
+Files beginning with an underscore should not be referenced directly in your YAML files. They are 'private' modules required by some of the other modules in this directory.
+
+The two most important files to be aware of are `casper.js` and `_phantom__common.js`, as these files map Wraith's command line arguments to each respective browser engine.

data/templates/javascript/_getDimensions.js

@@ -0,0 +1,7 @@
+module.exports = function (dimensions) {
+    dimensions = /(\d*)x?((\d*))?/i.exec(dimensions);
+    return {
+        'viewportWidth':  parseInt(dimensions[1]),
+        'viewportHeight': parseInt(dimensions[2] || 1500)
+    };
+}

data/templates/javascript/_phantom__common.js

@@ -0,0 +1,122 @@
+module.exports = function (config) {
+
+  // modules
+  var page = require('webpage').create();
+
+  // config
+  var systemArgs        = config.systemArgs,
+      javascriptEnabled = config.javascriptEnabled;
+
+  // command line arguments
+  var url = systemArgs[1],
+      dimensions = require('./_getDimensions.js')(systemArgs[2]),
+      image_name = systemArgs[3],
+      selector   = systemArgs[4],
+      globalBeforeCaptureJS = systemArgs[5],
+      pathBeforeCaptureJS = systemArgs[6];
+
+  globalBeforeCaptureJS = globalBeforeCaptureJS === 'false' ? false : globalBeforeCaptureJS;
+  pathBeforeCaptureJS   = pathBeforeCaptureJS === 'false' ? false : pathBeforeCaptureJS;
+
+  var current_requests = 0;
+  var last_request_timeout;
+  var final_timeout;
+
+  page.viewportSize = { width: dimensions.viewportWidth, height: dimensions.viewportHeight};
+  page.settings = { loadImages: true, javascriptEnabled: javascriptEnabled };
+
+  // If you want to use additional phantomjs commands, place them here
+  page.settings.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.17';
+
+  // You can place custom headers here, example below.
+  // page.customHeaders = {
+
+  //      'X-Candy-OVERRIDE': 'https://api.live.bbc.co.uk/'
+
+  //  };
+
+  // If you want to set a cookie, just add your details below in the following way.
+
+  // phantom.addCookie({
+  //     'name': 'ckns_policy',
+  //     'value': '111',
+  //     'domain': '.bbc.co.uk'
+  // });
+  // phantom.addCookie({
+  //     'name': 'locserv',
+  //     'value': '1#l1#i=6691484:n=Oxford+Circus:h=e@w1#i=8:p=London@d1#1=l:2=e:3=e:4=2@n1#r=40',
+  //     'domain': '.bbc.co.uk'
+  // });
+
+  page.onResourceRequested = function(req) {
+    current_requests += 1;
+  };
+
+  page.onResourceReceived = function(res) {
+    if (res.stage === 'end') {
+      current_requests -= 1;
+      debounced_render();
+    }
+  };
+
+  page.open(url, function(status) {
+    if (status !== 'success') {
+      console.log('Error with page ' + url);
+      phantom.exit();
+    }
+  });
+
+
+  function debounced_render() {
+    clearTimeout(last_request_timeout);
+    clearTimeout(final_timeout);
+
+    // If there's no more ongoing resource requests, wait for 1 second before
+    // rendering, just in case the page kicks off another request
+    if (current_requests < 1) {
+      clearTimeout(final_timeout);
+      last_request_timeout = setTimeout(function() {
+
+          if (globalBeforeCaptureJS) {
+            require(globalBeforeCaptureJS)(page);
+          }
+          if (pathBeforeCaptureJS) {
+            require(pathBeforeCaptureJS)(page);
+          }
+
+          console.log('Snapping ' + url + ' at: ' + dimensions.viewportWidth + 'x' + dimensions.viewportHeight);
+          page.clipRect = {
+            top: 0,
+            left: 0,
+            height: dimensions.viewportHeight,
+            width: dimensions.viewportWidth
+          };
+          page.render(image_name);
+          phantom.exit();
+      }, 1000);
+    }
+
+    // Sometimes, straggling requests never make it back, in which
+    // case, timeout after 5 seconds and render the page anyway
+    final_timeout = setTimeout(function() {
+
+      if (globalBeforeCaptureJS) {
+        require(globalBeforeCaptureJS)(page);
+      }
+      if (pathBeforeCaptureJS) {
+        require(pathBeforeCaptureJS)(page);
+      }
+
+      console.log('Snapping ' + url + ' at: ' + dimensions.viewportWidth + 'x' + dimensions.viewportHeight);
+      page.clipRect = {
+        top: 0,
+        left: 0,
+        height: dimensions.viewportHeight,
+        width: dimensions.viewportWidth
+      };
+      page.render(image_name);
+      phantom.exit();
+    }, 5000);
+  }
+
+}

data/templates/javascript/beforeCapture--casper_example.js

@@ -0,0 +1,5 @@
+module.exports = function (browserEngine) {
+    browserEngine.wait(2000, function() {
+        browserEngine.click('.ns-panel__hotspot--2');
+    });
+}

data/templates/javascript/beforeCapture--phantom_example.js

@@ -0,0 +1,9 @@
+module.exports = function (browserEngine) {
+    browserEngine.evaluate(function(){
+        var a = document.querySelector('.ns-panel__hotspot--2');
+        var e = document.createEvent('MouseEvents');
+        e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+        a.dispatchEvent(e);
+        waitforload = true;
+    });
+}

data/templates/javascript/casper.js

@@ -0,0 +1,59 @@
+// modules
+var system = require('system'),
+    casper = require('casper').create();
+
+// command line arguments
+var url = casper.cli.get(0),
+    dimensions = requireRelative('_getDimensions.js')(casper.cli.get(1)),
+    image_name = casper.cli.get(2),
+    selector = casper.cli.get(3),
+    globalBeforeCaptureJS = casper.cli.get(4),
+    pathBeforeCaptureJS = casper.cli.get(5);
+
+// functions
+function requireRelative(file) {
+  // PhantomJS will automatically `require` relatively, but CasperJS needs some extra help. Hence this function.
+  // 'templates/javascript/casper.js' -> 'templates/javascript'
+  var currentFilePath = system.args[3].split('/');
+  currentFilePath.pop();
+  var fs = require('fs');
+  currentFilePath = fs.absolute(currentFilePath.join('/'));
+  return require(currentFilePath + '/' + file);
+}
+function snap() {
+  if (!selector) {
+    this.capture(image_name);
+  }
+  else {
+    this.captureSelector(image_name, selector);
+  }
+  console.log('Snapping ' + url + ' at: ' + dimensions.viewportWidth + 'x' + dimensions.viewportHeight);
+}
+
+// Casper can now do its magic
+casper.start();
+casper.open(url);
+casper.viewport(dimensions.viewportWidth, dimensions.viewportHeight);
+casper.then(function() {
+  if (globalBeforeCaptureJS) {
+    require('./' + globalBeforeCaptureJS)(this);
+  }
+});
+casper.then(function() {
+  if (pathBeforeCaptureJS) {
+    require('./' + pathBeforeCaptureJS)(this);
+  }
+});
+// waits for all images to download before taking screenshots
+// (broken images are a big cause of Wraith failures!)
+// Credit: http://reff.it/8m3HYP
+casper.waitFor(function() {
+  return this.evaluate(function() {
+    var images = document.getElementsByTagName('img');
+    return Array.prototype.every.call(images, function(i) { return i.complete; });
+  });
+}, function then () {
+  snap.bind(this)();
+});
+
+casper.run();

data/templates/javascript/phantom--nojs.js

@@ -0,0 +1,6 @@
+var system = require('system');
+
+require('./_phantom__common.js')({
+  systemArgs:        system.args,
+  javascriptEnabled: false
+});

data/templates/javascript/phantom.js

@@ -0,0 +1,6 @@
+var system = require('system');
+
+require('./_phantom__common.js')({
+  systemArgs:        system.args,
+  javascriptEnabled: true
+});

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: wraith
 version: !ruby/object:Gem::Version
-  version: 2.6.0
+  version: 2.7.0
 platform: ruby
 authors:
 - Dave Blooman
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-08-20 00:00:00.000000000 Z
+date: 2015-10-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pry
@@ -188,15 +188,8 @@ files:
 - README.md
 - Rakefile
 - assets/invalid.jpg
+- assets/wraith-logo.png
 - bin/wraith
-- configs/component.yaml
-- configs/config_nojs.yaml
-- configs/custom_height.yaml
-- configs/history.yaml
-- configs/templates/component.yaml
-- configs/templates/config.yaml
-- configs/test_config--casper.yaml
-- configs/test_config.yaml
 - lib/wraith.rb
 - lib/wraith/cli.rb
 - lib/wraith/compare_images.rb
@@ -204,11 +197,6 @@ files:
 - lib/wraith/folder.rb
 - lib/wraith/gallery.rb
 - lib/wraith/gallery_template/gallery_template.erb
-- lib/wraith/javascript/beforeCapture.js
-- lib/wraith/javascript/casper.js
-- lib/wraith/javascript/customHeight.js
-- lib/wraith/javascript/nojs.js
-- lib/wraith/javascript/snap.js
 - lib/wraith/save_images.rb
 - lib/wraith/spider.rb
 - lib/wraith/thumbnails.rb
@@ -216,11 +204,27 @@ files:
 - lib/wraith/wraith.rb
 - spec/base/global.png
 - spec/base/path.png
+- spec/configs/test_config--casper.yaml
+- spec/configs/test_config--phantom.yaml
 - spec/helpers.rb
 - spec/js/global.js
 - spec/js/path.js
+- spec/thumbnails/test/test_image-1.png
+- spec/thumbnails/test/test_image-2.png
+- spec/thumbnails/test/test_image-diff.png
 - spec/wraith_spec.rb
-- wraith-logo.png
+- templates/README.md
+- templates/configs/component.yaml
+- templates/configs/multiple_domains.yaml
+- templates/configs/spider.yaml
+- templates/javascript/README.md
+- templates/javascript/_getDimensions.js
+- templates/javascript/_phantom__common.js
+- templates/javascript/beforeCapture--casper_example.js
+- templates/javascript/beforeCapture--phantom_example.js
+- templates/javascript/casper.js
+- templates/javascript/phantom--nojs.js
+- templates/javascript/phantom.js
 - wraith.gemspec
 homepage: https://github.com/BBC-News/wraith
 licenses:
@@ -242,14 +246,19 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.3
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: Wraith is a screenshot comparison tool, created by developers at BBC News.
 test_files:
 - spec/base/global.png
 - spec/base/path.png
+- spec/configs/test_config--casper.yaml
+- spec/configs/test_config--phantom.yaml
 - spec/helpers.rb
 - spec/js/global.js
 - spec/js/path.js
+- spec/thumbnails/test/test_image-1.png
+- spec/thumbnails/test/test_image-2.png
+- spec/thumbnails/test/test_image-diff.png
 - spec/wraith_spec.rb

data/configs/component.yaml

@@ -1,47 +0,0 @@
-#Headless browser option
-browser:
-  phantomjs: "casperjs"
-  # slimerjs: "slimerjs"
-
-#If you want to have multiple snapping files, set the file name here
-snap_file: "lib/wraith/javascript/casper.js"
-
-# Type the name of the directory that shots will be stored in
-directory: 'shots'
-
-# Add only 2 domains, key will act as a label
-domains:
-  arabic: "http://www.bbc.com/arabic"
-  russian: "http://www.bbc.com/russian"
-
-#Type screen widths below, here are a couple of examples
-screen_widths:
-  - 320
-  - 600
-  - 768
-  - 1024
-  - 1280
-
-#Type page URL paths below, here are a couple of examples
-paths:
-  brand:
-    path: /
-    selector: '.site-brand'
-
-#Amount of fuzz ImageMagick will use
-fuzz: '20%'
-
-#Set the filename of the spider file to use, if not specified it will fallback to spider.txt
-# spider_file: bbc_co_uk_spider.txt
-
-#Set the number of days to keep the site spider file
-spider_days:
-  - 10
-
-#Choose how results are displayed, by default alphanumeric. Different screen widths are always grouped.
-#alphanumeric - all paths (with, and without, a difference) are shown, sorted by path
-#diffs_first - all paths (with, and without, a difference) are shown, sorted by difference size (largest first)
-#diffs_only - only paths with a difference are shown, sorted by difference size (largest first)
-mode: diffs_first
-
-threshold: 15

data/configs/config_nojs.yaml

@@ -1,43 +0,0 @@
-#Headless browser option
-browser:
-  phantomjs: "phantomjs"
-  # slimerjs: "slimerjs"
-
-#If you want to have multiple snapping files, set the file name here
-snap_file: "lib/wraith/javascript/nojs.js"
-
-# Type the name of the directory that shots will be stored in
-directory: 'shots_nojs'
-
-# Add only 2 domains, key will act as a label
-domains:
-  arabic: "http://www.bbc.com/arabic"
-  russian: "http://www.bbc.com/russian"
-
-#Type screen widths below, here are a couple of examples
-screen_widths:
-  - 320
-  - 600
-  - 768
-  - 1024
-  - 1280
-
-#Type page URL paths below, here are a couple of examples
-paths:
-  home: /
-  uk_index: /uk
-
-#Amount of fuzz ImageMagick will use
-fuzz: '20%'
-
-#Set the number of days to keep the site spider file
-spider_days:
-  - 10
-
-#A list of URLs to skip when spidering. Ruby regular expressions can be
-#used, if prefixed with !ruby/regexp as defined in the YAML Cookbook
-#http://www.yaml.org/YAML_for_ruby.html#regexps
-#
-# spider_skips:
-#   - /foo/bar.html # Matches /foo/bar.html explcitly
-#   - !ruby/regexp /^\/baz\// # Matches any URLs that start with /baz

data/configs/custom_height.yaml

@@ -1,42 +0,0 @@
-#Headless browser option
-browser:
-  phantomjs: "phantomjs"
-  # slimerjs: "slimerjs"
-
-#If you want to have multiple snapping files, set the file name here
-snap_file: "lib/wraith/javascript/customHeight.js"
-
-# Type the name of the directory that shots will be stored in
-directory: 'shots'
-
-# Add only 2 domains, key will act as a label
-domains:
-  arabic: "http://www.bbc.com/arabic"
-  russian: "http://www.bbc.com/russian"
-
-#Type screen widths below, here are a couple of examples
-screen_widths:
-# - widthxheight
-  - 480x320
-  - 400x600
-  - 600x768
-  - 800x1024
-  - 720x1280
-
-#Type page URL paths below, here are a couple of examples
-paths:
-  home: /
-  uk_index: /uk
-
-#Amount of fuzz ImageMagick will use
-fuzz: '20%'
-
-#Set the number of days to keep the site spider file
-spider_days:
-  - 10
-
-#Choose how results are displayed, by default alphanumeric. Different screen widths are always grouped.
-#alphanumeric - all paths (with, and without, a difference) are shown, sorted by path
-#diffs_first - all paths (with, and without, a difference) are shown, sorted by difference size (largest first)
-#diffs_only - only paths with a difference are shown, sorted by difference size (largest first)
-#mode: diffs_first