CasperJS screenshot is only a small part of page

Question

The CasperJS documentation for captureSelector() does not say anything about how to set the size of the screenshot. The default (at least on my system using webkit, Windows 8) seems to be to take a tiny screenshot of the top left portion of the page.

Am I looking in the wrong place?

I found viewportSize. I assume this is what I need, but does anyone have code that can set this to a sensible default (like 100%)?

FYI this.viewport('100%', '100%'); just hangs, so I assume it doesn't take %.

Do I have to inject code that will return the window width and height into the page and pass that back to extract it or is there an easier way?

Answer 1

casper.captureSelector() should take the screenshot of the element that you select. If you want to take a screenshot of the whole page you need to use casper.capture().

Note that PhantomJS has a default viewportSize of 400x300. Some pages don't resize correctly, so a part of the page is not visible. You will need to set this to something desktop-like:

var casper = require('casper').create({
    viewportSize: {width: 1280, height: 800}
});

There is no way to make it 100%. What you could do is read out the width of the body of the page and set the viewport accordingly through casper.viewport().

var width = 1280;
casper.start(url, function(){
    width = this.evaluate(function(){
        return document.body.clientWidth;
    });
}).viewport(width, 800).then(function(){
    this.capture("screenshot.png");
}).run();