PhantomJS; click an element PhantomJS; click an element javascript javascript

PhantomJS; click an element


.click() is not standard. You need to create an event and dispatch it:

function click(el){    var ev = document.createEvent("MouseEvent");    ev.initMouseEvent(        "click",        true /* bubble */, true /* cancelable */,        window, null,        0, 0, 0, 0, /* coordinates */        false, false, false, false, /* modifier keys */        0 /*left*/, null    );    el.dispatchEvent(ev);}


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);    };  }}


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).