From f8d5444ced04b1958ec57a236127cbdf4e85a10c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Lademann?= Date: Sat, 11 Mar 2017 22:50:10 +0100 Subject: [PATCH] #17 Added missmatch tolerance and added documentation --- README.md | 17 ++++-- phantomjs/runner.js | 132 ++++++++++++++++++++++---------------------- tasks/phantomcss.js | 7 ++- 3 files changed, 82 insertions(+), 74 deletions(-) diff --git a/README.md b/README.md index 14156e8..b73b657 100644 --- a/README.md +++ b/README.md @@ -47,30 +47,37 @@ Type: `String|Array` The test files to run. #### options.screenshots -Type: `String` +Type: `String` Default: `'./screenshots'` The screenshots directory where test fixtures (comparison screenshots) are stored. Baseline screenshots will be stored here on the first run if they're not present. #### options.results -Type: `String` +Type: `String` Default: `'./results'` The directory to store source, diff, and failure screenshots after tests. #### options.viewportSize -Type: `Array` +Type: `Array` Default: `[1280, 800]` -The viewport size to test the site in `[width, height]` format. Useful when testing responsive layouts. +The viewport size to test the site in `[width, height]` format. Useful when testing responsive layouts. #### options.logLevel -Type: `String` +Type: `String` Default: `error` The CasperJS log level. See [CasperJS: Logging](http://casperjs.readthedocs.org/en/latest/logging.html) for details. +#### options.mismatchTolerance +Type: `Float` +Default: 0.05 + +Mismatch tolerance defaults to 0.05%. Increasing this value will decrease test coverage. See [PhantomCSS](https://github.com/Huddle/PhantomCSS) for details. + + ### Usage Examples #### Basic visual tests diff --git a/phantomjs/runner.js b/phantomjs/runner.js index 5c4907d..1b84c88 100644 --- a/phantomjs/runner.js +++ b/phantomjs/runner.js @@ -1,66 +1,66 @@ -var fs = require('fs'); -var system = require('system'); - -// Parse arguments passed in from the grunt task -var args = JSON.parse(system.args[1]); - -var viewportSize = { - "width": args.viewportSize[0], - "height": args.viewportSize[1] -}; - -// Messages are sent to the parent by appending them to the tempfile -var sendMessage = function() { - fs.write(args.tempFile, JSON.stringify(Array.prototype.slice.call(arguments)) + '\n', 'a'); -}; - -// Initialise CasperJs -phantom.casperPath = args.casperPath; -phantom.injectJs([args.casperPath, 'bin', 'bootstrap.js'].join(fs.separator)); - -var casper = require('casper').create({ - "viewportSize": viewportSize, - "logLevel": args.logLevel, - "verbose": true -}); - -// Require and initialise PhantomCSS module -var phantomcss = require('phantomcss'); - -phantomcss.init({ - "libraryRoot": args.phantomCSSPath, // Give absolute path, otherwise PhantomCSS fails - - "screenshotRoot": args.screenshots, - "failedComparisonsRoot": args.failures, - - /** - * Mismatch tolerance defaults to 0.05%. Increasing this value - * will decrease test coverage - */ - "mismatchTolerance": 0.05, - - "onFail": function(test) { - sendMessage('onFail', test); - }, - "onPass": function(test) { - sendMessage('onPass', test); - }, - "onTimeout": function(test) { - sendMessage('onTimeout', test); - }, - "onComplete": function(allTests, noOfFails, noOfErrors) { - sendMessage('onComplete', allTests, noOfFails, noOfErrors); - } -}); - -// Run the test scenarios -args.test.forEach(function(testSuite) { - require(testSuite); -}); - -// End tests and compare screenshots -casper.then(function() { - phantomcss.compareAll(); -}).run(function() { - phantom.exit(0); -}); +var fs = require('fs'); +var system = require('system'); + +// Parse arguments passed in from the grunt task +var args = JSON.parse(system.args[1]); + +var viewportSize = { + "width": args.viewportSize[0], + "height": args.viewportSize[1] +}; + +// Messages are sent to the parent by appending them to the tempfile +var sendMessage = function() { + fs.write(args.tempFile, JSON.stringify(Array.prototype.slice.call(arguments)) + '\n', 'a'); +}; + +// Initialise CasperJs +phantom.casperPath = args.casperPath; +phantom.injectJs([args.casperPath, 'bin', 'bootstrap.js'].join(fs.separator)); + +var casper = require('casper').create({ + "viewportSize": viewportSize, + "logLevel": args.logLevel, + "logLevel": args.logLevel, + "verbose": true +}); + +// Require and initialise PhantomCSS module +var phantomcss = require('phantomcss'); + +phantomcss.init({ + "libraryRoot": args.phantomCSSPath, // Give absolute path, otherwise PhantomCSS fails + "screenshotRoot": args.screenshots, + "failedComparisonsRoot": args.failures, + + /** + * Mismatch tolerance defaults to 0.05%. Increasing this value + * will decrease test coverage + */ + "mismatchTolerance": args.mismatchTolerance, + + "onFail": function(test) { + sendMessage('onFail', test); + }, + "onPass": function(test) { + sendMessage('onPass', test); + }, + "onTimeout": function(test) { + sendMessage('onTimeout', test); + }, + "onComplete": function(allTests, noOfFails, noOfErrors) { + sendMessage('onComplete', allTests, noOfFails, noOfErrors); + } +}); + +// Run the test scenarios +args.test.forEach(function(testSuite) { + require(testSuite); +}); + +// End tests and compare screenshots +casper.then(function() { + phantomcss.compareAll(); +}).run(function() { + phantom.exit(0); +}); diff --git a/tasks/phantomcss.js b/tasks/phantomcss.js index 2b59197..c2f9847 100644 --- a/tasks/phantomcss.js +++ b/tasks/phantomcss.js @@ -19,10 +19,11 @@ module.exports = function(grunt) { var done = this.async(); var options = this.options({ - screenshots: 'screenshots', + logLevel: 'error', + mismatchTolerance: 0.05, results: 'results', - viewportSize: [1280, 800], - logLevel: 'error' + screenshots: 'screenshots', + viewportSize: [1280, 800] }); // Timeout ID for message checking loop