javascript - 使用 PhantomJS 循环并单击 querySelectorAll 列表

Question

考虑以下(工作)PhantomJS 代码段，应该单击类 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;
    }
);

我无法使其在 whatever 类的所有元素上循环 - 问题当然不是循环本身，而是对 querySelectorAll 元素的访问。

我被困在这里(我通过访问第一个元素替换了循环，以便于调试；当然，必须有两个 page.evaluate 调用，因为第二个调用将在循环内) :

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;
    }
);
//}

我尝试了几种变体，删除var，用document.为变量添加前缀，尝试将aa作为参数传递，等等。没有任何效果(我可能错过了正确的组合，但无论如何我显然错过了这里的基础)。

我不确定它是否与命名空间和变量范围有关(我对 JS 很陌生)，或者问题是否来自 querySelectorAll 输出(尽管我检查了大小)数组的正确性)，因为我遇到了“ReferenceError:找不到变量”和“TypeError:'undefined'不是对象”错误.

欢迎任何提示。

Answer 1

基于您的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.

最简单的解决方案是检索 .whatever 元素的数量并基于该数量进行迭代，但由于它需要一些页面交互并且 PhantomJS 是异步的，因此您需要使用一些框架来运行步骤一个接一个。 async可以用于此目的，或者您可以为此脚本创建类似的内容。

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();
});

此测试的前提是 .whatever 元素的数量保持不变。注意:async 可以通过 npm (本地)安装。并且可以在 PhantomJS 中要求。
另请参阅this question我在那里做了类似的事情。