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!