如何获取在casperjs中动态创建的图像的img src？

Question

下面的代码获取站点中存在的所有图像，并检查图像是否已加载到casperjs中。 问题是我无法获得在运行时动态创建的图像。 我怎么做？。 任何帮助将不胜感激。

1）以下代码获取静态图像，而不是获取在运行时创建的图像。

var imagesArray = [];

function getImages() {
    var scripts = document.querySelectorAll('img[src]');
    return Array.prototype.map.call(scripts, function (e) {
        return e.getAttribute('src');
    });
};

casper.start(url, function () {
    imagesArray = this.evaluate(getImages);
    var self = this;
    imagesArray.forEach(function (item) {
        if (self.resourceExists(item)) {
            self.echo(item + ' loaded');
        } else {
            var message = item + ' not loaded';
            self.echo(message, 'ERROR');
        }
    });
});

casper.run(function() {this.test.renderResults(true);});

2）我也尝试使用waitForselector ，但它没有用。它说“等待超时发生，测试用例失败”。 请参阅下面的代码

var imagesArray = [];

function getImages() {
    var scripts = document.querySelectorAll('img[src]');
    return Array.prototype.map.call(scripts, function (e) {
        return e.getAttribute('src');
    });
};

casper.start(url);
casper.waitForSelector('.card-container', function() {
console.log("hi");
imagesArray = this.evaluate(getImages);
    var self = this;
    imagesArray.forEach(function (item) {
                if(self.resourceExists(item)) {
            self.echo(item + ' loaded');
        } else {
            var message = item + ' not loaded';
            self.echo(message, 'ERROR');
        }
    });
});


casper.run(function() {
    this.echo('Image loading test finished');
    this.exit();
});

Answer 1

你获取图像源的功能看起来很好 - 问题显然是它在页面被修改之前运行。 尝试识别页面是否被修改（尝试不同的选择器，如果允许脚本执行他们的工作，请检查Casper.options.pageSettings）。

casper.start(url);
casper.waitForSelector('.sticky-menu-active', function() {
    this.echo('...found selector ...try getting image srcs now...');
}, function() {
   this.echo('even after 10secs not found it - some scripts failed to execute on casperjs/phantomjs ?');
}, 10000);
casper.run(function() {
    this.echo('test finished');
    this.exit();
});

Answer 2

每个文件和waitFor 。 这可能会有所帮助（未经测试）：

var casper = require('casper').create();

var images = [];

casper.GetImages = function() {
    images = this.evaluate(function() {
        var scripts = document.querySelectorAll('img[src]');
            return Array.prototype.map.call(scripts, function (e) {
                return e.getAttribute('src');
        });
    });
    this.echo('** Successfully got the images... **');
    return true;
};

casper.start(url);

casper.then(function() {
    this.echo('** Getting the images... **');
    this.waitFor(function check() {
        return this.GetImages;
    });
    this.each(images, function(self, image) {
        this.echo('Item loaded: ' +  image);
    });
});

casper.run(function() {
    this.echo('** All done... **');
    this.exit();
});

Answer 3

您可以尝试在pageLoadFinsihed上执行此操作。 试试下面的代码（未经测试）

var imagesArray = [];

function getImages() {
    var scripts = document.querySelectorAll('img[src]');
    return Array.prototype.map.call(scripts, function (e) {
        return e.getAttribute('src');
    });
};

casper.start(url);
casper.on('load.finished', function () {
console.log("hi");
imagesArray = this.evaluate(getImages);
    var self = this;
    imagesArray.forEach(function (item) {
                if(self.resourceExists(item)) {
            self.echo(item + ' loaded');
        } else {
            var message = item + ' not loaded';
            self.echo(message, 'ERROR');
        }
    });
});


casper.run(function() {
    this.echo('Image loading test finished');
    this.exit();
});