PhantomCSS/CasperJS - 使广告图像变灰答案

【问题标题】：PhantomCSS/CasperJS - Greying out advertisement imagesPhantomCSS/CasperJS - 使广告图像变灰
【发布时间】：2015-05-28 06:25:49
【问题描述】：

大家好，只是使用 grunt-phantomcss 插件（它本质上是 PhantomJS 和 CasperJS 的包装器）测试我们的页面。

我们的网站上有一些动态进入的内容（用户的随机个人资料图片和随机广告），因此从技术上讲，每次加载页面时页面看起来都不同，这意味着构建失败。我们希望能够加入并使用良好的 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' );
  });

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

【问题讨论】：

标签： javascript gruntjs phantomjs casperjs phantomcss

【解决方案1】：

您的脚本可能确实有效。问题是profs 是一个NodeList。它没有forEach 函数。使用这个：

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

另一个想法是使用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();
    }
});

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

【讨论】：