.click() not working in mocha-phantomjs on certain elements

Question

I am writing some tests using the Mocha test framework and Chai assertions library I've been testing these in a chrome browser and they work fine, but then I try them in the headless browser mocha-phantomjs and the .click() events I am sending on certain elements just dont seem to be firing, while others are working.

The test successfully logs in to the website, which is done using:

$("#login").click()

"#login" is a form submit button and it works fine using click this way.

Next I want to click on a menu item which is an anchor element.

$("#menuItemToClick").click();

This is where it stops working in mocha-phantomjs even though this works fine within chrome.

So obviously the .click() function is defined and working but not for this element.

I've exhausted my google-foo. Here are some of the other things I have seen others mention and tried:

Use javascript dispatchEvent

var evObj = new CustomEvent('click');
evObj.initEvent('click', true, false);
document.getElementById('menuItemToClick').dispatchEvent(evObj);

This does fire the click event and takes the browser to the right url but it also causes the whole page to reload, in both chrome and mocha-phantomjs, which restarts the tests from the beginning putting them in a infinite loop... Is there a way to use this without it causing a page reload?

Use phantomjs' page.sendEvent()

var elementPosition = $("#menuItemToClick").offset();
page.sendEvent('click', elementPosition.left + 1, elementPosition.top + 1);

This is supposed to send a native click event if you pass it the correct co-ordinates of the element. I tried to get this to work but I couldn't seem to access the page from within the mocha tests that are running. Is there a way to access the phantomjs page variable from within the mocha-phantomjs tests?

Any help is greatly appreciated!

Any idea why jquery trigger was failing? I'm seeing the same thing where the first trigger works but the rest fail. Is it phantomJs itself or mocha-phantomjs? — Kris Erickson
@torazaburo this is a different problem/question. .click() is defined for the jQuery selected element but is not working properly on all elements (works for some but not others). Although the question you reference, which you have top voted answer for, has a similar resolution it's not a duplicate. — Dsyko

Dsyko Dsyko · Accepted Answer · 2013-05-29T00:48:27

I went back and played with this for a while more and finally got the dispatchEvent to work without resetting the page and it works in both chrome and mocha-phantomjs! I think the page reset/reload had something to do with the event not being a mouse event specifically.

I placed a convenience function at the top of my tests:

var clickElement = function (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);
};

and can now click my anchor element:

clickElement($("#menuItemToClick")[0]);

.click() not working in mocha-phantomjs on certain elements

Use javascript dispatchEvent

Use phantomjs' page.sendEvent()

1 Answers