Loop and click on querySelectorAll list with PhantomJS

Question

Consider the following (working) PhantomJS piece of code, supposed to click on the first element of class whatever :

page.evaluate(
    function()  
    {
        var a = document.querySelector(".whatever");
        var e = document.createEvent('MouseEvents');
        e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e);
        waitforload = true;
    }
);

I'm failing to make it loop on all elements of class whatever — the problem not being the loop itself of course but the access to querySelectorAll elements.

I'm stuck here (I replaced the loop by access to first element for easier debugging ; of course there has to be two page.evaluate calls since the second one would be within the loop) :

var aa = page.evaluate(
    function()
    {
        return document.querySelectorAll(".whatever");
    }
)
//for (i=0; i<aa.length; i++)
//{
page.evaluate(
    function()  
    {
        var e = document.createEvent('MouseEvents');
        e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
//      aa[i].dispatchEvent(e);
        aa[0].dispatchEvent(e);
        waitforload = true;
    }
);
//}

I tried several variations, removing var, prefixing variables with document., trying to pass aa as an argument, etc. Nothing worked (I probably missed the right combination, but anyway I'm clearly missing the basis here).

I'm not sure if it has to do with namespaces and scope of variables (I'm very new to JS) or if the issue comes from the querySelectorAll output (though I checked the size of the array to be correct), since I'm encountering both "ReferenceError: Can't find variable" and "TypeError: 'undefined' is not an object" errors.

Any hint would be welcome.

Yes, this is very much related to scopes/sandbox. There are multiple solutions. The question is what do these clicks do? Load a new page or simply change the state of the page? If the latter, do you need to start with the same state or is it ok if you just click everything one after the other? — Artjom B., Nov 06 '14 at 16:22
I don't know for sure yet. One click loads a box with additional information. The box itself hides the other buttons, so I don't know what happens when one clicks on another button once the box is displayed. My guess is that it will either replace or come on top of the previous box. Anyway my goal is to get all of these boxes. So for a start I would try to click everything one after the other. — Skippy le Grand Gourou, Nov 06 '14 at 16:55

score 2 · Accepted Answer · edited May 23 '17 at 12:21

Based on your comment:

One click loads a box with additional information. The box itself hides the other buttons, so I don't know what happens when one clicks on another button once the box is displayed. My guess is that it will either replace or come on top of the previous box. Anyway my goal is to get all of these boxes. So for a start I would try to click everything one after the other.

The easiest solution would be to retrieve the number of .whatever elements and iterate based on that, but since it needs some page interaction and PhantomJS is asynchronous, you would need to use some framework to run the steps one after the other. async can be used for that or you create something similar just for this script.

function clickInPageContext(selector, index){
    page.evaluate(function(selector, index){
        index = index || 0;
        var e = document.createEvent('MouseEvents');
        e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        var el = document.querySelectorAll(selector);
        el[index].dispatchEvent(e);
    }, selector, index);
}

var async = require("async"); // install async through npm
var selector = ".whatever";
var num = page.evaluate(function(sel){
    return document.querySelectorAll(sel).length;
}, selector);
var steps = [];
for (var i = 0; i < num; i++) {
    // the immediately invoked function looks bad, but is necessary,
    // because JS has function level scope and this is executed long 
    // after the loop has finished
    steps.push((function(i){
        return function(complete){
            clickInPageContext(selector, i);
            setTimeout(function(){
                clickInPageContext("someCloseButtonSelector"); // maybe also parametrized with i
                setTimeout(function(){
                    complete();
                }, 1000); // time to close
            }, 1000); // time to open
        };
    })(i));
}
async.series(steps, function(){
    console.log("DONE");
    phantom.exit();
});

This test depends on the premise that the number of .whatever elements stays the same. Note: async can be installed through npm (locally). And can be required in PhantomJS.
Also, see this question where I did something similar.

Thanks. I replaced `clickInPageContext("someCloseButtonSelector")` with the evaluating and logging of the element I need. For the records, to make it work I had to place the whole piece of code (below `var selector`) where I did the clicking and evaluating before — that is, as the function content of the second argument of a `waitFor` clause. — Skippy le Grand Gourou, Nov 07 '14 at 16:26
Oh, and thanks for the note about `npm`, I didn't know about it. — Skippy le Grand Gourou, Nov 07 '14 at 16:37

Loop and click on querySelectorAll list with PhantomJS

1 Answers1