循環並單擊querySelectorAll清單，PhantomJS

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元件數保持不變的前提。注意：可以通過npm（本地）安裝異步。並且可以在PhantomJS中需要。
另外，請參閱this question，我在那裏做了類似的事情。