AJAX is an advance communication technique used by Web applications to exchange the data from the server without affecting the state of the currently opened web page. It saves the reloading of the page on the client-side and cuts down the number of requests on the server making it respond faster. Because of these apparent advantages, many websites use AJAX calls to improve their user experience. But using the AJAX controls poses a challenge for the Selenium Webdriver as it gets only a fraction of seconds to act on the changes made by the AJAX calls. Hence, in this blog post, we’ll share some of the best techniques to handle AJAX calls in Selenium Webdriver. If you wish to know more about the AJAX tests, then please read from here. You’ll get to learn the following topics from this article.
- What is AJAX and how does it work?
- How to Handle AJAX calls using Selenium Webdriver?
- Sample Code for Handling AJAX calls in Selenium Webdriver.
Some of the points which can be helpful in the testing of AJAX applications are as follows.
- When a browser makes an AJAX call, it may not result in a page navigation. So you need to be careful what part of the page is getting changed by the server response.
- AJAX calls are asynchronous and don’t block the execution. So, the user can still use the application till the server process his request. For a tester, it would mean that he can’t estimate the actual time the server would take to deliver the response.
You would now have an idea of the hurdles that a tester could face while automating a web page that makes AJAX calls. The main issue is how to handle the AJAX call when you are not sure of the loading time of the webpage. Sometimes the change would be so sudden that it would disappear in a flash. In this situation, you’ve to devise a strategy which should be dynamic and perceptive.
So, let’s discuss the options that we can deploy to handle AJAX calls in Selenium webdriver.
<Thread.sleep()> is an obvious choice for handling AJAX calls. But it may not give you the best result. Instead, a test could break intermittently if the server response time exceeds the time specified in sleep. Additionally, the test has to wait for the given time even in a situation of the timely response. Though keeping all the odds aside, this method does work, and we’ve tested it as working.
This method is only useful if the web application has jQuery in use to handle AJAX calls. Since jQuery uses a mechanism which keeps the no. of active AJAX calls in check, we can utilize this information to find out their final status.
Here is a sample code to showcase the handling of AJAX controls using Selenium Webdriver. You can integrate it in your test execution class.
An implicit wait is a Webdriver mechanism to query the DOM for a specified time duration to locate an element or a set of elements till they become available. The default timeout value is 0.
Once you define it, the implicit wait is available for the lifetime of the Webdriver instance.
WebDriver browser = new FirefoxDriver(); browser.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS); browser.get("http://www.techbeamers.com/"); WebElement ajaxControl = browser.findElement(By.id("DummyElement"));
It is yet another Webdriver’s built-in feature to handle AJAX calls. Just like the <Thread.sleep()>, you can get it working when no other tricks other work.
WebDriver browser = new FirefoxDriver(); browser.get("http://www.techbeamers.com/"); WebElement ajaxControl = (new WebDriverWait(browser, 15)) .until(ExpectedConditions.presenceOfElementLocated(By .id("DummyElement")));
It’s an implementation of the Webdriver’s Wait interface which brings both the timeout and polling interval to use. The Fluent wait makes use of the timeout to wait for a condition, also the frequency for the no. of attempts.
Its example you can see in the last section where we’ve demonstrated the combined use of <FluentWait> and the <WebdriverWait>.
It is one of the best Webdriver strategies to handle the AJAX controls. It allows you to implant a condition to check at regular intervals and break to next step as soon as the condition get fulfilled.
Apart from the <WebdriverWait>, we also use the <ExpectedCondition> to get the entire mechanism in place. We’ve covered the detailed example in the next section.
So far, you’ve seen six different strategies to work with the AJAX controls using Selenium Webdriver. In most of these methods, we’ve used various types of waits to handle the AJAX calls.
Now, we’ll give you a fully working demo of using the <FluentWait> and <WebdriverWait> for handling the AJAX controls.
We’ve used a w3schools.com‘s demo website for testing the automation of AJAX calls.
AJAX Call Test Case Scenario.
Demo site used:
We’ve used the following demo URL for our testing which is using the AJAX calls.
Test Case Description:
- Open the demo AJAX application demo website.
- Following AJAX controls would appear in an IFRAME.
- A demo paragraph element which contains some default text.
- A simple button control to make the AJAX calls.
- When you click the button control, the AJAX call takes place.
- The default text disappears from the screen.
- Two new paragraphs get displayed on the screen.
- You now need to validate the two conditions.
- The new text in the first paragraph shouldn’t match the default text.
- The text in the second paragraph should match the expected value.
Note: We’ll read the default text from the demo paragraph as it would appear first on the screen. For the second paragraph, we’ve hard wired the value in the sample code which we copied from the demo test site.
Now, you’ll see the sample source code below. It should be self-explanatory as we’ve added comments for each step.
If you wish to test the sample program then, add the above Java code to a TestNG project in Eclipse. Whenever you’ll run this program, it’ll execute successfully and produce the following report.
If you are reading this post and would like to appreciate our work or ask questions then, you are most welcome to share. If you knew an alternative technique for handling the AJAX calls then, we would love to hear it from you.
Please use the comment box and send us your views.
All the very Best,