Working with Ajax controls using Webdriver

AJAX stands for Asynchronous JavaScript and AJAX allows the Web page to retrieve small amounts of data from the server without reloading the entire page. In AJAX driven web applications, data is retrieved from server without refreshing the page.

When we perform any action on Ajax controls, using Wait commands will not work as the page is not actually refreshed here. Pausing the test execution using threads for a certain period of time is also not a good approach as web element might appear later or earlier than the stipulated period of time depending on the system’s responsiveness, load or other uncontrolled factors of the moment, leads to test failures.

The best approach would be to wait for the required element in a dynamic period and then continue the test execution as soon as the element is found/visible.

This can done achieved with WebDriverWait in combination with ExpectedCondition , the best way to wait for an element dynamically, checking for the condition every second and continuing to the next command in the script as soon as the condition is met.

There are many methods which are available to use with wait.until(ExpectedConditions.anyCondition); The below is the image for the number of methods which are available.

The below are the few which we use regularly when testing an application :-

Syntax:

WebDriverWait wait = new WebDriverWait(driver, waitTime);
wait.until(ExpectedConditions.presenceOfElementLocated(locator));

The above statement will check for the element presence on the DOM of a page. This does not necessarily mean that the element is visible.

Syntax:

WebDriverWait wait = new WebDriverWait(driver, waitTime);
wait.until(ExpectedConditions.visibilityOfElementLocated(locator));

The above syntax will for the element present in the DOM of a page is visible.

Some times we may also need to check if the element is invisible or not. To do this we need use the below :

Syntax:

WebDriverWait wait = new WebDriverWait(driver, waitTime);
wait.until(ExpectedConditions.invisibilityOfElementLocated(locator));

Some times you will get an exception as ""org.openqa.selenium.WebDriverException: Element is not clickable at point (611, 419). Other element would receive the click:'. The below one is used to wait for the element to be clickable.

Syntax:

WebDriverWait wait = new WebDriverWait(driver, waitTime);
wait.until(ExpectedConditions.elementToBeClickable(locator));

Please click here for WebDriver Waits example and Synchronization in WebDriver

Below is the example program to handle Ajax controls with Wait statements. Based on the application loading time, we can increase or decrease the wait time. Look at the below image on which we perform operations :

Ajax Loading selenium

package com.pack.ajax;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class AjaxExample {
	
	private String URL = "http://demos.telerik.com/aspnet-ajax/
                                  ajax/examples/loadingpanel/explicitshowhide/defaultcs.aspx";
	
	WebDriver driver;
	WebDriverWait wait;
	
	@BeforeClass
	public void setUp() {
		driver=new FirefoxDriver();
		driver.manage().window().maximize();
		driver.navigate().to(URL);
	}
	
	@Test
	public void test_AjaxExample() {

		/*Wait for grid to appear*/
		By container = By.cssSelector(".demo-container");
		wait = new WebDriverWait(driver, 5);
		wait.until(ExpectedConditions.presenceOfElementLocated(container));
		
		/*Get the text before performing an ajax call*/
		WebElement noDatesTextElement = driver.findElement(By.xpath("//div[@class='RadAjaxPanel']/span"));
		String textBeforeAjaxCall = noDatesTextElement.getText().trim();
		
		/*Click on the date*/
		driver.findElement(By.linkText("1")).click();
	
		/*Wait for loader to disappear */
		By loader = By.className("raDiv");
		wait.until(ExpectedConditions.invisibilityOfElementLocated(loader));
		
		/*Get the text after ajax call*/
		WebElement selectedDatesTextElement = driver.findElement(By.xpath("//div[@class='RadAjaxPanel']/span"));
		wait.until(ExpectedConditions.visibilityOf(selectedDatesTextElement));
		String textAfterAjaxCall = selectedDatesTextElement.getText().trim();
		
		/*Verify both texts before ajax call and after ajax call text.*/
		Assert.assertNotEquals(textBeforeAjaxCall, textAfterAjaxCall);
		
		String expectedTextAfterAjaxCall = "Thursday, January 01, 2015";
		
		/*Verify expected text with text updated after ajax call*/
		Assert.assertEquals(textAfterAjaxCall, expectedTextAfterAjaxCall);
	}

}
Selenium Tutorials: 

Comments

what is the purpose of "Wait for loader to disappear" will you please explain

It is really useful. having all the details with proper examples.

Very Helpful with small and understandable examples

In my application there is an AJAX loader, which makes all the background elements inaccessible. I want to click on an element sitting behind the loader.

For that I am using wait.until(ExpectedConditions.visibilityOf(element)) & wait.until(ExpectedConditions.elementToBeClickable(element)).

But I am getting org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (1016, 114). Other element would receive the click.

Application in which am working most of the time throws error " wait.until(ExpectedConditions.visibilityOf(element)) & wait.until(ExpectedConditions.elementToBeClickable(element))."
Solution to this issue :
Point hoverItem =driver.findElement(By.xpath("path")).getLocation();
int x= hoverItem.getX();
System.out.println(x);
int y= hoverItem.getY();
System.out.println(y);
jse.executeScript("window.scrollBy("+x+", "+y")", " ");

I have a requirement that when i click on a link it loads the specific portion of the same webpage. Now I want to wait till that portion is loaded..for that I have used "WebDriver wait" but what happens is even before it gets loaded perfectly next steps start executing...ofcourse I have tried with various timeout( like 10,20,60 even) can some body help please..
Reference:www.5nance.com (after login go to myProfile)

Add new comment

Image CAPTCHA