AJAX controls and Selenium Automation

Selenium AJAX

---

The objective of this article is to briefly discuss the common issues that one may face when trying to automate an AJAX control using Selenium Automation tool. Let us start with the definition of AJAX.
 
What is AJAX?

1. AJAX is about updating parts of a webpage, without having to reload the entire webpage.
   
2. AJAX stands for Asynchronous Javascript and XML. It is a technique for creating fast and dynamic webpages.
3. AJAX allows webpages to be updated asynchronously by exchanging small amounts of data with the server in the background.
4. Examples of applications using AJAX are - Google Search, Gmail, Google Maps, YouTube etc.

Scenario
Let us say that we have a webpage that contains a text field and a button. The initial value in the text field is "Old Value". Now as the user clicks the button, some AJAX magic will happen and the value in the text field will be updated from "Old Value" to "New Value" without reloading the webpage.

The question here is how do we go about testing such functionality?

An obvious approach would be:

1. Open the web page.
2. Click on the button &
3. Check for the updated value in the text field.

However if we try to automate this using Selenium, our test case will fail. What is the reason of failure?

What happens is that the asynchronous nature of AJAX means that the result did not reach from the server immediately but our but our Selenium test case checked for the updated result immediately and failed to fetch the new updated value.

How do we rectify such a problem?

The trick here is to wait for the result to come from the server. Selenium WebDriver supports two types of waits:

1. Explicit Waits &
2. Implicit Waits

This concludes our basic article.