0

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 !

MissJane
  • 1
  • 2
  • Please register to the [`resource.error`](http://docs.casperjs.org/en/latest/events-filters.html#resource-error), [`page.error`](http://docs.casperjs.org/en/latest/events-filters.html#page-error), [`remote.message`](http://docs.casperjs.org/en/latest/events-filters.html#remote-message) and [`casper.page.onResourceTimeout`](http://phantomjs.org/api/webpage/handler/on-resource-timeout.html) events. Maybe there are errors. – Artjom B. Feb 12 '15 at 14:40
  • I get these error messages : [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] – MissJane Feb 13 '15 at 13:24
  • Please add the errors to your question. The comments are not a good place for them. – Artjom B. Feb 13 '15 at 14:17

1 Answers1

0

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);
    });
});
MissJane
  • 1
  • 2