Tag Archive for 'AJAX'

How to wait until AJAX call completes in Selenium web tests

If you introduce AJAX to the application that is web tested with Selenium your tests might fail from time to time. In my case the tests were failing randomly, not that often but it made their quality decreased. So, how can you fix this?

Solution

Ideally, what you need is to stop the test execution (e.g. do not perform checks for a little bit) until the AJAX call completes. Typical scenario is there’s AJAX activity indicator – a text or an animated image that is displayed when the request is sent and hidden when response from the server is obtained. In that case, you need to wait until the indicator disappears.

In order to do this, WebDriverEventListener inteface can be implemented. This will enable to listen and react to several popular web test events, one of which is a click.

Below is the example (in Java) of the implementation of the method that is fired when the web test code clicks HTML element. BY_LOCATOR is a placeholder of code that should somehow locate the AJAX indicator (e.g. by ID, class name). What happens is documented in the code.

public class AjaxActivityIndicatorEventListener implements WebDriverEventListener {
	@Override
	public void afterClickOn(WebElement element, WebDriver driver) {
		try {
			// Waiting for AJAX indicator to disappear...
			new WebDriverWait(driver, 10).until(invisibilityOfElementLocated(BY_LOCATOR));
		} catch (StaleElementReferenceException e) {
			// Clicking element must have not called AJAX request. Skipping.
		}
	}
	...
}

Now that you have the event listener, it needs to be registered for the web driver. In order to achieve this, the web driver instance that is prepared for the tests should be created as below:

new EventFiringWebDriver(driver).register(new AjaxActivityIndicatorEventListener());

Driver here is the (configured) instance of a web driver (e.g. HtmlUnitDriver, ChromeDriver, InternetExplorerDriver).

Problems with UpdatePanel on SharePoint

If you want to add some AJAX flavour to your ASPX pages running on SharePoint you need to perform a few actions:

  • install ASP.NET AJAX on servers in your farm
  • extend SharePoint web.config file with Microsoft ASP.NET AJAX
  • add ScriptManager either in the master page you’re using (prefferable) or in all pages that employ AJAX

The above listed steps are well described in the following article: Integrating ASP.NET AJAX with SharePoint.

However, at the end of the day you may (and probably will) end up with some problems during development. In short, not all works as it’s supposed to and how it does in a regular web project. One of the issues I had recently was UpdatePanel which made my page not working after a while.

Basically, I had an ASPX with some controls that had event handlers assosiated with them (e.g. buttons with onclick’s). There too was an UpdatePanel which was triggered by an event, let’s say “Click” perfomed on a button. This event made the UpdatePanel reload, BUT ONLY FOR THE FIRST TIME. Once reloaded, none of the handlers assosiated with any of the controls on the page worked.

I did a lot of googling but finding the answer was not that easy. Finally my friend gave me the link to this article. The solution is described in section “Using UpdatePanels within SharePoint”. The author suggests to add this JavaScript code to the page:

<script type="text/javascript">
    _spOriginalFormAction = document.forms[0].action;
    _spSuppressFormOnSubmitWrapper=true;
</script>

ASP.NET AJAX In Action

If you’re about to start playing with AJAX in ASP.NET it’s a good idea to read this book: ASP.NET AJAX In Action by Alessandro Gallo, David Barkol, Rama Krishna Vavilala (see on amazon).

It very well describes basics of AJAX and shows basic and more advanced techniques of applying it in ASP.NET. There are exaplanations of Microsoft Ajax Library, UpdatePanel, ASP.NET AJAX client components, bulding AJAX-enabled controls, and much, much more. All well written and supported with extensive examples.

AJAX Control Toolkit – Could not load file or assembly vjslib

I wanted to play around with ASP.NET AJAX Control Toolkit. There are a few steps to do before you can start using this tool. Among others, you need to build the Visual Studio Solution provided in the downloaded zip file.

When I tried to build the solution I got this error:

