使用页面上的相同选择器制作所有元素的屏幕截图

Question

I need to make screenshot of all text with same selectors on the page. For example I have 11 of the same selectors but with different text on the page.

But when I use "repeat" I can't do it. It only capture the first selector 11 times.

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

Answer 1

Doing the same thing over and over again and expecting different results ... may happen in web browser testing, but not in this case. In this case you're repeating the same task over and over again with the same selector. You need to iterate over the selectors.

This will not work using CSS selectors because :nth-of-type() for example means the nth element under the same parent, which may not be the case for your site.

You should use an XPath expression to do this. CasperJS provides an XPath utility to make it easier invoking them:

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)+"]"));
    });
});

What this XPath means:

• //*[contains(@class,'annotation')] selects all .annotation elements as a node list.
• "(//*[contains(@class,'annotation')])["+(index+1)+"]" selects the index+1 'th element from the node list. Counting starts with 1 in XPath expressions