In my functional tests i needed to simulate a slow internet-connection and i wanted to have the ability to manipulate the responsedata of the ajax-calls. I used CasperJS and Mockjax for this purpose. In this article i’ll describe how to get there.
Required: CasperJS is already installed on your machine, and your familiar with the basics of node.js.
So lets start with a fresh, clean project. In your command line run these commands:
// Create a new folder
mkdir temp-mockjax-casper-project
// Navigate into that new folder
cd temp-mockjax-casper-project
// Create a new js-file
touch test.js
Open test.js and write the following:
var casper = require("casper").create();
casper.on('remote.message', function(msg) {
this.echo('remote message caught: ' + msg);
})
casper.start('http://der-zyklop.de/', function() {
this.evaluate(function () {
console.log($('h1 img').attr('alt'));
});
});
casper.run();
Lets run it by casperjs test.js
. You should see the title of my blog in your command line. Yes my dear professional SEO consultant, there is no text in my h1… get over it! :P
But this was just a test to see if it’s working. Now replace the content of test.js with this:
var casper = require("casper").create();
casper.on('remote.message', function(msg) {
this.echo('remote message caught: ' + msg);
})
casper.start('http://der-zyklop.de/', function() {
this.evaluate(function () {
$.ajax({
async: false,
url: '/blog/feed',
success:function(data){
console.log(data);
},
error:function(data){
console.log('It doesn’t work that way :');
}
});
});
});
casper.run();
Now you should see that it isn’t possible to do a simple ajax-call on /blog/feed
. It’s blocked for security reasons. But fortunately we can highjax the ajax-request to simulate some a valid mock data. So lets install mockjax:
npm install jquery-mockjax
And now we gonna include jquery-mockjax into our testing-environment:
var casper = require("casper").create({
verbose: true,
logLevel: 'error',
clientScripts: ["node_modules/jquery-mockjax/jquery.mockjax.js"]
});
casper.on('remote.message', function(msg) {
this.echo('remote message caught: ' + msg);
})
casper.start('http://der-zyklop.de/', function() {
this.evaluate(function () {
$.mockjax({
url: "/blog/feed",
responseText: "Hi! I am mockjax!"
});
$.ajax({
async: false,
url: '/blog/feed',
success:function(data){
console.log(data);
},
error:function(data){
console.log('It doesn’t work that way :');
}
});
});
});
casper.run();
Now you should see something like this in your command line:
Only thing that still doesn’t work is the responseTime simulation. I will update this blogpost, when i have a solution.
Cheers!