PhantomCSS / CasperJS - 灰显广告图像

时间:2015-03-24 19:25:35

标签: javascript gruntjs phantomjs casperjs phantomcss

嘿伙计们只是使用grunt-phantomcss插件测试我们的页面(它本质上是PhantomJS和CasperJS的包装器)。

我们的网站上有一些动态的内容(用户和随机广告的随机配置文件图片)因此从技术上讲,每次加载时页面看起来都不同,这意味着构建失败。我们希望能够进入并使用好的ol' DOM API技术和'灰色' /使这些图像不透明,这样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' );
  });

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

1 个答案:

答案 0 :(得分:1)

您的脚本可能确实有效。问题是profs是NodeList。它没有forEach功能。使用此:

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

注册page.errorremote.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();
    }
});

如果你的页面处理好卸载的资源,那么这应该是一个可行的选择。