Question - JavaScript driven anchor doesn't update page when clicked

[huddleeng]

Question - JavaScript driven anchor doesn't update page when clicked

[jamescryer]

Huddle also use CasperJS and PhantomCSS for testing an SPA. When testing asynchronous UI updates this CasperJS method is really handy.

http://docs.casperjs.org/en/latest/modules/casper.html#waitforselector

casper.waitForSelector('.tweet-row', function() {
phantomcss.screenshot('.tweet-row'');
});

If you don't care if the UI talks to the server or not, you could also use PhantomXHR to fake the ajax responses https://github.com/Huddle/PhantomXHR. This gives you more control over the UI and speeds up the tests. (Warning: if you use PhantomXHR you will have to setup fakes for ALL ajax calls)

For logging:
http://docs.casperjs.org/en/latest/events-filters.html#events-reference

casper.on("remote.alert", function(msg) {});
casper.on("remote.message", function(msg) {});

http://docs.casperjs.org/en/latest/modules/casper.html#evaluate is also useful for debugging.

[mattsnider]

Thanks, the logging events really helped. It turns out the problem was deep in our JavaScript event layer. We assumed all click events are preceded by a mousedown event, and ignore click events that aren't. However, when using CasperJS, as you might expect, it only fires the click event. I worked around this bit of nastiness, by writing a custom function that fires the mousedown event before the click event on a selector.