/*global require, casper, phantom, fs, console */ | |
"use strict"; | |
// INSTRUCTION: call via Gulp (see task there) or in the "visual-regression" folder as: | |
// casperjs --ignore-ssl-errors=yes --ssl-protocol=any --target=[local|remote] test instructions/styleguide.js 2>&1 | grep -v "CoreText performance note" | |
// var phantomcss = require("phantomcss/phantomcss"); | |
var phantomcss = require('./../node_modules/phantomcss/phantomcss.js'); | |
var _IS_REMOTE = (casper.cli.has("target") && casper.cli.get("target")==="remote"), | |
_TARGET_URL = _IS_REMOTE ? "https://website.com" : "http://website.dev:8000", | |
_TARGET_DIR = _IS_REMOTE ? "remote" : "local"; | |
casper.echo('STARTED CASPER FOR: ' + _TARGET_URL + ' (' + _TARGET_DIR + ')'); | |
phantomcss.init({ | |
// phantomcss library folder (relative to this file) - Notice: if you are using NPM, this will be './node_modules/phantomcss' | |
libraryRoot: './node_modules/phantomcss', | |
// folder with GIT-staged comparison baseline images | |
screenshotRoot: './screenshots_' + _TARGET_DIR + '/baseline', | |
// folder for test failures (by default, failure images are put in the './failures' folder; if failedComparisonsRoot is set to false a separate folder will not be created but failure images can still be found alongside the original and new images) | |
failedComparisonsRoot: './screenshots_' + _TARGET_DIR + '/failures', | |
// folder for temporary test results (You might want to keep master/baseline images in a completely different folder to the diffs/failures. Useful when working with version control systems. By default this resolves to the screenshotRoot folder. | |
comparisonResultRoot: './screenshots_' + _TARGET_DIR + '/results', | |
// remove results directory tree after run (use in conjunction with failedComparisonsRoot to see failed comparisons) | |
cleanupComparisonImages: false, // true, | |
// don't add label to generated failure image | |
addLabelToFailedImage: false, | |
// mismatch tolerance defaults to 0.05%. Increasing this value will decrease test coverage | |
mismatchTolerance: 0.05, | |
// callbacks for your specific integration | |
onPass: function(test){ casper.echo('PhantomCSS passed on ' + test.filename, 'INFO'); }, | |
onFail: function(test){ casper.echo('PhantomCSS failed on ' + test.filename + ' (' + test.mismatch + ')', 'ERROR'); }, | |
onTimeout: function(test){ casper.echo('PhantomCSS timed out for ' + test.filename, 'WARNING'); }, | |
// Change the output screenshot filenames for your specific integration | |
fileNameGetter: function(root,filename){ | |
// globally override output filename (files must exist under root and use the .diff convention) | |
var name = root+'/'+filename.toLowerCase().replace(/ /g,'_'); | |
if(fs.isFile(name+'.png')){ | |
return name+'.diff.png'; | |
} else { | |
return name+'.png'; | |
} | |
}, | |
// Output styles for image failure outputs genrated by Resemble.js | |
outputSettings: { | |
errorColor: { | |
red: 255, | |
green: 0, | |
blue: 255 | |
}, | |
errorType: 'movement', | |
transparency: 0.3 | |
} | |
}); | |
// ===== INIT ===== | |
casper.start(_TARGET_URL + '/styleguide/'); | |
casper.viewport(1280, 1024); // set browser size | |
phantomcss.turnOffAnimations(); // turn off CSS transitions and jQuery animations (call it ONLY after casper.start) | |
// ===== STYLEGUIDE > WEBSITE ===== | |
// CR: the full page is too big, skip it! | |
// casper.thenOpen(_TARGET_URL + '/styleguide/website/') | |
// -- chunk sections -- | |
casper.thenOpen(_TARGET_URL + '/styleguide/website/chunk/typography/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__typography', 1, '.section-title', 'Styleguide/Website/Typography'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/website/chunk/colors/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__colors', 1, '.section-title', 'Styleguide/Website/Colours'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/website/chunk/buttons/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__buttons', 1, '.section-title', 'Styleguide/Website/Buttons'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/website/chunk/controls/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__controls', 1, '.section-title', 'Styleguide/Website/Controls'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/website/chunk/tables/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__tables', 1, '.section-title', 'Styleguide/Website/Tables'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/website/chunk/forms/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__forms', 1, '.section-title', 'Styleguide/Website/Forms'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/website/chunk/dialogs/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__dialogs', 1, '.section-title', 'Styleguide/Website/Dialogs'); | |
}) | |
; | |
// ===== STYLEGUIDE > APPLICATIONS ===== | |
// CR: the full page is too big, skip it! | |
// casper.thenOpen(_TARGET_URL + '/styleguide/applications/') | |
// -- chunk sections -- | |
casper.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/colors/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__colors', 1, '.section-title', 'Styleguide/Applications/Colours'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/buttons/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__buttons', 1, '.section-title', 'Styleguide/Applications/Buttons'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/controls/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__controls', 1, '.section-title', 'Styleguide/Applications/Controls'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/blocks/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__blocks', 1, '.section-title', 'Styleguide/Applications/Blocks'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/tabs/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__tabs', 1, '.section-title', 'Styleguide/Applications/Tabs'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/forms/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__forms', 1, '.section-title', 'Styleguide/Applications/Forms'); | |
// single blocks | |
phantomcss.screenshot('.styleguide__forms [regression="forms-inputs"]', 1, '', 'Styleguide/Applications/Forms - Inputs'); | |
phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-types1"]', 1, '', 'Styleguide/Applications/Forms - Inputs Types1'); | |
phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-types2"]', 1, '', 'Styleguide/Applications/Forms - Inputs Types2'); | |
phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-types3"]', 1, '', 'Styleguide/Applications/Forms - Inputs Types3'); | |
phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-types4"]', 1, '', 'Styleguide/Applications/Forms - Inputs Types4'); | |
phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-status1"]', 1, '', 'Styleguide/Applications/Forms - Inputs Status1'); | |
phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-status2"]', 1, '', 'Styleguide/Applications/Forms - Inputs Status2'); | |
phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-validation"]', 1, '', 'Styleguide/Applications/Forms - Inputs Validation'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/modules/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__modules', 1, '.section-title', 'Styleguide/Applications/Modules'); | |
// single blocks | |
phantomcss.screenshot('.styleguide__modules [regression="modules-title"]', 1, '', 'Styleguide/Applications/Modules - Title'); | |
phantomcss.screenshot('.styleguide__modules [regression="modules-data-entry"]', 1, '', 'Styleguide/Applications/Modules - Data Entry'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/messaging/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__messaging', 1, '.section-title', 'Styleguide/Applications/Messaging'); | |
// single blocks | |
phantomcss.screenshot('.styleguide__messaging [regression="messaging-pro-profiles"]', 1, '', 'Styleguide/Applications/Messaging - Pro Profiles'); | |
phantomcss.screenshot('.styleguide__messaging [regression="messaging-customer-profiles"]', 1, '', 'Styleguide/Applications/Messaging - Customer Profiles'); | |
phantomcss.screenshot('.styleguide__messaging [regression="messaging-bubbles"]', 1, '', 'Styleguide/Applications/Messaging - Bubbles'); | |
phantomcss.screenshot('.styleguide__messaging [regression="messaging-message-composer"]', 1, '', 'Styleguide/Applications/Messaging - Message Composer'); | |
phantomcss.screenshot('.styleguide__messaging [regression="messaging-dialog-page"]', 1, '', 'Styleguide/Applications/Messaging - Dialog Page'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/lists/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__lists', 1, '.section-title', 'Styleguide/Applications/Lists'); | |
}) | |
.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/tables/') | |
.then(function() { | |
phantomcss.screenshot('.styleguide__tables', 1, '.section-title', 'Styleguide/Applications/Tables'); | |
}) | |
; | |
// ===== IMAGE COMPARISON ===== | |
casper.then(function() { | |
/* CR: possible call methods | |
phantomcss.compareAll(); | |
phantomcss.compareAll('exclude.test'); // string is converted into a Regular expression that matches on full image path | |
phantomcss.compareMatched('include.test', 'exclude.test'); | |
phantomcss.compareMatched( new RegExp('include.test'), new RegExp('exclude.test')); | |
phantomcss.compareSession(); // Compare image diffs generated in this test run only | |
phantomcss.compareExplicit(['/dialog.diff.png', '/header.diff.png']); // Explicitly define what files you want to compare | |
phantomcss.getCreatedDiffFiles(); // Get a list of image diffs generated in this test run | |
phantomcss.compareFiles(baseFile, diffFile); phantomcss.waitForTests(); // Compare any two images, and wait for the results to complete | |
*/ | |
phantomcss.compareSession(); | |
}); | |
// ===== ALL DONE ===== | |
casper.run(function() { | |
casper.test.done(); | |
console.log("\nTHE END."); | |
phantom.exit(phantomcss.getExitStatus()); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment