How do I click an element in PhantomJS?
page.evaluate(function() {
document.getElementById('idButtonSpan').click();
});
This gives me an error "undefined is not a function..."
If I instead
return document.getElementById('idButtonSpan');
and then print it,
then it prints [object object], so the element does exist.
The element acts as a button, but it's actually just a span element, not a submit input.
I was able to get this button click to work with Casper, but Casper had other limitations so I'm back to PhantomJS.
.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).
Hope the following method will be useful. It worked for me in version 1.9
page.evaluate(function(){
var a = document.getElementById("spr-sign-in-btn-standard");
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
waitforload = true;
});
This worked for me. Hope this will be useful for others also
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);
use simple JavaScript with evaluate
, something like this:
page.evaluate(function() {
document.getElementById('yourId').click();
});
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.
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);
},
Double clicks are also possible with PhantomJS.
This is adapted from the answer of stovroz and triggers a native dblclick
including the mousedown
, mouseup
and click
events (two of each).
var rect = page.evaluate(function(selector){
return document.querySelector(selector).getBoundingClientRect();
}, selector);
page.sendEvent('doubleclick', rect.left + rect.width / 2, rect.top + rect.height / 2);
The following two ways only trigger the dblclick
event, but not the other events that should precede it.
Adapted from this answer of torazaburo:
page.evaluate(function(selector){
var el = document.querySelector(sel);
var ev = document.createEvent("MouseEvent");
ev.initMouseEvent(
'dblclick',
true /* bubble */, true /* cancelable */,
window, null,
0, 0, 0, 0, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/, null
);
el.dispatchEvent(ev);
}, selector);
Adapted from this answer of Jobins John:
page.evaluate(function(selector){
var el = document.querySelector(sel);
var e = document.createEvent('MouseEvents');
e.initMouseEvent('dblclick', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(e);
}, selector);
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();
});
});
});
For those using JQuery, the JQuery UI created a utility to simulate these: jquery-simulate. I use this in PhantomJS and Chrome
$ele..simulate( "click" );
©2020 All rights reserved.