PhantomCSS/CasperJS - Greying out advertisement images

Question

Hey guys just testing our pages out using the grunt-phantomcss plugin (it's essentially a wrapper for PhantomJS & CasperJS).

We have some stuff on our sites that comes in dynamically (random profile images for users and random advertisements) sooo technically the page looks different each time we load it, meaning the build fails. We would like to be able to jump in and using good ol' DOM API techniques and 'grey out'/make opaque these images so that Casper/Phantom doesn't see them and passes the build.

We've already looked at pageSettings.loadImages = false and although that technically works, it also takes out every image meaning that even our non-ad, non-profile images get filtered out.

Here's a very basic sample test script (doesn't work):

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' );
  });

Would love to know how other people have solved this because I am sure this isn't a strange use-case (as so many people have dynamic ads on their sites).

Artjom B. Artjom B. · Accepted Answer · 2015-03-24T20:09:01

Your script might actually work. The problem is that profs is a NodeList. It doesn't have a forEach function. Use this:

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

It is always a good idea to register to page.error and remote.message to catch those errors.

Another idea would be to employ the resource.requested event handler to abort all the resources that you don't want loaded. It uses the underlying onResourceRequested PhantomJS function.

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

If your page handles unloaded resources well, then this should be a viable option.

PhantomCSS/CasperJS - Greying out advertisement images

1 Answers