casper.test.begin( 'begin test baidu ', function ( test ) {
phantomcss.init( {
rebase: casper.cli.get( "rebase" ),
// SlimerJS needs explicit knowledge of this Casper, and lots of absolute paths
casper: casper,
libraryRoot: fs.absolute( fs.workingDirectory + '' ),
screenshotRoot: fs.absolute( fs.workingDirectory + '/screenshots' ),
failedComparisonsRoot: fs.absolute( fs.workingDirectory + '/demo/failures' ),
addLabelToFailedImage: false,
/*
screenshotRoot: '/screenshots',
failedComparisonsRoot: '/failures'
casper: specific_instance_of_casper,
libraryRoot: '/phantomcss',
fileNameGetter: function overide_file_naming(){},
onPass: function passCallback(){},
onFail: function failCallback(){},
onTimeout: function timeoutCallback(){},
onComplete: function completeCallback(){},
hideElements: '#thing.selector',
addLabelToFailedImage: true,
outputSettings: {
errorColor: {
red: 255,
green: 255,
blue: 0
},
errorType: 'movement',
transparency: 0.3
}*/
} );
casper.on( 'remote.message', function ( msg ) {
this.echo( msg );
} );
casper.on( 'error', function ( err ) {
this.die( "PhantomJS has errored: " + err );
} );
casper.on( 'resource.error', function ( err ) {
casper.log( 'Resource load error: ' + err, 'warning' );
} );
/*
The test scenario
*/
casper.start( 'https://www.baidu.com' );
casper.echo("test start");
casper.viewport( 1024, 768 );
casper.then(function() {
this.sendKeys(' input#kw.s_ipt', 'casper');
});
casper.then( function () {
phantomcss.screenshot( 'input#kw', 'get the input text' );
} );
casper.then( function () {
casper.click( 'input#su' );
// wait for modal to fade-in
casper.waitForSelector( '#help a.feedback',
function success() {
phantomcss.screenshot( '#content_left', 'result left' );
},
function timeout() {
casper.test.fail( 'fail' );
}
);
} );
// casper.then( function () {
// casper.click( '#cappuccino-button' );
// phantomcss.screenshot( '#myModal', 'cappuccino success' );
// } );
//
// casper.then( function () {
// casper.click( '#close' );
//
// // wait for modal to fade-out
// casper.waitForSelector( '#myModal[style*="display: none"]',
// function success() {
// phantomcss.screenshot( {
// 'Coffee machine close success': {
// selector: '#coffee-machine-wrapper',
// ignore: '.selector'
// },
// 'Coffee machine button success': '#coffee-machine-button'
// } );
// },
// function timeout() {
// casper.test.fail( 'Should be able to walk away from the coffee machine' );
// }
// );
// } );
casper.then( function now_check_the_screenshots() {
// compare screenshots
phantomcss.compareAll();
} );
/*
Casper runs tests
*/
casper.run( function () {
console.log( '\nTHE END.' );
// phantomcss.getExitStatus() // pass or fail?
casper.test.done();
} );
} );
phantom.addCookie(cookie);
});
}
}
function checkStatusAndWait(res) {
if (res.status !== 200) {
this.die('Expected 200 status code, got ' + res.status, 1);
}
// Pseudo-readyness-check
this.waitWhileSelector('.jplayer-stub');
}
phantomcss.init({
screenshotRoot: './screenshots',
failedComparisonsRoot: './failures',
mismatchTolerance: 0.1,
libraryRoot: './node_modules/phantomcss'
});
casper.start().each(pageNames, function testPage(casper, pageName) {
var page = config.pages[pageName];
this.then(function () {
phantom.clearCookies();
setCookies(config.cookies);
setCookies(page.cookies);
});
this.each(viewportNames, function testViewport(casper, viewportName) {
headers = getHeaders(config, page);
var url = config.host + page.path;
var vp = config.viewports[viewportName];
this.then(function setViewport() {
'foundation/funds/craig-kelly-memorial-scholarship',
'foundation/funds/cora-shea-memorial',
'foundation/funds/al-hodgson-memorial',
'foundation/funds/issw',
'foundation/donate',
// 404
'does-not-exist',
]
const hosts = [
'http://avalanche.ca/',
'http://avalanche-canada-dev.elasticbeanstalk.com/',
'http://localhost:9000/',
]
phantomcss.init({
screenshotRoot: './screenshots',
failedComparisonsRoot: './failures',
})
casper.start()
function take(name, index) {
console.log(index + 1, 'of', paths.length, '>', name)
phantomcss.screenshot('body', name)
}
const host = hosts[2]
paths.forEach(function(path, index) {
casper.thenOpen(host + path).wait(10000, take.bind(null, path, index))
})
casper.test.begin( '测试咖啡', function ( test ) {
phantomcss.init({
/*
captureWaitEnabled defaults to true, setting to false will remove a small wait/delay on each
screenshot capture - useful when you don't need to worry about
animations and latency in your visual tests
*/
captureWaitEnabled: true,
/*
libraryRoot is now optional unless you are using SlimerJS where
you will need to set it to the correct path. It must point to
your phantomcss folder. If you are using NPM, this will probably
be './node_modules/phantomcss'.
*/
// libraryRoot: './modules/PhantomCSS',
screenshotRoot: './screenshots',
/*
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: './failures',
/*
Remove results directory tree after run. Use in conjunction
with failedComparisonsRoot to see failed comparisons.
*/
cleanupComparisonImages: true,
/*
A reference to a particular Casper instance. Required for SlimerJS.
*/
// casper: specific_instance_of_casper,
/*
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: './results',
/*
Don't add count number to images. If set to false, a filename is
required when capturing screenshots.
*/
addIteratorToImage: false,
/*
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
*/
onFail: function(test){
console.log("======onFail======");
console.log(test.filename, test.mismatch);
},
onPass: function(test){
console.log("======onPass======");
console.log(test.filename);
},
/*
Called when creating new baseline images
*/
onNewImage: function(){
console.log("======onNewImage======");
console.log(test.filename);
},
onTimeout: function(){
console.log("======onTimeout======");
console.log(test.filename);
},
onComplete: function(allTests, noOfFails, noOfErrors){
allTests.forEach(function(test){
if(test.fail){
console.log("======onComplete======");
console.log(test.filename, test.mismatch);
console.log("======onoOfFails======");
console.log(noOfFails);
console.log("======noOfErrors======");
console.log(noOfErrors);
}
});
},
onCaptureFail: function(ex, target) {
console.log('Capture of ' + target + ' failed due to ' + ex.message);
},
/*
Change the output screenshot filenames for your specific
integration
*/
fileNameGetter: function(root,filename){
console.log("======fileNameGetter======");
// globally override output filename
// files must exist under root
// and use the .diff convention
var name = root+'/somewhere/'+filename;
if(fs.isFile(name+'.png')){
return name+'.diff.png';
} else {
return name+'.png';
}
},
/*
Prefix the screenshot number to the filename, instead of suffixing it
*/
prefixCount: true,
/*
Output styles for image failure outputs generated by Resemble.js
*/
outputSettings: {
errorColor: {
red: 255,
green: 255,
blue: 0
},
errorType: 'movement',
transparency: 0.3
},
/*
Rebase is useful when you want to create new baseline
images without manually deleting the files
casperjs demo/test.js --rebase
*/
rebase: casper.cli.get("rebase"),
/*
If true, test will fail when captures fail (e.g. no element matching selector).
*/
failOnCaptureError: false
});
casper.on( 'remote.message', function ( msg ) {
this.echo( msg );
} );
casper.on( 'error', function ( err ) {
this.die( ">>>>>PhantomJS has errored: " + err );
} );
casper.on( 'resource.error', function ( err ) {
casper.log( '>>>>>Resource load error: ' + err, '>>>>>warning' );
} );
/*
The test scenario
*/
casper.start('http://127.0.0.1:8081/');
casper.viewport( 1024, 768 );
casper.then( function () {
phantomcss.screenshot( '#coffee-machine-wrapper', 'open coffee machine button' );
} );
casper.then( function () {
casper.click( '#coffee-machine-button' );
// wait for modal to fade-in
casper.waitForSelector( '#myModal:not([style*="display: none"])',
function success() {
phantomcss.screenshot( '#myModal', 'coffee machine dialog' );
},
function timeout() {
casper.test.fail( '>>>>>Should see coffee machine' );
}
);
} );
casper.then( function () {
casper.click( '#cappuccino-button' );
phantomcss.screenshot( '#myModal', 'cappuccino success' );
} );
casper.then( function () {
casper.click( '#close' );
// wait for modal to fade-out
casper.waitForSelector( '#myModal[style*="display: none"]',
function success() {
phantomcss.screenshot( {
'Coffee machine close success': {
selector: '#coffee-machine-wrapper',
ignore: '.selector'
},
'Coffee machine button success': '#coffee-machine-button'
} );
},
function timeout() {
casper.test.fail( 'Should be able to walk away from the coffee machine' );
}
);
} );
casper.then( function now_check_the_screenshots() {
// compare screenshots
phantomcss.compareAll();
} );
/*
Casper runs tests
*/
casper.run( function () {
console.log( '\nTHE END.' );
// phantomcss.getExitStatus() // pass or fail?
casper.test.done();
} );
} );
var phantomcss = require('phantomcss');
phantomcss.init({
screenshotRoot: './screenshots',
failedComparisonsRoot: './failures',
libraryRoot: 'node_modules/phantomcss'
});
var url = 'http://dev.lunchosaurs.com/';
casper.start();
casper.viewport(1024, 768);
casper.thenOpen(url, function () {
phantomcss.screenshot('.header', 'theheader');
});
casper.then(function () {
phantomcss.compareAll();
});
casper.run(function () {
phantom.exit(phantomcss.getExitStatus());
});
casper.test.begin('Next visual regression tests', function(test) {
// phantom config
phantomcss.init({
timeout: 1000,
libraryRoot: './node_modules/myrtlejs/node_modules/phantomcss',
screenshotRoot: './test/visual/screenshots/successes',
failedComparisonsRoot: './test/visual/screenshots/failures',
addLabelToFailedImage: false,
fileNameGetter: function(root, fileName) {
var file = root + '/' + fileName;
if (isFile(file + '.png')) {
return file + '.diff.png';
}
return file + '.png';
}
});
// set up casper a bit
casper.on("page.error", function(msg, trace) {
this.echo("Error: " + msg, "ERROR");
});
casper.on("remote.message",function(msg) {
this.echo("Message: " + msg);
});
casper.options.pageSettings.javascriptEnabled = true;
casper.start();
Object.keys(configs.tests).forEach(function(pageName) {
var config = configs.tests[pageName];
// For every width…
config.widths.forEach(function(width) {
// On both environments…
["base", "test"].forEach(function(env) {
console.log("Opening " + configs.hosts[env] + config.path);
casper.thenOpen(
"https://" + configs.hosts[env] + config.path,
{
method: 'get',
headers: {
'Cookie': 'next-flags=javascript:off; FT_SITE=NEXT',
'FT-Next-Backend-Key': system.env.FT_NEXT_BACKEND_KEY
}
},
function() {
console.log("Opened " + configs.hosts[env] + config.path);
// COMPLEX: #viewport call has to be here because it's sort of synchronous (but not quite)
// and calling any earlier causes it to make all screenshots have the same width
// (whichever happens to be the last width in the array)
casper.viewport(width, height);
console.log("Browser width set to " + width);
// For each element…
Object.keys(config.elements).forEach(function(elementName) {
var fileName = pageName + "_" + elementName + "_" + width + "_" + height + "_" + env;
phantomcss.screenshot(config.elements[elementName], 2000, undefined, fileName);
if (env === 'base') {
compares.push("test/visual/screenshots/successes/" + fileName + ".png");
}
});
}
);
});
});
});
casper.then(function() {
compares.forEach(function(compare) {
phantomcss.compareFiles(compare, compare.replace('_base', '_test'));
});
});
casper.run(function() {
casper.exit();
});
});
// 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) {