How to send a click event to a div or button with PhantomJS (1.9.8)?

Question

I don't understand how to close a modal or an element with PhanthomJS using sendEvent().

For example I tried to do it using the code below or using CaperJS click and clickLabel and many others things but it's not working.

var webpage = require('webpage').create();
var url  = 'http://sourceforge.net/';
webpage.viewportSize = { width: 1280, height: 800 };
webpage.render("test1.png");

webpage.onLoadFinished = function(status) {
    var coords = webpage.evaluate(function() {
        var firstLink = document.querySelector('a.btn');
        return {
            x: firstLink.offsetLeft,
            y: firstLink.offsetTop
        };
    });
    console.log(coords.x);
    console.log(coords.y);
    webpage.sendEvent('mousedown', coords.x, coords.y ,'left');
};


webpage.open(url,function(){
    webpage.render("test2.png");
    phantom.exit()
});

Here is the element I would like to skip.

Answer 1

The offsetLeft and offsetTop only give the offset based on a parent element. You would have to sum all the element offsets up to the root node. That's at least what CasperJS does.

If this notice is static, you can determine the coordinates once and use them every time. Based on the screenshot (444,330) seems good as a replacement for coords.x, coords.y.

You can also simply use a synthentic mouse click as described here which is what CasperJS does, but in combination with a specific position. This is a plain synthetic click:

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

---

Also, you have two callbacks (onLoadFinished and function in webpage.open) for when the page is loaded. You should have only one, so you don't run into problems when when one of them is called. After you click, it's best to wait a little with setTimeout and let the page change before taking the screenshot.