Testing Ajax Applications With Selenium

On a rails application I was building last year, we had chosen to use prototype for some ajax features. We were using selenium to test the application. Previously it was common that any time we interacted with the page via a click, or a select, we'd follow it up with a wait_for_page_to_load command. This would ensure that selenium (or rather the driver we were using), would only send the next command to selenium once the page we were interested in was completely loaded.

On an Ajax application (or on an Ajax feature of a web site), this never happens. Small sections of the page might update. It's still necessary to wait until this process is complete before interacting with sections of the page where content or controls are yet to be rendered. A simple sleep or wait is a bad idea. These ajax calls rarely take exactly the same time to perform an operation every time. If the wait period is too short, you'll have random test failures since a control you want to interact with is missing. If the period is too long, your tests take too long since you end up waiting, very often, far longer than you need to.

The recommended approach is to use one of the selenium wait_for's. There's a wait_for_element_present I believe, which for some reason I cannot find in the rc driver at the moment. Anyway, that function waits till a particular element shows up on the page. The other option is wait_for_condition, which takes a javascript function and waits till it evaluates as true. See here.

The annoying thing about this approach though, was that there's a big advantage in having a generic "wait_for" statement that can be used anywhere, that just waits till any Ajax calls are done. You could write custom wait_fors each time that are relevant to the particular test you are writing. But I see a generic solution being useful in a variety of conditions. For example

• you have a certain element where all that changes is content. This allows you to differentiate between a failure because a call was not completed and a failure because of an actual bug.
• you have certain wizard style flows which you have to navigate through in multiple tests and you'd rather not worry about exactly what must have changed after every step.
• You fire multiple ajax calls on some interaction and you need to wait for all of them to complete ideally.

Since we were using prototype for our javascript and wait_for_condition accepted a javascript snippet, it made sense to see if we could use this to our advantage. Digging around in the selenium source code we discovered that selenium.browserbot.getCurrentWindow() gave you access to the test window and all the globals. Further it turned out that prototype actually has a global variable under the Ajax namespace activeRequestCount. So all we had to do was wait for the condition that this variable was zero. This solution worked beautifully.
wait_for_condition("selenium.browserbot.getCurrentWindow().Ajax.activeRequestCount == 0",timeout)

There's another solution that I know of. Twist apparently supports a proxy injection mode, where all your requests are routed through a proxy. This is interrogated by the test runner which is now always aware that whenever there is an active request, ajax or otherwise. This allows implicit waits. This is probably the cleanest solution that I know about. I've never actually used it though and so if you aren't using twist, if proxy injection mode isn't possible for some technical reason, or if this is likely to make the tests slower then the previous solution is a better idea.

In a follow up post Ill actually use an example and demonstrate how to use this wait_for_condition to write a generic ajax wait with prototype or jquery or even a custom rolled javascript framework.

Thanks to Reggino, this is the required piece of code for Jquery

`selenium.browserbot.getUserWindow().$.active == 0`