Selenium Scripts for RadControls; Firebug and XPath Support

How do you, guys, use Selenium to test your RadControls?

That question is really my favorite! It has been asked by our customers and I would like to answer it with this post.

Actually I've been closely watching Selenium forums for the past several months. People often think using Selenium is difficult but I would disagree.

This reference explains the basics of writing Selenium tests. It seems people identify easily which command to use. However, most people experience difficulties getting a proper locator. Should the respective element contain an ID its locating is trivial, but what should we do if we don’t have an ID set?

You have three possible solutions to choose from: DOM and XPath expressions as well as CSS selectors. A beginner can't imagine how powerful those are! I'll focus on my favorite: the XPath support. Really, hundreds of RadControls Selenium tests currently use XPath expressions.

XPath locators are quite powerful! People don't have to be XPath masters in order to create a proper expression locating any element on the page. One may just need to find where in the hierarchy the element resides or which attributes it contains.

How would I know how my HTML element looks like?

Simply check the source. I'd recommend Firebug, which I'm using constantly. I'll illustrate my favourite approach with some examples:

1) Our Web Grid has a quite complex rendering structure. I want to use this demo

http://www.telerik.com/products/aspnet-ajax/grid.aspx

and sort by ProductName for instance. How should I tackle this?

Install Firebug, load the demo in Firefox, press F12 to start the add-on, click the "Inspect" button then "ProductName" inside the grid (or alternatively right-click "ProductName" and choose "Inspect"). Now you can see the element that you are going to be clicking.

The following XPath expression:

//th[text()='ProductName']

will get us the element by returning the <th> element that has an inner text of “ProductName” (the text() function is extremely useful in case the required element renders some text). However, I'd recommend a full path:

//table[@id='RadGrid1_ctl01']/thead/tr/th[text()='ProductName']

for better performance. I'll talk about IE performance issues in another post.
2) We should not forget the technique of locating elements by their indexes. Check this demo:

http://www.telerik.com/products/aspnet-ajax/grid.aspx.aspx

How can I click on the second row edit image in order to open its edit form?

Fortunately our devs have added an ID to the edit images:

but the required can be accessed as well like this:

//table[@id='RadGrid1_ctl01']/tbody/tr[2]/td[1]/input

This will locate the input inside the first cell of the second row of Grid's data table.

To verify that install Selenium IDE, load the demo in Firefox, start the IDE from Firefox Tools menu, insert a new command (right-click on the tests content) and paste the expression into the "Target" field. Pressing the "Find" button right next to the field will cause the expected element to blink.

I love the IDE element finder! It saves me pretty much time verifying the proper XPath expression!

3) Locating by element attributes

Say there are two input elements within that cell - a text field and an image. One can use the type attribute to locate the image input only:

.../input[@type='image']

or any other attribute HTML Inspector shows.

----------------------------

I almost forgot another tool -- the XPather Firefox Add-on. Just install it, load the Web Grid demo again:

http://www.telerik.com/products/aspnet-ajax/grid.aspx

Right-lick on "ProductName" and choose "Show in XPather". The XPather browser generates the full path expression automatically!

So is it difficult to write automated tests in Selenium even for complex controls like RadControls? I truly hope this small tutorial will help not only Selenium beginners, but can save some time of others as well.

Your comments are more than welcome.