Jquery 使用casperjs捕获页面上图像元素的屏幕截图

我正在做一个UI测试项目。casperjs提供captureSelector方法，仅捕获网页上的特定元素。我在网上到处搜索，找不到合适的解决办法。到目前为止，我能收集到的最好的信息是给定的代码。另外，我必须假设网站还没有包含jquery脚本

function getElementPath(element)
{
return "//" + $(element).parents().andSelf().map(function() {
    var $this = $(this);
    var tagName = this.nodeName;
    if ($this.siblings(tagName).length > 0) {
        tagName += "[" + $this.prevAll(tagName).length + "]";
    }
    return tagName;
}).get().join("/").toUpperCase();
}
var casper = require('casper').create({verbose: true});
casper.start("http://www.google.com/");
var images;

casper.then(function() {

var x = require('casper').selectXPath;

images = this.evaluate(function() {
    return document.getElementsByTagName("img");
});
for(var i=0;i<images.length;i++){
    this.captureSelector('img%D%.png'.replace('%D%',i),x(getElementPath(images[i])));
}
});

casper.run();

---

您无法在casper上下文中访问DOM。您需要在页面上下文中使用。该链接还包含了一个很好的说明，说明了为什么您不能这样做

修复方法是在页面中生成元素路径，将路径返回到casper上下文中，然后捕获选择器

函数getElementPathimgIndex{ var element=document.getElementsByTagNameimg[imgIndex]； return//+$element.parents.andSelf.mapfunction{ var$this=$this； 变量标记名=this.nodeName； 如果$this.siblingstagName.length>0{ 标记名+=[+$this.prevalltangame.length+]； } 返回标记名； }.get.join/.toUpperCase； } var casper=require'casper'。创建{verbose:true}； var x=require'casper'。选择XPath； 卡斯珀。starthttp://www.google.com/; 卡斯珀函数{ var images=this.evaluatefunction{ return document.getElementsByTagNameimg.length； }; var图像路径； forvar i=0；i var i=0； casper.onresource.received，functionresource{ //匹配图像/png、图像/jpeg。。。 如果resource.contentType.indexOfimage/==0{ this.downloadresource.url，“img%D%.png”。替换“%D%”，i； i++； } }; 卡斯珀。starthttp://www.google.com/.run;

---

这可能不一定意味着开销，因为可以从缓存提供图像。这将下载具有原始分辨率的图像。问题是，它还将下载CSS中定义的图像，这可能是好的，也可能不是好的，当通过数据URI下载内联图像时，它将失败。

这件事实际上很有效。。谢谢。。。但有一个问题。。。它捕获了所有的图像资源……它并没有特别使用html DOM img元素，因此图像的数量比当前页面上实际显示的图像数量要多……是的，没有办法知道这些是从img元素、CSS背景图像还是普通AJAX请求的。这也不适用于数据URI。