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

Question

我正在做一个 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();

Answer 1

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

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

function getElementPath(imgIndex) {
    var element = document.getElementsByTagName("img")[imgIndex];
    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});
var x = require('casper').selectXPath;

casper.start("http://www.google.com/");

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

casper.run();

一个可能更好的方法是像这样下载每个图像：

var i = 0;
casper.on("resource.received", function(resource){
    // matches "image/png", "image/jpeg" ...
    if (resource.contentType.indexOf("image/") === 0) {
        this.download(resource.url, 'img%D%.png'.replace('%D%',i));
        i++;
    }
});
casper.start("http://www.google.com/").run();

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