Selenium Webdriver - Handling Ajax Calls

---

---

Selenium Webdriver can be used to handle Ajax calls. Ajax also known as Asynchronous JavaScript is vastly made up of XML and JavaScript. From the UI point of view, a JavaScript call is made to the server and we receive the response in XML format from the server.

What is an Ajax?

Ajax or Asynchronous JavaScript is used mostly to create quick and responsive web pages. Let us take an example of a web page, where the user information updates on click of a button. Suppose a user is updating his information quite frequently, because of that, the whole web page needs to be reloaded each time. However, on a web page which is built on Ajax, only the part of user information which the user modified should be updated, rather than reloading the whole page.

Ajax is compliant with technologies like the HTTP request, JavaScript, XML, HTML, CSS, and so on. Ajax directs and receives data asynchronously without page reloading.

In an Ajax system, the user interface sends a JavaScript call to the XML HTTP request callback method, then a HTTP request is directed to the web server. Next, the web server on the basis of request exchanges information with the database, and fetches it in the JSON/XML format to reflect in the user interface.

How does Selenium Handle an Ajax Call?

Selenium Webdriver is not always successful in accessing the web elements post an Ajax call. This is because in an Ajax web application, the wait time for an element to be available is not uniform. Selenium tests wait for a specific amount of time after which we encounter failures. Inability to predict an Ajax call time is a challenge for the Selenium tests.

In order to overcome this, Selenium uses the the below synchronization and wait mechanisms −

Thread.sleep()

This command pauses the execution for the amount of time passed as a parameter. However, this is not a good choice, since the wait time is fixed, however, the Ajax call time cannot be predicted. Also, this command moves the current thread from the running queue to waiting.

Implicit Wait

It is the default wait available in Selenium. It is a kind of global wait applicable to the whole driver session. The default wait time is 0, meaning if an element is not found, an error will be thrown straight away. However, if a wait time is set, an error will be thrown once the wait time surpasses. Once the element is identified, its reference is returned and execution moves to the next step. We should use implicit wait in an optimal way, a larger wait time would increase the execution time of the tests.

Syntax

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

In the above example, a NoSuchElementException will be thrown after 15 seconds.

Explicit Wait

It is similar to loops added to code that poll the web page for a particular scenario to become true prior exiting the loop and moving to the next line of code. If the situation is unfulfilled within the time set out, a timeout exception will be thrown.The explicit waits are applied to a specific element with its condition with the help of the ExpectedConditions and WebDriverWait classes. This type of wait is ideal for handling the Ajax calls. Some of the expected conditions for explicit waits are listed below −

• titleContains

• alertIsPresent

• invisibilityOfElementLocated

• titleIs

• invisibilityOfElementWithText

• visibilityOf

• textToBePresentInElement

• visibilityOfElementLocated

• visibilityOfAllElements

• presenceOfAllElementsLocatedBy

• presenceOfElementLocated

• elementToBeClickable

• stalenessOf

• textToBePresentInElementValue

• textToBePresentInElementLocated

• elementSelectionStateToBe

• elementToBeSelected

• frameToBeAvaliableAndSwitchToIt

We should be cautious while adding both implicit and explicit waits in the same driver session, for instance having a combination of explicit wait of 15 seconds and implicit wait of 10 seconds can result in a timeout to occur after 20 seconds.

Syntax

WebDriverWait wt = new WebDriverWait(driver,5);
wt.until(ExpectedConditions.invisibilityOfElementLocated
   (By.xpath("//*[@class='mui−btn']")));

In the above example, a TimeOutException will be thrown after 5 seconds in case the expected condition of an element to be invisible is not met within that specified time.

Fluent Wait

This is the maximum time the driver waits for a specific condition for an element to be true. It also determines the interval at which the driver will verify(polling interval) prior to locating an element or throwing an exception. The fluent wait is a customized explicit wait which gives the option to handle specific exceptions automatically along with customized messages when an exception occurs. The FluentWait class is used to add fluent waits to tests.

Syntax

Wait wt = new FluentWait(driver)
.withTimeout(20, TimeUnit.SECONDS)
.pollingEvery(5, TimeUnit.SECONDS)
.ignoring(ElementNotInteractableException.class);

wt.until(ExpectedConditions.titleIs("Tutorialspoint"));

