Deven Kalra’s Weblog

I am a big fan of automated testing and have started to look at Selenium as an automation tool. I have used Watir before as a tool to drive the browser, but have found that the learning curve for Ruby is too much of an overhead for some QA engineers. Since Selenium has a good IDE to capture and record actions, it is very easy to get started. It also has a rich set of functions that can be used to drive the browser. I also like the fact that every recorded action has a corresponding visible script text that can be edited by hand.

After you use the record and play for a few times, the next big road block that you have to get over is to learn how to select elements on the web page especially if it has a complicated nested structure, does not have an id or in case of using third party libraries such as extJS, the ids can change with each run.

In that case, I have found xpath to be very powerful. Below are some examples of the locators. Note that if an expression can return more than one element, the first element is returned by default. You can also use [1], [2] etc. to get a specific element.

1. If you know attribute value of an element

   //div[@id='xyz']: selects the div whose id is exactly xyz

2. If the attribute value should contain a string

   //div[contains(@id, 'xyz')]: matches divs whose id attribute contains the string xyz

3. If you want to select an element inside another one

   //div[contains(@id, 'xyz')]//div[@id='abc']: matches div whose id is abc and is contained in a div whose id contains the string xyz in it.

4. If you want to match on the text in an element

   //a[text()='My Text']: matches a link whose text is “My Text”

5. If you want to match more than one string in attribute or text

   //a[contains(text(),'Bill') && contains(text(), 'Clinton')]: matches a link whose text contains both Bill and Clinton. You can use any xpath function or operator to create your expression

6. Find the nth element of a type

   //div[position()=3]: matches the third div on the page

   //div[@id='abc']//table[position()=3]: matches the third table inside the div whose id is abc

As a complicated example consider

//div[@id='editClaimPopupPanelDiv']//div[contains(@class,'x-grid3-row')][1]//table//tr[1]/td[1]

This find the div whose id is editClaimPopupPanelDiv. Inside div(s), the first div whose class attribute contains x-grid3-row is matched. Inside this div the first table is matched inside which the the first row and then the first td is matched.

Some functions you might find useful are (excerpted from the w3 spec):
String Functions

1. string concat(string, string, string*) : The concat function returns the concatenation of its arguments.
2. boolean starts-with(string, string) : The starts-with function returns true if the first argument string starts with the second argument string, and otherwise returns false.
3. boolean contains(string, string) : The contains function returns true if the first argument string contains the second argument string, and otherwise returns false.
4. string substring-before(string, string) : The substring-before function returns the substring of the first argument string that precedes the first occurrence of the second argument string in the first argument string, or the empty string if the first argument string does not contain the second argument string.
5. string substring-after(string, string) : The substring-after function returns the substring of the first argument string that follows the first occurrence of the second argument string in the first argument string, or the empty string if the first argument string does not contain the second argument string.
6. string substring(string, number, number?) : The substring function returns the substring of the first argument starting at the position specified in the second argument with length specified in the third argument.

Node Selection Functions

1. number last()
2. number position() : position of selected element

For a detailed review of xpath see the w3 spec