CasperJS screenshot is just a small part of the page

Question

The CasperJS documentation for captureSelector()nothing says how to set a screenshot size. By default (at least on my system using webkit, Windows 8), it seems like I need to take a small screenshot of the top left of the page.

Am I looking in the wrong place?

I have found viewportSize. I assume this is what I need, but does anyone have some code that can set this to a reasonable default value (e.g. 100%)?

FYI this.viewport('100%', '100%');just freezes, so I guess it doesn't accept %.

Do I need to enter code that will return the width and height of the window to the page and pass it back to extract it, or is there an easier way?

Answer 1

casper.captureSelector()should take a screenshot of the selected item. If you want to take a screenshot from the whole page, you need to use casper.capture().

Note that PhantomJS has a default viewportSize of 400x300. Some pages do not change correctly, so part of the page is not displayed. You will need to install this on your desktop:

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

There is no way to do this 100%. What you can do is read the width of the page body and set the viewport accordingly 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();