Selenium XPath Tutorial

Thu 18 Sep 2008

In the last tutorial we learnt how to create your first basic script by recording and replaying in the IDE. We are now going to learn how to work with XPathes in your scripts

XPath is a really good way to navigate your site when there are no IDs on elements that you need to work with or is near the element you want to work with.

Note: Web browsers were never designed to handle large amounts of XPath so this means that your scripts may run slowly. You will notice this especially in Internet Explorer.

Start the tutorial by creating a script similar to the one in the last script. Only create a script for the first set of elements on this page. You will be working on the other elements later. I have made a number of programming faux pas which you need take account of in your script.

1. Enter numbers into each of the text boxes and then click on one of the buttons
   Value 1
   Value 2
   Total
   =
   
   
2. I have created a basic version of what a script should look like here. You will notice that instead of the click targets having a nice ID you have a very odd looking item like the following: //input[@value='divide'].
3. Let's see about creating your own XPaths from whats on the pages. Selenium IDE has a very useful tool making sure that the XPath that you entered is on the screen. So we take the XPath for the divide button //input[@value='divide'] and put it in the target textbox of Selenium IDE and click on the find button.
   
   
   
   When you click on the find button it will highlight the element as shown in the image above.
   
   
4. You can specify, in a XPath any of the attributes that is in the element that you want. If you put //img[(@alt='Element Find Button')] into the IDE what element does it highlight? It will show the image that I put above.
   
   
5. Now what if you had an image with no ID and a partially dynamic alt tag what would you put? My quick answer would be //img[contains(@alt,'Partial')]. This searches all the images on the page and looks for an Alt that contains "Partial". If you wanted to try the use it for this page try //img[contains(@alt,'Element')]. Selenium IDE would highlight the image above again. I am sure that you can guess by now how powerful that can become.

6. I have created the same elements again below and would like you to create another script to test the items at the top and the items at the bottom.

   Value 1
   Value 2
   Total
   =
   
   
   
   

   I have created an example here. My example will be different to yours and I will explain next why. XPath example 2

7. I have used different syntaxs in my script. Each of these is just to show you a different way of finding elements by using different kinds of syntax. There is one example where the target is defined by a number of attributes and another is defined by finding one element and then finding its sibling. Another reason for doing this is because the buttons at the top and the bottom are programmed exactly the same. It allows us to have unique identifiers for elements.

   In my opinion, if an item hasn't been programmed properly, i.e., lacks an id attribute, it is best to code the Selenium test to find that item in relation to an item that *has* been programmed properly rather than to rely on meaningless indexes. This means that when reading through your script you are more likely to understand where //input[@id='BottomTotal']/following-sibling::input[contains(@value,'Add')] is compared to //li[6]/input[4]. This becomes more obvoius when you have a large number of tests in your test suite.

8. We have now come to the end of this tutorial. There are a number of other items on this page that will produce a XPath for your script. Have a play and try different combinations. You can find very good examples of XPath syntax at W3C Schools. I hope that you found this tutorial very informative but if you ever find that your script is using a lot of XPath go back to the developers and remind them that it is good programming practise to put IDs on elements.