CODEWITHSUNDEEP
javascriptphantomjsautomated-testsrenderingheadless-browser
Allan Jiang
Allan Jiang

Reputation: 11351

PhantomJS doesn't render full page content

I am new to PhantomJS and playing with the most basic code: fetching a google page and capture the screenshot.

The URL I'm trying to fetch is: https://www.google.com/#tbm=lcl&q=starbucks

If you open it in a real browser, you will see it looks like this:

enter image description here

But my PhantomJS it sees this:

enter image description here

At first, I thought maybe the async web content loading is too slow, so I managed to wait for many seconds and then capture the screen, but I see PhantomJS still fail to get the content.

Here's my code snippet:

var page = require('webpage').create();
page.settings.userAgent = 'Mozilla/5.0 (X11; CrOS x86_64 8172.45.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.64 Safari/537.36';
page.viewportSize = { width: 1280, height: 800 };

page.open('https://www.google.com/#tbm=lcl&q=starbucks', function() {

  setTimeout(function(){
    page.render('screenshot_failed.png');
    phantom.exit();
  }, 5000);
});

Please point me what I may be missed when fetching this web page. Thanks!

Upvotes: 0

Views: 967

Answers (1)

quirimmo
quirimmo

Reputation: 9998

In addition to all the code you already have, try to force the page to the size you want to inside the open callback: 

var width = 1280;
var height = 800;
var webpage = require('webpage');

page.open('https://www.google.com/#tbm=lcl&q=starbucks', function(status) {
    page.evaluate(function(w, h) {
      document.body.style.width = w + "px";
      document.body.style.height = h + "px";
    }, width, height);
    page.clipRect = {top: 0, left: 0, width: width, height: height};                                                                                                                           
    page.render('screenshot_failed.png');
});

Upvotes: 1

Related Questions