Сделать снимок экрана всех элементов с тем же селектором на странице

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 из списка узлов. Счет начинается с 1 в выражениях XPath