devXero's blog

a blog about agile, development, and automation

Ways to improve the reliability and efficiency of SWAT/UI tests (Part 2 – Reliably checking select boxes)

Posted by Mike Longin on October 6, 2009

This post is written more for a SWAT user since it has to do specifically with how SWAT users check the values of SELECT boxes.  However the ideas here could be applied to other UI testing tools as well.

For this post we will be using the example Select Box below:

<SELECT id="mySelectBox">
  <OPTION value="A">Alpha></OPTION>
  <OPTION value="b">Beta</OPTION>
</SELECT>

The Problem

What we have here is a select box with 2 values and B selected.  Typically we have seen the test for checking the selected value to be done like this:

|AssertElementExists|Expression|id=mySelectBox;innerHTML:OPTION value=”B” selected|SELECT|

Unfortunately each browser handles select boxes a little bit differently.  For instance IE7 and IE8 reverse the order of the value and selected

IE7 Example:

OPTION value=”B” selected

IE8 Example:

OPTION selected value=”B”

Firefox also treats this differently as well.  Many times it removes\adds quotation marks in different places.

The Solution

There are 2 different ways to solve this.  The first way is slightly simpler but we have found that in some cases it can lend itself to mistakes.  The 2nd is the much stronger way, and also allows for multi select boxes.

Solution 1

|AssertElementExists|Expression|id=mySelectBox;value=B|SELECT|

Solution 2

|AssertElementExists|Expression|parentElement.id=mySelectBox;value=B;selected=true|OPTION|

Notice that in solution 2 we are no longer referencing the Select box.  Instead we are referencing the Option itself.  What we are in essence saying is that we want SWAT to find an Option whose parent is the select box (located by parentElement.id), whose value is B and is selected.  By doing it this way you are drilling down to the specific option you want and avoiding browser compatibility issues.  You can also use this method for just checking options inside a select box.  The example below checks that both values are in the select box:

|AssertElementExists|Expression|parentElement.id=mySelectBox;value=B;innerHTML=Beta;selected=true|OPTION|

|AssertElementExists|Expression|parentElement.id=mySelectBox;value=A;innerHTML=Alpha;selected=false|OPTION|

Hopefully this helps clear up some of the confusion with Select boxes.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: