Waiting for a selector in a loop with CasperJS

Question

I want to do in the loop waiting selector as long as the found object will not be satisfy specified conditions. I wrote the following code.

casper.then(
    function(){
        var need_exit = false;
        this.echo('enter loop');
        var i = 1;
        while (!need_exit){
            this.echo('check exit');
            // check, if chat was finished
            if (this.exists('div#chat > p')){
                need_exit = true;
                this.echo('exit loop');
            }
            // wait new message
            else {
                    this.echo('wait msg ' + datetime());
                    var selector = 'div#chat tr:nth-child('+i+')';
                    try{
                        this.waitForSelector(selector,
                            function(){
                                var msg_selector = 'div#chat tr:nth-child('+i+') > td:nth-child(2)';
                                var inf = this.getElementInfo(msg_selector);
                                this.echo(inf['text']);
                                i++;
                            },
                            null,
                        5000);
                    }
                    catch(err){
                        this.echo('[wait timeout]');
                    }
                    need_exit = true;
            }
        }

    }
);

The problem is that the iteration continually follow each other instead of advancing to the next iteration after the item is found or a timeout has expired. Why is this happening and how to do correct?

Answer 1

The problem is that all then* and wait* calls are asynchronous step functions. That is why you can't use a loop around them. The normal way this is solved is by using a recursive function:

This is a re-imagined version of your function:

casper.waitContinuouslyUntilSelector = function(checkRow, finalSelector, then, onTimeout, timeout, i){
    // TODO: remove the `this.echo()` calls from this function
    i = i || 1;
    this.then(function(){
        if (this.exists(finalSelector)) {
            this.echo('finalSelector found');
            this.then(then);
            return;
        }
        this.waitForSelector(checkRow(i), function _then(){
            this.waitContinuouslyUntilSelector(checkRow, finalSelector, then, onTimeout, timeout, i+1);
        }, function _onTimeout(){
            if (this.exists(finalSelector)) {
                this.echo('finalSelector found');
                this.then(then);
            } else {
                this.echo('finalSelector not found');
                if (typeof onTimeout !== "function") {
                    throw new CasperError("Final selector was not found and next row was not loaded");
                }
                this.then(onTimeout);
            }
        }, timeout);
    });
    return this;
}

You can use it like this:

casper.then(function(){
    var bindingExitSelector = 'div#chat > p';
    var rowSelectorFunc = function(i){
        return 'div#chat tr:nth-child('+i+') > td:nth-child(2)';
    };
    this.waitContinuouslyUntilSelector(rowSelectorFunc, bindingExitSelector);
});

If there are no more rows loaded and the "final" <p> is also not present, a timeout error appears. If you want to prevent that, you need to pass in an onTimeout callback:

this.waitContinuouslyUntilSelector(rowSelectorFunc, 
        bindingExitSelector, 
        null, 
        function _onTimeout(){
            this.echo("Failed to load the next row and didn't found the final selector; continue...");
        });