Clicking objects on the evaluated page using CasperJS

Question

I'm trying to click x number of objects on the evaluated page but it's failing after all day sunday attempts.. I have the following code, you can see I build up a list of objects in my variable (called itemsToAdd) and then I need that to be passed onto the evaluated page and then those objects to be clicked.

I know you can't pass complex objects to the evaluated page but every attempt I've tried has failed.. I've tried everything, please help. I've also tried custom js files although I couldn't get that working either.

$(function(ns) {
    ns.myMethod = function(itemArray) {
        var items = itemArray.items;

        for (i = 0; i < items.length; i++) { 
            casper.thenEvaluate(function() {
                casper.click(items[i].buttonId);

                casper.waitUntilVisible(items[i].basketId, function() {
                    casper.echo(items[i].successMessage);
                });
            });
        }

        return this;
    };
})(namespace('test'));

This is my variable, the buttonId is the DOM id for the button on the evaluated page. The basketId is another section on the evaluated page that gets updated to represent the button clicking has worked.

Complex variable

var itemsToAdd = {
    'items': [
        {
            buttonId: '#button1',
            basketId: '#nowInBasket1',
            successMessage: 'It worked'
        },
        {
            buttonId: '#button2',
            basketId: '#nowInBasket2',
            successMessage: 'this worked aswell'
        }
    ]
};

Calling the code

test.myMethod(itemsToAdd);

Are you using a custom test framework (`$`) or is it published somewhere? Can you link to it? — Artjom B., Oct 19 '14 at 17:30
jQuery makes sense in the page context, but not in casper context. There is no DOM in casper context, so most of the jQuery functions will be broken. — Artjom B., Oct 19 '14 at 21:12

score 0 · Accepted Answer · edited May 23 '17 at 12:05

There are multiple problems with your code.

evaluate is the sandboxed page context. There are no CasperJS or PhantomJS functions accessible inside of it. But it doesn't look like you are using the page context, so you should change thenEvaluate to then. I have written post here which shows for which things you can use the evaluate function/page context.

JavaScript has function scope. Read this question to learn more. This means that after the loop has executed all is point to the last i. You need a closure to fix this (here I use an IIFE, but you can also change the loop to itemArray.items.forEach(...).

var items = itemArray.items;

for (i = 0; i < items.length; i++) { 
    (function(i){
        casper.then(function() {
            casper.click(items[i].buttonId);

            casper.waitUntilVisible(items[i].basketId, function() {
                casper.echo(items[i].successMessage);
            });
        });
    })(i);
}

If this doesn't solve your problem then this is probably a problem with your $ framework, whatever that is.

I'm not sure when to use evaluate or thenevaluate.. Whats the difference? — user3773890, Oct 19 '14 at 17:37
You can't return anything with `thenEvaluate` so it is executed as a void function, but asynchronously (schedules a step). `evaluate` is executed immediately. — Artjom B., Oct 19 '14 at 17:39

Clicking objects on the evaluated page using CasperJS

1 Answers1