| /*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