PhantomCSS not working with this website

Question

I'm trying to make this test work but it seems PhantomCSS can't take a screenshot of this particular website.

/*
Require and initialise PhantomCSS module
Paths are relative to CasperJs directory
*/;
var phantomcss = require('./phantomcss.js');

casper.test.begin('Test', 5, function(test) {

phantomcss.init({
    screenshotRoot: './screenshots',
    failedComparisonsRoot: './screenshots',
    libraryRoot: '.',
});

casper.on("resource.error", function(msg, trace) {
    this.echo("[Resource Error]");
    this.echo("resource Error: " + dump(msg), "ERROR");
    this.echo("[/Resource Error]");
});
casper.on("page.error", function(msg, trace) {
    this.echo("[page.error]");
    this.echo("Page Error: " + msg, "ERROR");
    this.echo("[/page.error]");
});
casper.on("remote.message", function(msg, trace) {
    this.echo("[remote.message]");
    this.echo("Remote Message: " + msg, "ERROR");
    this.echo("[/remote.message]");
});
casper.on("casper.page.onResourceTimeout", function(msg, trace) {
    this.echo("[casper.page.onResourceTimeout]");
    this.echo("casper.page.onResourceTimeout: " + msg, "ERROR");
    this.echo("[/casper.page.onResourceTimeout]");
});

/*
    The test scenario
*/
casper.start();

casper.userAgent('Mozilla/5.0 (Windows NT 6.3; rv:36.0) Gecko/20100101 Firefox/36.0');

casper.open('http://www.publicmobile.ca');

casper.viewport(1024, 768);

casper.then(function(){
    phantomcss.screenshot('body', 'public');
});

casper.then( function now_check_the_screenshots(){
    // compare screenshots
    phantomcss.compareAll();
});

/*
Casper runs tests
*/
casper.run(function(){
    console.log('\nTHE END.');
    // phantomcss.getExitStatus() // pass or fail?
    casper.test.done();
});
});

function dump(obj) {
    var out = '';
    for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
    }

    return out;
}

I get these error message :

[Resource Error]
resource Error: errorCode: 203
errorString: Error downloading http://www.googletagmanager.com/gtm.js?id=GTM-P4G685 - server replied: Not Found
id: 6
url: http://www.googletagmanager.com/gtm.js?id=GTM-P4G685
[/Resource Error]

[remote.message]
Remote Message: navigating to state: no-region from 
[/remote.message]
[remote.message]
Remote Message: navigating to state: site.home from no-region
[/remote.message]

This very same test works fine on other websites.

Thanks for help !

Answer 1

The problem was the first root div I'm my case <div ui-view="" class="wrapper ng-scope"> has a height of 0px. So the screenshot has a height of 0px and the image is not stored.

So I had a bit of javascript to fix that

casper.then(function(){
    casper.page.injectJs("/home/guillaume/Workspace/gozer/vendor/jquery-1.8.3.min.js");
    casper.evaluate(function() {
        return $('.wrapper').css("height", 3000);
    });
});