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＆n;第39个元素。计数从XPath表达式中的1开始

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

1 个答案: