javascript - Make screenshot of all elements with the same selector on the page -

javascript - Make screenshot of all elements with the same selector on the page -

i need create screenshot of text same selectors on page. illustration have 11 of same selectors different text on page.

but when utilize "repeat" can't it. capture first selector 11 times.

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

doing same thing on , on 1 time again , expecting different results ... may happen in web browser testing, not in case. in case you're repeating same task on , on 1 time again same selector. need iterate on selectors.

this not work using css selectors because :nth-of-type() illustration means nth element under same parent, may not case site.

you should utilize xpath look this. casperjs provides xpath utility create easier invoking them:

class="lang-js prettyprint-override">var x = require('casper').selectxpath; casper.then(function(){ var elements = this.getelementsinfo(".annotation"); // right count elements.foreach(function(_el, index){ // don't need element info, done count casper.captureselector(math.random()+"_"+index+".png", x("(//*[contains(@class,'annotation')])["+(index+1)+"]")); }); });

what xpath means:

//*[contains(@class,'annotation')] selects .annotation elements node list. "(//*[contains(@class,'annotation')])["+(index+1)+"]" selects index+1'th element node list. counting starts 1 in xpath expressions

javascript xpath css-selectors casperjs