PhantomJS, mouse click event not working on a particular web page
604 views
Skip to first unread message
Mandeep Gulati
Oct 19, 2015, 8:05:02 AM10/19/15
to phantomjs
I have written a PhantomJS script for a particular page and tested it. Now I am trying to replicate the same script to another website having a similar page but the results I am getting are quite different.
I am trying to click on a size of a product on this page and then click on the "Add to Cart" button. Here is my script for the same. Somehow, the size selection is not working.
Here is the code:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = {
width: "1280",
height: "800"
};
var inputElements = {
"url": "http://www.jabong.com/tom-tailor-Navy-Blue-Casual-Shirt-1167065.html",
"size": "M"
}
page.open(inputElements.url, function (status) {
page.render("1_product_page.png");
var point = page.evaluate(function (sizeToSelect){
var sizes = document.querySelector(".size-desktop").querySelectorAll('li.first.popover-options');
var filter = Array.prototype.filter;
var selected = filter.call(sizes, function(size){ return size.textContent == sizeToSelect });
if(selected && selected.length){
selected = selected[0];
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, selected);
selected.dispatchEvent(evt);
} else {
return { "error": "size not available" }
}
}, inputElements.size)
console.log(JSON.stringify(point));
if(point && point.error){
console.log(JSON.stringify(point, null, 4));
phantom.exit(1);
}
setTimeout(function (){
page.render("2_size_selected.png");
console.log("size selected");
page.evaluate(function (){
var buyButton = document.querySelector(".btn.btn-payment.add-to-cart")
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, buyButton);
buyButton.dispatchEvent(evt);
})
}, 2000);
setTimeout(function (){
page.render("3_buy_button_clicked.png");
phantom.exit(0);
}, 6000)
});
|
I have written a PhantomJS script for a particular page and tested it. Now I am trying to replicate the same script to another website having a similar page but the results I am getting are quite different. I am trying to click on a size of a product on this page and then click on the "Add to Cart" button. Here is my script for the same. Somehow, the size selection is not working. Here is the code: If I try to return |
Manuel Capinha
Oct 22, 2015, 11:40:09 AM10/22/15
to phantomjs
I'm having the same problem. I added some jQuery to check if the button was being clicked and it is indeed.
Looks like it just isn't submitting upon click.
Some example code that uses google.com:
page.open('http://www.google.com/', function (status) {
if (status !== 'success') {
console.log('Ooops .... unable to access the network!');
phantom.exit();
} else {
page.onLoadFinished = function(){
console.log("2nd jump finished");
page.render('google_2.png');
phantom.exit();
};
if(page.injectJs('jquery-1.11.3.min.js')){
console.log("Loaded jQuery");
} else {
console.log("Failed to load jQuery");
};
page.evaluate(function(){
document.querySelector('input[name=q]').value = '42';
$('input[type=submit]').on('click', function(){
console.log('Grabbed click');
});
var ev = document.createEvent("MouseEvent");
ev.initEvent("click", true, true);
document.querySelector('input[type=submit]').dispatchEvent(ev);
//document.querySelector('form').submit();
});
page.render('google_1.png');
}
});
Reply all
Reply to author
Forward
0 new messages