Archived PushToTest site

Selenium Tutorial For Beginners - Tutorial 2

Write Your First Functional Selenium Test of An Ajax Application

Selenium Tutorial Table of Contents, Next Chapter, Previous Chapter

While Selenium works well in an Ajax environment, Selenium's many programming contexts can be difficult on the test script writer. There are a lot of contexts to keep in your head at once.
  • Selenium RC Context. Your Selenium commands operate through the Selenium RC (for Selenium 1) and Selenium Server (for Selenium 2, aka WebDriver.) For Selenium 1, navigating the browser's DOM to locate elements begins in a hidden frame in the DOM. For example, using an XPath expression, /form/input, will not work since the root (/) of the DOM is the Selenium browser bot daemon. Use //form/input.

  • Browser DOM Context. In an Ajax application Javascript functions operate asynchronously. They can change the DOM at anytime. Identifying new elements requires a variety of Selenium techniques, including XPath positional (//table/tr/td/input,)XPath attribute search (//input[@name='myinput'],) and CSS Selector (css=form input[name='username'].)

  • Browser Javascript Engine Context - Ajax Web ojects may dynamically create elements in the DOM using a variety of dynamic element IDs in the popular Ext-JS Ajax library from Sencha. For example, an Ext-JS table object has cells with a class identifier of <td class="x-grid3-col x-grid3-cell x-grid3-td-2 " tabindex="0" style="width: 143px;">. Avoiding coding your Selenium scripts to use these class identifiers as they will change each time the Ext-JS library instantiates the needed object. Positional XPath, CSS Selectors, or asking your developers to add unique identifiers is better.

  • Virtual User Context - When running multiple Selenium tests concurrently, the application may reject multiple log-ins using the same credentials. Use the native language's data handling objects to provide Selenium test scripts with operational test data. For example, in Java use Hibernate or JDBC to pass query results data to a Selenium test script command.

  • Selenium IDE Context - For operating Javascript functions in a Selenium command from the Selenium IDE context, executing the Selenium command, asserteval( 'javascript: alert("hi")'); willdisplay the alert box in the Selenium IDE window and not in the application's browser window.
Watch The Advanced Selenium Workshop

I recently had an experience that sums up all of these contexts. A customer named Dave was writing a Selenium test of an service scheduling application from IBM. On the log-in page of the application, an embedded Javascript function displays a modal dialog box when the function does not recognize the browser version.
Browser window showing a dialog that says Browser not supported
I am seeing this situation frequently now as software developers move application logic from the server side to the client (the browser.) In this application, users see a warning alert when they are on the log-in page using an unsupported browser. Users may not log-in until they click the Ok button.

For Selenium testers the first issue is to know who created the dialog: Javascript modifying the DOM or a browser modal alert. For example, the application could have thrown an exception using the browser's alert mechanism.

alert("This browser is not supported.");

The alert function displays a modal dialog box that looks like the following.

Browser created alert dialog

Detecting and dismissing a Javascript modal dialog is easy. In Selenium 2 use the following to access the alert and click its OK button.


Using Selenium 1, a special command will click the OK button when the alert appears.


When the application uses Javascript to modify the DOM to display an alert are more complicated to handle. The actual Selenium command to click the OK button is simple."//button[text()='Ok']");

The challenge is to locate the OK button element in the DOM. For example, a Ajax application that uses the popular Ext-JS library to display a dialog box uses the following function.

var notsupporteddialog = new Ext.BasicDialog('sampleDlg', {
autoCreate: true,
width: 500,
height: 200,
modal: true,
proxyDrag: true,
shadow: true,
collapsible: false,
resizable: false,
closable: false,
title: 'Browser not supported'

Searching the Web page source code does not show you the HTML structure of the alert, nor the Ok button. The Ext-JS function creates the HTML structure dynamically as the page is running. Using the HTML tab in Firebug may show you the structure and lead you to an XPath expression that looks like //button[text()='Ok']. However, this is error prone as there may be other //button elements in the DOM, and those may be created dynamically too. The solution in this case is to add more path details until the expression evaluates to only the Ok button you really want to click.

In Dave's case the dialog only appears in IE 6. Creating a Selenium script in Selenium IDE with Firebug Dave will never see the alert. That can make it difficult to use Selenium IDE, Firebug, and other debugging tools to create a useful Selenium command to dismiss the alert. Depending on the way the application author created the Javascript function call, I can cause the alert to appear. In Selenium IDE I execute the command:

javascript: notsupporteddialog();

In TestMaker Object Designer I use the Evaluate tab as follows.

TestMaker Object Designer showing Evaluate tab to force the alert to appear

Designer lets me operate Javascript functions running the live page. Calling notsupporteddialog() opens the alert dialog in the page. I then use Firebug to identify a CSS Selector or XPath expression to target the OK button in the alert.

There is one more way to overcome this alert issue, I spoke to IBM to change the application to avoid the dialog in my supported browsers.

Watch The Advanced Selenium Workshop

Selenium Tutorial for Beginners (c) 2012 Frank Cohen. All rights reserved.