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

[mattsnider]

The page I'm am trying to test with PhantomCSS updates its content via AJAX on a mouse down event when certain links are clicked. I have a selector that gets the link I want to click on (I have verified this by using this.echo(this.getHTML(selector, true))), and I use this.click(selector) to click on it. Nothing changes when I take my next screenshot... so I tried to wait for 20 seconds to see if something happens, and still no change in the screenshot.

Is testing a single-page, ajax-driven application feasible using PhantomCSS? If so, where is a good place to look to debug why nothing is happening?

I haven't yet figured out how to get the console statements from the pages JavaScript to print out.

[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.