Tuesday, October 16, 2007

Selenium IDE HTML Compare Pattern

I was needing to test sorting for a web-based application UI this last week. What I needed to do was check that a listbox control’s account numbers were sorted in ascending order. What quickly emerged was a pattern of steps when using Selenium IDE HTML scripts to compare values.

First, get the string values to compare. Then, compare the values. You may need to parse the value as a float via the JavaScript parseFloat() function if working with decimals such as currency. If you use the eval() function (see below), you are good on comparing numbers such as integers. Finally, verify the expected outcome of the comparison.

As stated above the first thing is to get the values to compare:

<!-- get the first account number in the listcontrol -->
<tr>
            <td>storeEval</td>
            <td>var Account1 = ""; var
accountOptionList =
selenium.browserbot.getCurrentWindow().document.getElementsByName('accountList');Account1
= accountOptionList.item(0)[1].value</td>
            <td>Account1</td>
</tr>

<!-- get the second account number in the listcontrol -->
<tr>
            <td>storeEval</td>
            <td>var Account2 = ""; var
accountOptionList =
selenium.browserbot.getCurrentWindow().document.getElementsByName('accountList');Account1
= accountOptionList.item(0)[2].value</td>
            <td>Account2</td>
</tr>

Next, compare the values and place the comparison value into a variable:

<tr>
            <td>storeEval</td>
            <td>var isLess = false; isLess =
eval(${Account1} &lt; ${ Account2});</td>
            <td>isLess</td>
</tr>

Finally, verify that the comparison value evaluated as expected (that
the first numeric value is less than the second if sorted correctly):

<tr>
            <td>verifyExpression</td>
            <td>${isLess}</td>
            <td>true</td>
</tr>

Monday, October 15, 2007

JQuery Demos

Considering that most JavaScript development deals with Document Object Model (DOM) Element collections, JQuery provides a framework that results in cleaner and more concise code.

For the documentation go here. I have some basic demos here that cover very basic AJAX and drag and drop functionality.

Sunday, October 14, 2007

JavaScript Functions in Selenium IDE HTML Tests

I wanted to run a JavaScript function in my Selenium IDE HTML test. Specifically, I wanted to remove any currency symbols and commas from currency values. Here is the best way that I have found to do it.

First, declare the JavaScript function.

<tr>
<td>storeEval</td>
<td>
function(input) {var output =""; output = input.replace",","");
return output.replace("$","");}
</td>
<td>replaceText</td>
</tr>

To call the replaceText function do something like this:


<tr>
<td>storeEval</td>
<td>var parsedTotal = 0; parsedTotal =
parseFloat(storedVars['replaceText']('${Amount}')).toFixed(2);
</td>
<td>parsedTotal</td>
</tr>

Now I can use the parsedTotal value later in the test:

<tr>
<td>verifyExpression</td>
<td>${parsedTotal}</td>
<td>SomeValueHere</td>
</tr>

Saturday, October 13, 2007

Adobe's Integrated Runtime - Heavenly

Back in August I attended an event sponsored by Adobe that highlighted their new AIR (Adobe Integrated Runtime) product. The new runtime looks great but what was of particular interest at this event was the venue in which the event was held.

It was at the Bell Event Centre at the Verdin Bell & Clock Museum in downtown Cincinnati. The museum is an old church. What was cool was the majestic atmosphere that the building provided for Adobe’s informative outing. Moreover, as I sat there listening to the content of the presentation and looking up at the interior structure of the church, I could not resist the irony of the situation given the evangelism (of glad tidings for all developers) that was taking place.

Ryan Stewart giving the keynote

As the faithful, seekers of inspiration, and the skeptical gathered the Adobe AIR clergy (team) was prepared to deliver a message of hope. The sermons (presentations) consisted of building an AIR application with Adobe Flex, HTML and JavaScript, and utilizing JavaScript frameworks in AIR applications.

The content was inspiring (informative) and Adobe’s integrated runtime shows much promise (potential). In addition to the miraculous (cool) features such as ability for JavaScript developers to utilize ActionScript objects via script bridging, the sermons (presentations) contained the occasional rebuke (pokes) at Microsoft for their heretical ways (.Net platform), at which the congregation (those in attendance) responded with various utterances of “amen” (chuckles and head nods).

Although I left the service (event) unconverted from my agnosticism (the belief that no one technology can meet every business need), I was inspired to look to the holy city (Adobe) for more revelation (documentation) to see how AIR could potentially be the way (an answer to a business need).

Confession: You know I have to admit that I had fun with this one.

HTML ListBox Quick Item Select JavaScript

It has been awhile given that I have been busy at work and also started a graduate business informatics program. Anywho, a customer recently requested a way to select an HTML Listbox control and key in an account number and have that number be selected as they were entering the perspective number.

A coworker and I came up with the following. The referenced JavaScript file is here.

The trick here was utilizing the onkeyup event. The entered text is appended to a string that is compared to the listbox content. If there is a match, it is added to an array of matched items. On each onkeyup event, the first matched element in the array is selected in the listbox control. If the listbox loses focus, then entered string is set to an empty string.