In the above example, timeout and polling interval are specified meaning that the driver would wait for 20 seconds and perform a polling in an interval of 5 seconds within the timeout time for the Tutorialspoint browser title condition to be met. If the condition is not satisfied, within that time frame, an exception will be thrown, else the next step will be executed.

Example 1 - Handling Ajax with Explicit Wait

Let us take an example of the below image, where we would first click on the Click Me button.

After clicking on the Click Me, we would use explicit wait and wait for the presence of the text You have done a dynamic click to be available on a web page.

Code Implementation on ExplicitsWait.java class file.

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;
import java.util.concurrent.TimeUnit;

public class ExplicitsWait {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // launching a browser and open a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/buttons.php");

      // identify button then click on it
      WebElement l = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/button[1]"));
      l.click();

      // Identify text
      WebElement e = driver.findElement(By.xpath("//*[@id='welcomeDiv']"));

      // explicit wait to expected condition for presence of a text
      WebDriverWait wt = new WebDriverWait(driver, Duration.ofSeconds(2));
      wt.until(ExpectedConditions.presenceOfElementLocated
         (By.xpath("//*[@id='welcomeDiv']")));

      // get text
      System.out.println("Get text after clicking: " + e.getText());

      // Quitting browser
      driver.quit();
   }
}

Output

Get text after clicking: You have done a dynamic click

Process finished with exit code 0

In the above example, the text obtained after clicking on the Click Me button was You have done a dynamic click.

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example 2 - Handling Ajax with Fluent Wait

Let us take another example of the below page where we would first click the Color Change button.

After clicking on the Color Change, we would use fluent wait and wait for the presence of the button Visible After 5 Seconds to be available on a web page.

Code Implementation on Fluentwts.java class file.

package org.example;

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.FluentWait;
import org.openqa.selenium.support.ui.Wait;
import java.time.Duration;

public class Fluentwts {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // launching a browser and open a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/dynamic-prop.php");

      // identify button then click
      WebElement l = driver.findElement(By.xpath("//*[@id='colorChange']"));
      l.click();

      // fluent wait of 6 secs till other button appears
      Wait<WebDriver> w = new FluentWait<WebDriver>(driver)
         .withTimeout(Duration.ofSeconds(20))
         .pollingEvery(Duration.ofSeconds(6))
         .ignoring(NoSuchElementException.class);
      WebElement m = w.until(ExpectedConditions.visibilityOfElementLocated
         (By.xpath("//*[@id='visibleAfter']")));

      // checking button presence
      System.out.println("Button appeared: " + m.isDisplayed());

      // Quitting browser
      driver.quit();
   }
}

Output

Button appeared: true

Process finished with exit code 0

In the above example, we observed that the button Visible After 5 Seconds obtained after clicking on the button Color Change.

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example 3 - Handling Ajax with Implicit Wait

Let us take an example of the below page, where we would try to identify the text Selenium - Automation Practice Form with the wrong xpath value and add an implicit wait. In such a scenario, once the timeout time is passed, we would get a NoSuchElementException.

The correct xpath for this element would be: /html/body/div/header/div[2]/h1. However, we would be using an incorrect xpath /html/body/div/header/div[2]/u1 in our implementation in order to get an exception.

Code Implementation on Implicitwts.java class file.

package org.example;

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class Implicitwts {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 10 secs
      driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

      // launching a browser and open a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // identify element with incorrect xpath value
      WebElement l = driver.findElement(By.xpath("/html/body/div/header/div[2]/u1"));
      l.click();

      // get text
      System.out.println("Get text : " + l.getText());

      // Quitting browser
      driver.quit();
   }
}

Output

Exception in thread "main" 
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: 
{"method":"xpath","selector":"/html/body/div/header/div[2]/u1"}
  (Session info: chrome=121.0.6167.160)
For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception

Process finished with exit code 1

In the above example, we have received the NoSuchElementException since an incorrect xpath value is used to identify the element. Once the implicit wait time of 2 seconds passed, an exception was thrown.

Finally, the message Process finished with exit code 1 is received, signifying unsuccessful execution of the code.

This concludes our comprehensive take on the tutorial on Selenium Webdriver - Handling Ajax Calls. We’ve started with describing what an Ajax is, how Selenium handles Ajax, and walked through examples of how to use explicit, implicit, and fluent waits to handle Ajax along with Selenium. This equips you with in-depth knowledge of the handling Ajax Calls. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.