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下载内联图像时会失败。

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

1 个答案: