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