Passing Variable Content From Headless Browser into CasperJS

This is a very common task. CasperJS, powered by PhantomJS, works with Javascript on two planes: the script and the headless browser. It is very common to confuse them because both are written in Javascript. It took me a while to understand that; as a rule of dumb, all the scripts are executed on the CasperJS end but the code that it is in the evaluate() function. All code within the evaluate() function is going to be interpreted on the headless browser end, it will have access to all variables and Javascript events.

One of the most common tasks when coding with CasperJS is to get variable values from the headless browser (with evaluate() function) to the CasperJS for data manipulation. Here it is how I did it.

Let's say we have an HTML page with some Javascript code that uses the variable name myVar. So here it is the code I use. Modify it to fit your needs.

var myVarInCasper = this.page.evaluate(function() {
    var myVarInBrowser;
    // Put here some data manipulation you need
    myVarInBrowser = myVar;  //myVar is defined somewhere else in your HTML page
   return myVarInBrowser;
});

Done, next step you can print the value of myVarInCasper and you will see it is the same as myVarInBrowser.

Enjoy!