Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Testing web UI interaction response times with CasperJS
var colorizer = require('colorizer').create('Colorizer');
var casper = require('casper').create();
var totalTests=3;
casper.start('http://jqueryui.com/resources/demos/tabs/ajax.html', function(){
casper.viewport(1024, 768);
this.test.assertHttpStatus(200, "The page has loaded.");
this.test.assertSelectorExists('#tabs', "We got tabs.");
this.test.assertVisible('#tabs-1', "Content 1 is visible.");
this.capture('ui-id-1.png');
});
testTabLoad('#ui-id-2', '#ui-tabs-1', "Tab 1", "tab1.png");
testTabLoad('#ui-id-3', '#ui-tabs-2', "Tab 2", "tab2.png");
testTabLoad('#ui-id-4', '#ui-tabs-3', "Tab 3 (slow)", "tab3.png");
testTabLoad('#ui-id-5', '#ui-tabs-4', "Tab 4 (broken)", "tab4.png");
casper.run(function() {
this.test.done(totalTests);
this.test.renderResults(true);
});
function testTabLoad(tab, content, name, capfilename){
totalTests+=4;
casper.then(function() {
if(name)casper.echo(name, "COMMENT");
var start=Date.now();
this.test.assertSelectorExists(tab, "Tab selector exists.");
this.test.assertSelectorExists(content, "Content selector exists.");
this.test.assertDoesntExist(content+'>p', "Content is not already populated.");
this.test.assertNotVisible(content, "Content selector is not currently visible.");
this.click(tab);
this.waitUntilVisible(content+'>p', function(){
casper.echo("Content became visible in " + (Date.now()-start) + " ms", "INFO_BAR");
if(capfilename)this.captureSelector(capfilename, content);
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment