1

大家好，只是使用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' );
  });

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

4

1 回答 1

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事件处理程序来中止您不想加载的所有资源。它使用底层的onResourceRequestedPhantomJS 函数。

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

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

于 2015-03-24T20:09:01.857 回答