페이지의 동일한 선택자로 모든 요소의 스크린 샷 만들기

Question

페이지에서 같은 선택자로 모든 텍스트의 스크린 샷을 만들어야합니다. 예를 들어, 같은 셀렉터가 11 개 있지만 페이지에 다른 텍스트가 있습니다.

그러나 "반복"을 사용할 때 나는 그것을 할 수 없습니다. 첫 번째 선택기를 11 번 캡처합니다.

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

Answer 1

동일한 결과를 반복해서하고 다른 결과가 예상되는 것은 웹 브라우저 테스트에서 발생할 수 있지만이 경우는 아닙니다. 이 경우 동일한 선택기로 동일한 작업을 반복해서 반복합니다. 선택자를 반복해야합니다.

예를 들어 :nth-of-type()은 동일한 상위 항목 아래의 n 번째 요소를 의미하므로 CSS 선택기를 사용하면 작동하지 않습니다.

이렇게하려면 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 요소를 선택 CasperJS는 그들을 호출 쉽도록하는 XPath 유틸리티를 제공합니다.
• "(//*[contains(@class,'annotation')])["+(index+1)+"]"은 노드 목록에서 index+1 번째 요소를 선택합니다. XPath 식에서 1부터 시작하여 계산 시작