Acceptance testing focused on outgoing http requests

Question

This may seem like an odd question to ask, because I haven't seen any online discussions or tutorials, so I assume people aren't typically doing this — but are there any good options for automated acceptance testing when the acceptance criteria are specific network requests sent by a web application as a result of specific user interactions? As the most simple example, the user clicks a button, and the javascript code on the page sends an ajax request. The QA team wants to be certain that the request is indeed sent, and that it has specific parameters. Now, one typical solution would be to disregard the network requests entirely and instead to check for the interface changes resulting from such a request, but what if the request does not produce immediate interface changes? Another typical approach is to move such testing to the unit-test or integration-test level — but what if QA would rather see it work in the real browser.

So what would be the options for writing automated acceptance tests that start with some user interaction in the browser and then assert that an expected network request has been sent? What tooling will one need for such kind of testing (as far as I understand, Selenium can’t do this on its own)? Do you know of any available examples of such kind of testing (open-source projects that have implemented it, tutorials describing how to do it, etc.), or could you perhaps offer a detailed example?

Answer 1

It sounds like what you want to do is mock out Ajax calls from your front end application in your tests. This is pretty easy to do these days with libraries like Sinon, Angular's httpBackend, or jQuery Mockjax (a library I maintain).

You can read about the topic a bit more in a blog post I wrote a while back, but the basic idea is to intercept the Ajax request before it hits the core JavaScript XMLHttpRequest interface (thus sending the network request). In your JS tests you can then inspect the interceptor to see whether or not a network request was made, and what was given to it.

Without knowing your tech stack (JS framework, testing framework, etc) it's hard to say exactly how you would set this up, but take a look at the tools referenced above.