Skip to content

Instantly share code, notes, and snippets.

@didoo

didoo/styleguide.js

Last active Sep 19, 2016
Embed
What would you like to do?
/*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
You can’t perform that action at this time.