Error 1 Could not load file or assembly ‘vjslib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’ or one of its dependencies. The system cannot find the file specified. C:\Program Files\Microsoft ASP.NET\Ajax Control Toolkit\TemplateVSI\TemplateVSI.csproj 60 5 TemplateVSI

Solution

This is what AJAX Control Toolkit documentation says:

The TemplateVSI project has a dependency on vjslib.dll which is a part of the Visual J# Redistributable…

The above mentioned package can be found there. Installing it solved this problem, at least on my computer.

ASP.NET powered with AJAX

For those who develop web applications in ASP.NET and want to learn how to include AJAX I recommend a series of video tutorial on ASP.NET AJAX.

The series is created (from time to time new videos are added) by Joe Stagner and others from the Microsoft product team. It teaches the basic tricks and explanations of how things should be done.

AJAX activity indicator

Users are familiar with indications of work performed in background since first versions of MS Windows. Besides being fancy, they are also informative.

AJAX, a Web 2.0 technique, aim at exchanging only small amounts of data with a server; this should be performed behind the scenes. If so, why not expose the moments when user interaction brings about reqest and response from a server? Remeber my previous post about using prototype.js for making AJAX request? I use prototype also for indicating background actions on web pages that support AJAX.

You’d never guess how easy it is to such indicator.

First, you must register an action which accurs in case of an AJAX-related event. The best way to do that is add the following code in the head section of the HTML code (remember to include prototype.js library before it!):

<script type="text/javascript">
<![CDATA[
Ajax.Responders.register({
    onCreate: function(){ Element.show('spinner')}, 
    onComplete: function(){Element.hide('spinner')}
});
]]>
</script>

Then, further in the code inside body section, add this:

<img alt="spinner" id="spinner" src="gfx/spinner.gif" 
    style="display:none;" />

Actually, it’s all. Whenever you click an object which sends an AJAX request to the server, the indicator defined by img appears and is visible until the response is obtained.

Wonder, how to create an indicator animation? Generate one on ajaxload.info

Using PUT and DELETE methods in AJAX requests with prototype.js

Whenerver I write JavaScript I use prototype.js. I find it brilliant, especially when you deal with AJAX. With this library it’s easy to create an AJAX request and process its response from the server.

To send an AJAX request you create a following HTML code:

<a href="#" id="ahref">a link</a>
...
$('ahref').onclick = function() {
    new Ajax.Request('/some_url', {
        method:'get',	
        parameters:'param1=value',
        onSuccess: function(transport){
            var responseXml = transport.responseXML;
            ...
        },
        onFailure:function(){ alert('Something went wrong...') }
    });
    return false;
}

This way, you create a request with GET and POST method. Recently, while developing a SOA system based on REST (REpresenational State Transfer), I faced a problem of creating requests also with other HTTP methods.

In short, REST allows using a few HTTP methods. The most popular are:

  • GET – for obtaining representation of a resource
  • POST – for updating or creating a representation of a resource
  • PUT – for creating a representation of a resource
  • DELETE – for removing a representation of a resource

Again, prototype.js helps a lot. Since version 1.5, it is possible to use all those methods (formerly, it supported only GET and POST). PUT and DELETE methods are realized by tunneling over POST. Also, “_method=METHOD_NAME” is added as a query parameter with the request. The only thing to do is to prepare relevant logic on the server side to manage the request.

Suppose you have a servlet that allows adding a resource to a database and it is invoked with the following URL:
http://example.com/servlet/RESOURCE_URL.

A simplified definition of a Ajax.Request object in prototype would be as follows:

new Ajax.Request('/some_url', {
    method:'put',
    parameters:'url=RESOURCE_URL'
});

In the JavaServlet, you obtain the request and manage it like that:

@Override
protected void doPost(
    HttpServletRequest req, 
    HttpServletResponse res) 
    throws ServletException, IOException {
    if (req.getParameter("_method") != null 
        && "put".equalsIgnoreCase(req.getParameter("_method"))) {
        doPut(req, res);
    }
}