grunt-phantomcssプラグイン (基本的には PhantomJS と CasperJS のラッパー)を使用してページをテストしているところです。
私たちのサイトには動的に入ってくるものがいくつかあります (ユーザーのランダムなプロファイル画像とランダムな広告) 技術的には、ページを読み込むたびに見た目が異なります。つまり、ビルドが失敗します。Casper/Phantom がそれらを認識せずにビルドに合格するように、古き良き DOM API 手法に飛び込んで使用し、これらの画像を「グレー表示」/不透明にすることができるようにしたいと考えています。
すでに見てきました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' );
});
他の人がこれをどのように解決したか知りたいです。なぜなら、これは奇妙な使用例ではないと確信しているからです (非常に多くの人が自分のサイトに動的広告を持っているため)。