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