PhantomJS; click an element

Question

How do I click an element in PhantomJS?

page.evaluate(function() {
    document.getElementById(\'idButtonSpan\').click();  
});

This gives

Answer 1

With 1.9.2 this worked for me, click handlers were triggered:

var a = page.evaluate(function() {
    return document.querySelector('a.open');
});

page.sendEvent('click', a.offsetLeft, a.offsetTop);

Answer 2

Alternatively to @torazaburo's response, you could stub HTMLElement.prototype.click when running in PhantomJS. For example, we use PhantomJS + QUnit to run our tests and in our qunit-config.js we have something like this:

if (window._phantom) {
  // Patch since PhantomJS does not implement click() on HTMLElement. In some 
  // cases we need to execute the native click on an element. However, jQuery's 
  // $.fn.click() does not dispatch to the native function on <a> elements, so we
  // can't use it in our implementations: $el[0].click() to correctly dispatch.
  if (!HTMLElement.prototype.click) {
    HTMLElement.prototype.click = function() {
      var ev = document.createEvent('MouseEvent');
      ev.initMouseEvent(
          'click',
          /*bubble*/true, /*cancelable*/true,
          window, null,
          0, 0, 0, 0, /*coordinates*/
          false, false, false, false, /*modifier keys*/
          0/*button=left*/, null
      );
      this.dispatchEvent(ev);
    };
  }
}

Answer 3

Document.querySelector(element).click() works when using Phantomjs 2.0

click: function (selector, options, callback) {
    var self = this;
    var deferred = Q.defer();
    options = options || {timeout:1000}; 
    setTimeout(function () { 
        self.page.evaluate(function(targetSelector) {
            $(document).ready(function() {
                document.querySelector(targetSelector).click();
            }) ;
        }, function () {
                deferred.resolve();
        }, selector);
    }, options.timeout);
    return deferred.promise.nodeify(callback);
},

Answer 4

The easiest way is using jQuery.

page.evaluate(function() {
  page.includeJs("your_jquery_file.js", function() {
    page.evaluate(function() {
      $('button[data-control-name="see_more"]').click();
    });
  });
});

Answer 5

It's not pretty, but I've been using this to allow me to use jQuery for the selection:

var rect = page.evaluate(function() {
    return $('a.whatever')[0].getBoundingClientRect();
});
page.sendEvent('click', rect.left + rect.width / 2, rect.top + rect.height / 2);

but you can always replace $(s)[0] with document.querySelector(s) if not using jQuery.

(It does rely on the element being in view mind, i.e. your viewportSize.height is big enough).

Answer 6

I never was able to directly click the element. Instead, I looked at the html to find what function was called with onclick, and then called that function.