Looping through element id's to generate screenshots with PhantomJS

Question

Not sure what I'm doing wrong. When running this in PhantomJS it just hangs with no response. It also doesn't show my console messages.

I have a website that has section blocks defined in div tags (templatemo_content). These div tags contain the same id. What I'm trying to accomplish is to loop through the website, located all of the templatemo_content div id's and generate screenshots of each templatemo_content div block.

var page = require('webpage').create();

page.open('myWebpage', function() {

page.onConsoleMessage = function (msg) { console.log(msg); };
  page.viewportSize = { width:1100, height:800 };
  console.log('open');

  window.setTimeout(function() { 
    var clipRects = page.evaluate(function(){
        return = document.querySelectorAll('#templatemo_content');//.getBoundingClientRect();
    });
    console.log('clipRect size = ' + clipRects.length);
    for(var i = 0; i < clipRects.length; ++i) {
        if (clipRects[i]) {
            console.log('element found');
            var clipRect = clipRects[i].getBoundingClientRect();
            page.clipRect = {
                top:    clipRect.top,
                left:   clipRect.left,
                width:  clipRect.width,
                height: clipRect.height
            };
            page.render('google.png');
        }
    }
    phantom.exit();
  }, 3000); // Change timeout as required to allow sufficient time   
});

Again this hangs with not logs from the console. If I remove the for loop and change querySelectorAll to querySelector then it works for one of the div tags.

Any help would be great.

A starting point would be understanding that querySelectorAll returns a NodeList (Not an Array). Convert the nodelist to array: http://stackoverflow.com/a/18129752/1670474. — dannypaz, Aug 06 '15 at 18:05
Also you are overwriting and rendering page.clipRect and page.render on every loop iteration, which may be the issue, too. — dannypaz, Aug 06 '15 at 18:06

Pontus Armini · Accepted Answer · 2016-09-13T08:53:04.310

Really late answer, but: The problem is that you were calling the getBoundingClientRect-method outside of page.evaluate. When out of that context — the rendered DOM — getBoundingClientRect will not return anything useful. The solution:

var clipRects = page.evaluate(function(){
    var rects = [];
    var elements = document.querySelectorAll('#templatemo_content')
    for (var i = 0; i < elements.length; ++i) {
       rects.push(elements[i].getBoundingClientRect());
    }
    return rects;
});

This will run getBoundingClientRect while still in the correct context, and it will return an array of DOMRect's that you'll be able to use. Perhaps something like this:

for(var i = 0; i < clipRects.length; ++i) {
   page.clipRect = clipRects[i];
   page.render('image' + i + '.png');
}

Looping through element id's to generate screenshots with PhantomJS

1 Answers1