Store multiple DOM Elements in an Array with CasperJS

Question

For the last couple of hours I have been trying to query DOM elements and store them in an array with CasperJS, so then after that, I can loop through them and fire a click event.

Let's say, my markup is like this:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Now, I want to store each <li> an an Array, then loop through, fire a Click event, then take a capture.

This is one of the things I tried:

var listItems = [];

casper.start();

casper.open(urlHere, function () {
    listItems.push(this.evaluate(function () {
        return document.querySelectorAll('ul > li');
    }));

    this.echo(listItems);
});

It returns [ , , , ] which basically means they are all null.

Can someone please direct me in the right direction?

Thank you!

Answer 1

Try this:

var listItems = [];

casper.start(urlHere, function () {
    listItems = this.evaluate(function () {
        var nodes = document.querySelectorAll('ul > li');
        return [].map.call(nodes, function(node) {
            return node.textContent;
        });
    });

    this.echo(listItems);
});     

Basically, you can't return values which are not serializable from this.evaluate(), it's rather well explained in the docs.