Why is PhantomJS showing an old version of Google Alerts?

Question

I've downloaded PhantomJS because I need to create Google Alert RSS feeds, and they do not provide an API.

I noticed that the rendered image of the accessed URL is old, therefore, not finding the elements of the page to perform the required actions, such as changing the "Deliver to" to be an "RSS"...

What's this? Bug? How come a website is different than accessing via browser?

My script:

var page = require('webpage').create(),
    isLoaded,
    controller,
    isSubmitted = false

page.open('https://www.google.com/alerts', function() {
  page.viewportSize = { width: 1920, height: 1080 }
  page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36'

  isLoaded = true
})

page.onLoadStarted = function() {
  log('Loading page...')
}

page.onLoadFinished = function(status) {
  log('Page has loaded.')

  if (status !== 'success') {
    log('The page has failed to load.')
    exit()
  } else {
    if (isSubmitted) {
      log('Submitted!')
      clear()
      exit()
    } else {
      controller = setInterval(function() {
        if (isLoaded) {
          isLoaded = false
          fillUpInputField('input', 'PhantomJS')
        } else {
          selectRSSOption()
        }
      }, 7000)
    }
  }
}

function exit() {
  phantom.exit()
}

function log(str) {
  console.log(str)
}

function render(name) {
  page.render(name + '.png')
}

function fillUpInputField(selector, query) {
  page.evaluate(function(selector) {
    document.querySelector(selector).focus()
  }, selector)
  page.sendEvent('keypress', query)

  render('fill_up_form.png')
  log('Rendered fill_up_form.png')
}

function selectRSSOption() {
  page.evaluate(function() {
    document.querySelector('.show_options').click()
  })

  render('show_options.png')
  log('Rendered show_options.png')
}

Answer 1

You need to spoof the browser useragent because by default Google treats PhantomJS as an older mobile browser (also because of the small default viewport). Try using a modern useragent of Firefox, Chrome, or Edge.

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

page.viewportSize = { width: 1280, height: 800 };
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36';