PhantomCSS/CasperJS - 将广告图片变灰

Question

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

我们网站上有一些动态出现的东西（用户的随机个人资料图片和随机广告）所以从技术上讲，每次我们加载页面时页面看起来都不一样，这意味着构建失败。我们希望能够使用好的 ol' DOM API 技术和 'grey out'/使这些图像不透明，以便 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 and remote.message 以捕获这些错误总是一个好主意。

另一个想法是使用 resource.requested event handler to abort all the resources that you don't want loaded. It uses the underlying 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();
    }
});

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

PhantomCSS/CasperJS - 将广告图片变灰

PhantomCSS/CasperJS - Greying out advertisement images

javascript

gruntjs

phantomjs

casperjs

phantomcss