Watch the traffic - it can tell you a lot

There are many times as a tester when it is useful to see what is happening behind the scenes of the website. What requests, responses and errors are happening.

When interacting with a website there may be some logic happening in your browser (client side) and/or server. Information is flowing between the two. It’s this logic and information that’s so crucial to you as you test.

When you click on a link or perform an action the client (your browser) sends a request to the webserver, or does some client side logic (like a calculation).

Either way, actions that a user does are causing something to happen behind the scenes. Most users don’t care what happens as long as they get the result they need. Testers do care though.

As an example, here is a simple “log on" mapped out with specific actions.

  1. User: Opens a browser and navigates to the web site
  2. Browser: The browser client requests the log on page from the web server
  3. Server: The server receives the request and responds with the relevant web page.
  4. Browser: The browser receives the response and displays the page in the browser to the user
  5. User: The user fills in the required details (username and password) and hit’s the “log in" button
  6. Browser: The browser sends these log-in details to the server securely (like username, password, page requests)
  7. Server: The server receives the information, checks the credentials and sends a response.
  8. Browser: The client takes the command and does some stuff (like loading a page, throwing an error message etc)

This is a simple example for demonstration purposes. In more complex examples there could be browser side logic taking place too, or the server may be calling out to another web service somewhere too.

It makes sense then to look behind the scenes and understand how your application/site is working and what messages it is sending and receiving.

Mapping this information out will give you a great starting block to explore the system. You can build up a profile, which may include potential test ideas, weaknesses, strengths and potential gaps.

Some things of interest might be:
  • Is the data that is being sent and received correct?
  • Is the layout working as expected?
  • Are the response times satisfactory?
  • How do timeouts affect the user experience?
  • Are there any errors in the code?
  • What happens if I pass in X?
  • What happens if I remove X?
  • What happens if the message is lost completely?

How to watch the traffic
There are three core tools I see most seasoned Web Testers relying on. (Note, I use these three as examples, there are many more tools out there, which are just as powerful and capable)

Charles Proxy
Charles Proxy is a great tool for sniffing web requests (i.e. watching and potentially intercepting requests.)

You can check the content against standards or specs. You can also change the request to send invalid or different data.

One of the most useful features of Charles Proxy is the ability to “Throttle" the bandwidth of the traffic between the client (your browser) and the webserver. I discuss Throttling in a later post.

Fiddler
Despite a rather dubious name Fiddler is a must have tool for testers. In a sense it does the same sorts of actions as Charles Proxy but offers a rich interface and command line to get really technical with requests and responses.

Firebug
I use the Firefox browser a lot for web testing because of the vast array of extensions available. One of the must have day-to-day extensions is Firebug.

Firebug does loads of things but the main uses for me have been:

  • Observing the traffic taking place between client and server
  • Alerting me to code and message errors
  • Showing me the speeds at which the pages are loading
  • Inspecting elements on the web page for automation
  • Changing the CSS and seeing how it renders on the page

Useful Hint
There is another extension called Fire Cookie that extends Firebug’s capabilities to Cookie management.

Useful Links
Charles Proxy - http://www.charlesproxy.com/

Fiddler - http://fiddler2.com/fiddler2/

Firebug - http://getfirebug.com/

Firecookie - https://addons.mozilla.org/en-US/firefox/addon/firecookie/



If you’re interested in a career in Software Testing then check out my book Remaining Relevant And Employable (Tester’s Edition) - it’s packed full of ideas about writing good CVs, communicating your value to employers and doing well in an interview.