Capturing a screenshot using phantomjs on an overlay page

Question

I am trying to capture a specific website div on a screenshot to facilitate the work I have to do. So far I'm using this code, which I found on the same site that kinda works :

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

page.open('http://www.example.org', function() {
  // being the actual size of the headless browser
  page.viewportSize = { width: 1440, height: 900 };

  var clipRect = page.evaluate(function(){
    return document.querySelector("div.example").getBoundingClientRect();
  });

  page.clipRect = {
    top:    clipRect.top,
    left:   clipRect.left,
    width:  clipRect.width,
    height: clipRect.height
  };

  page.render('google.png');
  phantom.exit();
});

This really works, but I have 2 problems:

1) The overlay is displayed on the first page, a pop-up window that appears in the screenshot. 2) Images are obviously loading because they need to be displayed (they only appear when scrolling on a web page).

So finally, I get something like this: problem

phantomjs, , . DIV , , , , .

!

Answer 1

, , , .

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

page.viewportSize = { width: 1440, height: 900 };

page.open('http://www.jovago.com', function() {

    // jQuery is used at the target site
    page.evaluate(function(){
        $("#overlay, #modal").remove();
    });

    // Simulate scrolling down
    page.scrollPosition = {
        top: 1400,
        left: 0
    };    

    var clipRect = page.evaluate(function(){
        return document.querySelector("div.top-destinations-homepage.promo-banners-box").getBoundingClientRect();
    });

    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };

    // Wait 10 seconds for images to download
    setTimeout(function(){
          page.render('jovago.png');
          phantom.exit();
    }, 10000);

});