How to works with Ajax controls using Selenium 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));

Click here for WebDriver Waits example and Synchronization in WebDriver

------------------------------------------------------------------------------------------------------------------

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);
 }

}

------------------------------------------------------------------------------------------------------------------