devXero's blog

a blog about agile, development, and automation

Ways to improve the reliability and efficiency of SWAT/UI tests (Part 4 – Safely Using InnerHTML)

Posted by Mike Longin on October 28, 2009

This will be the last of my posts on this specific topic for now, though I am sure many more posts will be made along the same lines in the not to distant future.  For this one I want to look at safely using InnerHTML.  Many people do not realize how vastly different browser can treat HTML.  Specifically HTML created dynamically as part of a web 2.0 application.  Below you will find some generalized examples of html in 3 different browsers.

–IE 7

<option value=fl selected>Florida</option>

–IE 8

<option selected value=fl>Florida</option>


<option value=“fl” selected>Florida</option>

Notice how the selected attribute moves around and that the value sometimes has quotes and sometimes does not.  These are all things to be expected when dealing with HTML elements. Unfortunately many times I see people write automation against one browsers specific interpretation of the HTML which can cause issues down the line.   So now the question is how do we avoid these issues and create expressions to best deal with them.  Below are three examples of different ways to write expressions that relate to the above HTML.  Each uses a different technique to best find the element.  Obviously these techniques can be combined for even better expressions.

1. Use Parent Element


– Notice how by using parentElement we can identify the parent of the control and use that to create a stronger expression.  You can find more on parentElement here (

2. Use Regular Expressions

|innerHTML:Florida[\w\W]+Georgia[\w\W]+New Jersey|SELECT|

– The above expression would be used to find the order of items in a select list.  Instead of using the entire innerHTML of the element as many people do, you can instead just use an expression such as this one to look for the pertinent data.

3. Make good use of attributes


– Attributes are your friend.  Here we are using all of the available attributes to really get the best handle possible on the element.

Hopefully these examples will help you create a strong, more reliable SWAT test.


Leave a Reply

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

You are commenting using your 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: