CODEWITHSUNDEEP
phantomjscasperjs
Rahul Dagli
Rahul Dagli

Reputation: 4502

How to set viewport height auto in CasperJS

I would like to capture screenshot of multiple web page, each having varying heights. How can I set height dynamically based on the page height?

Something like this: casper.viewport(1200, 'auto');

Upvotes: 1

Views: 2059

Answers (1)

Vaviloff
Vaviloff

Reputation: 16856

By default PhantomjS browser (which is used by CasperJS) renders full height of the page automatically. In CasperJS the corresponding method is

casper.capture()

To set the horizontal width of the page, set viewport size:

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

This setting will only affect the width of the screenshot, the height will be as big as necessary to render the whole page.

Example: 

var casper = require('casper').create({   
    verbose: true, 
    logLevel: 'debug',
    pageSettings: {
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
    }
});
casper.options.viewportSize = {width: 1280, height: 1024};

casper.start("http://stackoverflow.com/questions/tagged/phantomjs");
casper.then(function() {
    casper.capture("stackoverflow.png");
});

casper.run();

The resulting image (439 kb) is 3448 pixels high which is way more than 1024 pixels set in options.

Upvotes: 3

Related Questions