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?

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?

• javascript
• casperjs

Share Improve this question Follow edited Mar 19, 2015 at 23:13 Artjom B. 62k2626 gold badges135135 silver badges230230 bronze badges asked Mar 19, 2015 at 22:52 pilavdzicepilavdzice 95899 silver badges2727 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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();