使用頁面上的相同選擇器制作所有元素的屏幕截圖

Question

我需要在頁面上使用相同的選擇器制作所有文本的屏幕截圖。 例如，我有11個相同的選擇器，但頁面上的文本不同。

但是，當我使用“重復”時，我做不到。 它僅捕獲第一個選擇器11次。

casper.repeat(11, function() {
    casper.captureSelector(Math.random()+".png", ".annotation");
}); 

Answer 1

一遍又一遍地做同樣的事情，並期望得到不同的結果……可能會在網絡瀏覽器測試中發生，但在這種情況下不會發生。 在這種情況下，您將使用相同的選擇器一遍又一遍地重復相同的任務。 您需要遍歷選擇器。

這不適用於CSS選擇器，因為例如:nth-of-type()表示同一父級下的第n個元素，對於您的網站可能並非如此。

您應該使用XPath表達式來執行此操作。 CasperJS提供了一個XPath實用程序，可以更輕松地調用它們：

var x = require('casper').selectXPath;
casper.then(function(){
    var elements = this.getElementsInfo(".annotation"); // for correct count
    elements.forEach(function(_el, index){
        // don't need the element info, this was done just for count
        casper.captureSelector(Math.random()+"_"+index+".png", x("(//*[contains(@class,'annotation')])["+(index+1)+"]"));
    });
});

這個XPath意味着什么：

• //*[contains(@class,'annotation')]選擇所有.annotation元素作為節點列表。
• "(//*[contains(@class,'annotation')])["+(index+1)+"]"從節點列表中選擇第index+1個元素。 XPath表達式中的計數從1開始