How to find the height of the entire webpage?

I am working on a solution capturing screen-shots of websites. I am using the default example mentioned at slimerjs.org to get the job done.

Screen-shots are great with this tool, but I need to take full height screen-shots of websites. When capturing screens of websites like http://www.yellowpages.com, I can get full length screens without having to mention any height parameter.

But when I try this url: http://votingbecause.usatoday.com/

I only get screenshot of the set resolution (default: 1920x1080), I can't get full length images.

Since I am using slimerjs, I can manipulate the dom by using jQuery. I need to find complete website height so that I can take screenshot of that resolution

I tried

• document.height()
• document.body.scrollheight
• screen.height
• $(document).height()
• (and many other which i found)

But all of these only gave the height of the viewport (website in view)

Question is, how to find the full scrollable height of the website?

To be more general and find the height of any page you could just find the highest DOM Node on current page with a simple recursion:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

You can test it on your sample site(http://votingbecause.usatoday.com/) with pasting this script to a DevTools Console.

Enjoy!

P.S. Supports iframe content.