幻影out /CasperJS-灰色广告图像

Question

嘿，伙计们，我们只是用咕噜-幻影插件来测试我们的页面(它本质上是PhantomJS &CasperJS的包装器)。

我们的网站上有一些动态的内容(用户的随机配置文件图像和随机广告)，因此在每次加载页面时，页面看起来都是不同的，这意味着构建失败。我们希望能够跳进并使用良好的ol‘DOM技术和“灰出”/使这些图像不透明，这样Casper/Phantom就不会看到它们并通过构建。

我们已经看过pageSettings.loadImages = false了，虽然技术上有效，但它也会删除每一张图像，这意味着即使是我们的非广告、非个人资料的图像也会被过滤掉。

下面是一个非常基本的示例测试脚本(不起作用)：

casper.start( 'http://our.url.here.com' )
  .then(function(){
    this.evaluate(function(){
      var profs = document.querySelectorAll('.profile');
      profs.forEach(function( val, i ){
        val.style.opacity = 0;
      });
    return;
    });
    phantomcss.screenshot( '.profiles-box', 'profiles' );
  });

我很想知道其他人是如何解决这个问题的，因为我相信这不是一个奇怪的用例(因为很多人在他们的网站上都有动态广告)。

Answer 1

你的剧本可能真的能用。问题是profs是NodeList。它没有forEach函数。用这个：

var profs = document.querySelectorAll('.profile');
Array.prototype.forEach.call(profs, function( val, i ){
    val.style.opacity = 0;
});

注册到page.error和remote.message来捕捉这些错误总是一个好主意。

另一个想法是使用resource.requested事件处理程序来中止您不希望加载的所有资源。它使用底层的onResourceRequested PhantomJS函数。

casper.on("resource.requested", function(requestData, networkRequest){
    if (requestData.url.indexOf("mydomain") === -1) {
        // abort all resources that are not on my domain
        networkRequest.abort();
    }
});

如果您的页面能够很好地处理卸载的资源，那么这应该是一个可行的选项。