Waiting for AJAX

Test automation was simpler in the good old days, before asynchronous page loading became mainstream. Previously, the test would click on a button causing the whole page to reload; after the new page loaded, we could check whether any errors were displayed. The act of waiting for the page to load guaranteed that all of the items on the page are already there, and our test could fail with confidence if the expected element was missing. Now, an element might be missing for several seconds, and magically show up after an unspecified delay. The only thing for a test to do is become smarter!

Filling out credit card information is a common test for any online store. Similarly, we set up a simple credit card purchase form that looks like this:

Our form has some default values for users to fill out and a quick JavaScript check to see whether the required information was entered into the field (by adding a quick Done text):

Once all of the fields have been filled out and seem correct...