Selenium Webdriver: HTML renders differently for Firefox vs. PhantomJS

Question

I am using Selenium Webdriver in Node JS to do a Google search. When I set the browser as Firefox on my local machine, the Google results page renders as expected; it's the same as I see when I do the Google search as a human.

Now, I'm trying to do the same on my Heroku server. I can't seem to get Firefox on the server, so I'm using PhantomJS. It successfully does the Google search, but some data is missing from the page (I presume it is added later by Javascript).

How can I make the PhantomJS results page look the same as Firefox? Can I make PhantomJS appear to be Firefox?

var driver = new webdriver.Builder().forBrowser('phantomjs').build();

driver.get('http://www.google.com/ncr');
driver.findElement(By.name('q')).sendKeys('empire boston');
driver.findElement(By.name('btnG')).click();
driver.wait(until.titleIs('empire boston - Google Search'), 10000);

driver.getTitle().then(function(title) {
    console.log('Page title is: ' + title);
});

driver.getPageSource().then(function(html) {
    console.log("HTML: " + html);
});

Answer 1

One quick win is to equalise your window dimensions, as PhantomJS seems to prefer a tall strip rather than a decent rectangle by default.

PhantomJS uses WebKit for rendering, while Firefox uses Gecko, so there's an inevitable possibility of slight differences.

Different PhantomJS versions are also built against different WebKit versions. Apparently PhantomJS 2.x uses WebKit 538.x, which makes it equivalent to Safari 7 or 8. By contrast, my current PhantomJS 1.9.8 uses WebKit 534.34, which is equivalent to Safari 5.

Google determines Safari 5 to be an "old" browser and will therefore potentially render its search pages differently. (I don't think it's likely that JavaScript has failed to run - not unless you've explicitly disabled it.)

So upgrading to PhantomJS 2.x would doubtless reduce rendering differences vs. Firefox.