如何循环浏览每个图像并在casperjs脚本中检查其是否存在错误

CasperJS提供了resourceExists函数，该函数可用于检查是否加载了特定的资源。ressource被传递到一个函数中，因此可以引发自定义约束。

casper.then(function(){
    var fail_amount = 0;
    var pass_amount = 0;
    var pass_img_src = [];
    var fail_img_src = [];
    var elements = this.getElementsInfo("img");
    elements.forEach(function(img){
        if (img && img.attributes && casper.resourceExists(function(resource){
            return resource.url.match(img.attributes.src) && 
                   resource.status >= 200 && 
                   resource.status < 400;
        })) {
            pass_amount++;
            pass_img_src.push(img.attributes.src);
        } else {
            fail_amount++;
            fail_img_src.push(img.attributes.src);
        }
    });
    this.echo(JSON.stringify([fail_amount, fail_img_src, pass_amount, pass_img_src], undefined, 4));
});

这可以在页面加载后完成。因此，没有必要在页面上下文中预先添加一些代码。

反过来，代码的问题可能是回调永远不会触发，因为图像已经加载或已经超时。因此没有新的信息。

如果您不确定统计哪种类型的错误，可以对所有可用类型或错误使用自定义资源检测。

var resources = []; // a resource contains at least 'url', 'status'
casper.on("resource.received", function(resource){
    if (resource.stage == "end") {
        if (resource.status < 200 || resource.status >= 400) {
            resource.errorCode = resource.status;
            resource.errorString = resource.statusText;
        }
        resources.push(resource);
    }
});
casper.on("resource.timeout", function(request){
    request.status = -1;
    resources.push(request);
});
casper.on("resource.error", function(resourceError){
    resourceError.status = -2;
    resources.push(resourceError);
});
function resourceExists(url){
    return resources.filter(function(res){
        return res.url.indexOf(url) !== -1;
    }).length > 0;
}
casper.start(url, function(){
    var elements = this.getElementsInfo("img");
    elements.forEach(function(img){
        if (img && img.attributes && resourceExists(img.attributes.src) && !resourceExists(img.attributes.src).errorCode) {
            // pass
        } else {
            // fail
        }
    }); 
});

我对caperjs没有太多经验，在我的观察中，我确定了以下几点

注意：

• jQuery .load( handler )和CCD_。

• 如果使用jQuery 1.8+，则将load和error事件附加到img(tags)不会有任何作用。

• jQueryAjax模块还有一个名为$.load()的方法，它是$.get()的快捷形式。哪一个被解雇取决于传递的参数集。

当与jQuery Docs的图像一起使用时，以下是加载事件的注意事项

开发人员试图使用.load（）快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载后执行函数。有几个已知的注意事项需要注意。这些是：

• 它在跨浏览器中工作不一致，也不可靠
• 如果将图像src设置为与以前相同的src，则不会在WebKit中正确启动
• 它没有正确地弹出DOM树
• 对于已经存在于浏览器缓存中的图像，可以停止激发

因此，如果您的jQuery版本为1.8+，那么下面的块将不起任何作用

$(this).load(function(){
   pass_amount++;
   pass_img_src.push($(this).attr("src")); 
}).error(function(){
   fail_amount++; 
   fail_img_src.push($(this).attr("src"));
});

因此，此return [img_src, fail_amount, fail_img_src, pass_amount, pass_img_src];语句将仅向我们提供以imgs为长度的img_src[]数组，该数组在页面中填充imgs中的srcs。并且其他元件CCD_ 15将一直具有相同的默认值。

在jQuery 1.8低于load和error的情况下，使用jQuery附加事件是有意义的（在您的情况中，这些事件是在页面上加载后附加的，因此它们不会对加载和错误回调显示任何影响），但我们附加事件的时间很重要。我们应该在img标记之前附加这些，或者将事件放在标记级别（作为属性onload&oneror），函数处理程序脚本的定义应该放在任何img标记之前，或者放在body或head 的最开始

这里有一些方法可以解决：

• 使用开源插件（使用imagesLoaded）(https://github.com/desandro/imagesloaded)
• 可以使用ajax调用来确定img.src.url是否良好
• 基于尺寸的检查，如以下function IsImageRendered

下面我有，但它的旧版本现在不确定浏览器支持。如果你能使用，我建议你使用上面的插件

var call_to_page = this.evaluate(function () {
    function isImageRendered(img) {
        // with 'naturalWidth' and 'naturalHeight' to get true size of the image. 
        // before we tried width>0 && height>0
        if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
            return false;
        }
        //good 
        return true;
    }
    var pass_img_src = [];
    var fail_img_src = [];
    var img_src = [];
    $("img").each(function () {
        var $img = $(this), $srcUrl = $img.attr("src");
        img_src.push($srcUrl);
        if (!$srcUrl)
            fail_img_src.push($srcUrl);
        else {
            if (isImageRendered($img.get(0))) {
                pass_img_src.push($srcUrl);
            }
            else {
                fail_img_src.push($srcUrl);
            }
        }
    });
    var fail_count = fail_img_src.length,
        pass_count = pass_img_src.length;
    return [img_src, fail_count, fail_img_src, pass_count, pass_img_src];
});