I'm using Node + PhantomJS-Node to do some dynamic website crawling. The first page is opened, a link is obtained and then a second page is opened. On the second page there is a button that initiates a search which I'm having trouble clicking.
Initially I tried using jQuery.click() on the button element but when the screenshot was taken it didn't seem to have been clicked as the image on the page was not updated. I followed the solution here which is what I have implemented below but the screenshot outputted from the code below suggests that the button was not clicked.
phantom.create(function (ph) {
ph.createPage(function (page) {
page.open("www.mysamplepage.com", function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
page.evaluate(function () {
return $('div.Div5 a').attr('href');
}, function (link) {
page.open(link, function(status) {
page.evaluate(function() {
var element = document.getElementById('mybutton');
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
);
element.dispatchEvent(ev);
}, function() {
setTimeout(function() {
console.log('status = ' + status);
page.render('page.png');
ph.exit();
}, 30000);
});
});
});
});
});
});
});
I'm not sure if it's related but when I executed the code that programmatically clicks the button in a Chrome browser, it's only fired once and subsequent execution of the code isn't fired.
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
);
document.getElementById('btnAddressSearch').dispatchEvent(ev); // Executed
document.getElementById('btnAddressSearch').dispatchEvent(ev); // Not executed
document.getElementById('btnAddressSearch').dispatchEvent(ev); // Not executed
