Skip to content

Commit f8d5444

Browse files
committed
chrisgladd#17 Added missmatch tolerance and added documentation
1 parent 1cef924 commit f8d5444

File tree

3 files changed

+82
-74
lines changed

3 files changed

+82
-74
lines changed

README.md

+12-5
Original file line numberDiff line numberDiff line change
@@ -47,30 +47,37 @@ Type: `String|Array`
4747
The test files to run.
4848

4949
#### options.screenshots
50-
Type: `String`
50+
Type: `String`
5151
Default: `'./screenshots'`
5252

5353
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.
5454

5555
#### options.results
56-
Type: `String`
56+
Type: `String`
5757
Default: `'./results'`
5858

5959
The directory to store source, diff, and failure screenshots after tests.
6060

6161
#### options.viewportSize
62-
Type: `Array`
62+
Type: `Array`
6363
Default: `[1280, 800]`
6464

65-
The viewport size to test the site in `[width, height]` format. Useful when testing responsive layouts.
65+
The viewport size to test the site in `[width, height]` format. Useful when testing responsive layouts.
6666

6767
#### options.logLevel
68-
Type: `String`
68+
Type: `String`
6969
Default: `error`
7070

7171
The CasperJS log level. See [CasperJS: Logging](http://casperjs.readthedocs.org/en/latest/logging.html) for details.
7272

7373

74+
#### options.mismatchTolerance
75+
Type: `Float`
76+
Default: 0.05
77+
78+
Mismatch tolerance defaults to 0.05%. Increasing this value will decrease test coverage. See [PhantomCSS](https://github.com/Huddle/PhantomCSS) for details.
79+
80+
7481
### Usage Examples
7582

7683
#### Basic visual tests

phantomjs/runner.js

+66-66
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
1-
var fs = require('fs');
2-
var system = require('system');
3-
4-
// Parse arguments passed in from the grunt task
5-
var args = JSON.parse(system.args[1]);
6-
7-
var viewportSize = {
8-
"width": args.viewportSize[0],
9-
"height": args.viewportSize[1]
10-
};
11-
12-
// Messages are sent to the parent by appending them to the tempfile
13-
var sendMessage = function() {
14-
fs.write(args.tempFile, JSON.stringify(Array.prototype.slice.call(arguments)) + '\n', 'a');
15-
};
16-
17-
// Initialise CasperJs
18-
phantom.casperPath = args.casperPath;
19-
phantom.injectJs([args.casperPath, 'bin', 'bootstrap.js'].join(fs.separator));
20-
21-
var casper = require('casper').create({
22-
"viewportSize": viewportSize,
23-
"logLevel": args.logLevel,
24-
"verbose": true
25-
});
26-
27-
// Require and initialise PhantomCSS module
28-
var phantomcss = require('phantomcss');
29-
30-
phantomcss.init({
31-
"libraryRoot": args.phantomCSSPath, // Give absolute path, otherwise PhantomCSS fails
32-
33-
"screenshotRoot": args.screenshots,
34-
"failedComparisonsRoot": args.failures,
35-
36-
/**
37-
* Mismatch tolerance defaults to 0.05%. Increasing this value
38-
* will decrease test coverage
39-
*/
40-
"mismatchTolerance": 0.05,
41-
42-
"onFail": function(test) {
43-
sendMessage('onFail', test);
44-
},
45-
"onPass": function(test) {
46-
sendMessage('onPass', test);
47-
},
48-
"onTimeout": function(test) {
49-
sendMessage('onTimeout', test);
50-
},
51-
"onComplete": function(allTests, noOfFails, noOfErrors) {
52-
sendMessage('onComplete', allTests, noOfFails, noOfErrors);
53-
}
54-
});
55-
56-
// Run the test scenarios
57-
args.test.forEach(function(testSuite) {
58-
require(testSuite);
59-
});
60-
61-
// End tests and compare screenshots
62-
casper.then(function() {
63-
phantomcss.compareAll();
64-
}).run(function() {
65-
phantom.exit(0);
66-
});
1+
var fs = require('fs');
2+
var system = require('system');
3+
4+
// Parse arguments passed in from the grunt task
5+
var args = JSON.parse(system.args[1]);
6+
7+
var viewportSize = {
8+
"width": args.viewportSize[0],
9+
"height": args.viewportSize[1]
10+
};
11+
12+
// Messages are sent to the parent by appending them to the tempfile
13+
var sendMessage = function() {
14+
fs.write(args.tempFile, JSON.stringify(Array.prototype.slice.call(arguments)) + '\n', 'a');
15+
};
16+
17+
// Initialise CasperJs
18+
phantom.casperPath = args.casperPath;
19+
phantom.injectJs([args.casperPath, 'bin', 'bootstrap.js'].join(fs.separator));
20+
21+
var casper = require('casper').create({
22+
"viewportSize": viewportSize,
23+
"logLevel": args.logLevel,
24+
"logLevel": args.logLevel,
25+
"verbose": true
26+
});
27+
28+
// Require and initialise PhantomCSS module
29+
var phantomcss = require('phantomcss');
30+
31+
phantomcss.init({
32+
"libraryRoot": args.phantomCSSPath, // Give absolute path, otherwise PhantomCSS fails
33+
"screenshotRoot": args.screenshots,
34+
"failedComparisonsRoot": args.failures,
35+
36+
/**
37+
* Mismatch tolerance defaults to 0.05%. Increasing this value
38+
* will decrease test coverage
39+
*/
40+
"mismatchTolerance": args.mismatchTolerance,
41+
42+
"onFail": function(test) {
43+
sendMessage('onFail', test);
44+
},
45+
"onPass": function(test) {
46+
sendMessage('onPass', test);
47+
},
48+
"onTimeout": function(test) {
49+
sendMessage('onTimeout', test);
50+
},
51+
"onComplete": function(allTests, noOfFails, noOfErrors) {
52+
sendMessage('onComplete', allTests, noOfFails, noOfErrors);
53+
}
54+
});
55+
56+
// Run the test scenarios
57+
args.test.forEach(function(testSuite) {
58+
require(testSuite);
59+
});
60+
61+
// End tests and compare screenshots
62+
casper.then(function() {
63+
phantomcss.compareAll();
64+
}).run(function() {
65+
phantom.exit(0);
66+
});

tasks/phantomcss.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ module.exports = function(grunt) {
1919
var done = this.async();
2020

2121
var options = this.options({
22-
screenshots: 'screenshots',
22+
logLevel: 'error',
23+
mismatchTolerance: 0.05,
2324
results: 'results',
24-
viewportSize: [1280, 800],
25-
logLevel: 'error'
25+
screenshots: 'screenshots',
26+
viewportSize: [1280, 800]
2627
});
2728

2829
// Timeout ID for message checking loop

0 commit comments

Comments
 (0)