嘿伙计们只是使用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' );
});
很想知道其他人是如何解决这个问题的,因为我确信这不是一个奇怪的用例(因为很多人在他们的网站上都有动态广告)。
答案 0 :(得分: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();
}
});
如果你的页面处理好卸载的资源,那么这应该是一个可行的选择。