Using Selenium in a Ajax web application

On an Ajax web application or Ajax feature on web page small sections of the page will update and often the entire webpage will not load. It’s necessary to wait until this ajax process is completed before interacting with sections of the page where content or controls are yet to be rendered.

The Ajax application architecture

If you are using Selenium a simple sleep or wait is a bad idea. The Ajax calls do not the same time to perform an operation every time. If the wait period is too short, you’ll have random test failures since a control you want to interact with is missing. If the period is too long, your tests take too long since you end up waiting, very often, far longer than you need to.

The best approach is to use the selenium waitForElementPresent(locator) command.
for (int second = 0;; second++)
{
if (second >= 60) Assert.Fail("timeout");
try
{
if (selenium.IsElementPresent("//div[@id='locator']")) break;
}
catch (Exception)
{}
Thread.Sleep(1000);
}

The Selenium Command waitForElementPresent waits till a particular element shows up on the page. The other option is waitForCondition(locator) command, which takes a javascript function and waits till it evaluates as true. See here.
selenium.WaitForCondition(“//div[@id=’locator’]”, “”);

You can also use the selenium.browserbot.getCurrentWindow() selenium.browserbot.getUserWindow().$.active == 0. The browser tells us how many active connections to the server are present. Then we sit and wait for that number to become 0. At this point we know that all Ajax requests went through and done, and we can move on in the test.

Here is the code in C# using the selenium.browserbot.getUserWindow().$.active == 0 command with selenium.WaitForCondition command.

selenium.WaitForCondition("selenium.browserbot.getCurrentWindow().jQuery.active == 0", "5000");
selenium.WaitForCondition("selenium.browserbot.getCurrentWindow().$.active == 0", "5000");

I have also used the selenium.WaitForCondition(“selenium.browserbot.getCurrentWindow().jQuery.ajax.active == 0”, “15000”); but the issue is that I keep getting timeout issue. I am yet to resolve the issue. I will update once I get the issue resolved.

If you found this solution helpful or have something extra to add, feel free to share it here by commenting below.

Using Selenium WaitForCondition

In this example I will tell you how you can use selenium WaitForCondition command. Below is the code for waitForElementPresent. You can do the same with WaitForCondition and pass the element id.
Here I will waiting for element “//div[@id=’ctl00_contentSection_LoginPanel’]/h2” then once the element is found continue with testing other things.
This is waitForElementPresent code for element “//div[@id=’ctl00_contentSection_LoginPanel’]/h2”

for (int second = 0;; second++) {
if (second >= 60) Assert.Fail("timeout");
try
{
if (selenium.IsElementPresent
("//div[@id='ctl00_contentSection_LoginPanel']/h2"))
break;
}
catch (Exception)
{}
Thread.Sleep(1000);
}

Alternatively you can use WaitForCondition command and to do the same thing as waitForElementPresent but in a single line.

selenium.WaitForCondition("selenium.isElementPresent
(\"//div[@id='ctl00_contentSection_LoginPanel']/h2\")", "60000");

Thought the code is in C# the command that we are using is selenium.isElementPresent which is Java selenium command. If you use selenium.IsElementPresent you will get the following error “Selenium.SeleniumException : selenium.IsElementPresent is not a function”
[ad#PostAD]