How Can I Reuse A Variable Populated Within A Casperjs Call In A Subsequent Call?

I have the following scoping problem in a CasperJS script. baseTargetUrl is undefined when passing into casper.thenOpenAndEvaluate(). Why is this and how can I work around it? var

Solution 1:

As you know we can't grab variable from outside async calls. This seem kinda hacky but this is the best I've got for now ....

var baseTargetUrl;
        .....
casper.then(function() {
    baseTargetUrl = this.evaluate(function() {
        return __utils__.getElementByXPath('//*[@id="wrapper"]/div[1]/a[2]')["href"];
    });
    console.log('logging: '+baseTargetUrl); // worksthis.thenOpenAndEvaluate(baseTargetUrl ,function() { // 'this' being the instance of caspervar test = document.querySelector('myselector');
        //do other stuff

    });
});

Solution 2:

A commonly used method (for good reasons) for dealing with this problem is using a promise.

There are many different implementations of promises. A lot of frameworks have their own promises included, such as jQuery and AngularJS. There are also stand alone promise frameworks, such as Q.

Promises are a way of chaining methods by resolving values. Once resolved the next function in the chain will be called.

When you'd use Q, your code could look like:

var baseTargetUrl = Q.defer();
        .....
casper.then(function() {
    var value;
    baseTargetUrl.resolve(value = this.evaluate(function() {
        return __utils__.getElementByXPath('//*[@id="wrapper"]/div[1]/a[2]')["href"];
    }));
    console.log('logging: ' + value); // works
});

baseTargetUrl.then(function (value) {
    casper.thenOpenAndEvaluate(value, function () { // value contains the result of the call abovevar test = document.querySelector('myselector');
        //do other stuff
    });
});

Promises are a way of dealing with async code to prevent it from becoming spaghetti, to keep things sane.

In a small situation like this, simply nesting the functions could be your solution too.

var baseTargetUrl;
        .....
casper.then(function() {
    baseTargetUrl = this.evaluate(function() {
        return __utils__.getElementByXPath('//*[@id="wrapper"]/div[1]/a[2]')["href"];
    });
    console.log('logging: '+baseTargetUrl); // works

    casper.thenOpenAndEvaluate(baseTargetUrl ,function() { //baseTargetUrl is no longer undefined, it's a closure nowvar test = document.querySelector('myselector');
        //do other stuff

    });
});

Solution 3:

How about using waitFor?

var baseTargetUrl;

casper.then(function() {
    baseTargetUrl = this.evaluate(/**/);
});

casper.waitFor(function() {
    returntypeof baseTargetUrl !== "undefined";
}, function() { 
    var test = document.querySelector('myselector');
    // ...
});

Solution 4:

This simply worked for me:

var dre_num = "12345678";  // global
casper.getdre = function() {
    return dre_num;
}
casper.setdre = function(str) {
    dre_num = str;
}

casper.then(function(){
    this.setdre("01833946");
});
casper.then(function(){
    this.echo("dre_num : " + this.getdre());
});