Friday, January 7, 2011

Quick XPath For Dummies

So I had someone tell me they needed a more fundamental tutorial on xpath.  So lets start off with the basics:

What is Xpath?  It is a short way of referencing an element on a web page. 
What is it for?  In selenium it is used for identifying a html element that does not have an easy, unique identifier such as id, name, text.  
How does it work?  Well I don't really know.  But essentially it searches the web page, top to bottom, looking for elements that match the criteria. 

Let's talk about html.  Here is an example element: <a href=http://www.google.com>google link</a>.  This will show up on the page as a text link displaying the words "google link" and it will take you to www.google.com.  For each element there are three main parts:  the type, the attributes, and the text. 
Our element is of type a.  It has an attribute called href equal to http://www.google.com.  and it has text equal to "google link".  We can use all three of these things to search for our elements. 

The next concept to understand is the idea of nodes, and the familial relationship of html elements.  Look at this example code:

<div title="Section1">
   <td name="Search">
      <tr class="Yahoo">Yahoo Search</tr>
      <tr class="Google">Google Search</tr>
   </td>
</div>

Notice the </div> at the bottom? That means the td and tr elements are contained within the div.  These other elements are considered descendants of the div.  The td is a child, and the tr is a grandchild (and so on and so forth).  The two tr elements are considered siblings.  This is vital, as xpath uses these relationships to find your element

So suppose I wanted to find the google item.  Any of the following expressions will work:
//tr[@class='Google']
/div/td/tr[2]
//div[@title="Section1"]//tr[text()="Google Search"]

So lets analyze the expressions.  We start at the top element (also known as a node).  The // means to search all descendants, / means to just look at the current element's children.  So //div means look through all descendants for a div element.  The brackets [] specify something about that element.  So we can look for an attribute with the @ symbol, or look for text with the text() function.  We can chain as many of these together as we can. 

 Here is a quick reference:
// search all descendant elements
/ search all child elements
[] The predicate (specifies something about the element you are looking for)
@ Specifies an element attribute.  (For example, @title)
text() Gets the text of the element. 
. specifies the current node (useful when you want to look for an element's children in the predicate)
.. specifies the parent node
contains() Use this in the predicate if you can't do a full string match on an attribute or text() value.

20 comments:

  1. Nice tutorial in my newbie steps in xpath. I have a question though. Is there a way to move from the second child to first child element. In your example, it's like moving from /div/td/tr[2] to /div/td/tr[1]

    In the application I'm working with the structure goes like this:
    <'div' class="parent class">
    <'div'>
    <'img' onLoad="doSomething">

    <'div'>
    <'img'>
    <'span' class="myClass" id="myId">Some Name



    This structure has been created with GWT and my modifications. So I have only one custom id = "myId" in the spam element and I want to track the img element which has the onLoad event. Do you think this is possible?

    Thanks again for your valuable information

    P.S I've put some quotes in 'div', 'img'. 'span' elements since they are not accepted elements

    ReplyDelete
  2. Use the "preceding" operator:

    //span[@id='myId']preceding::img[@onLoad='doSomething']

    ReplyDelete
  3. well explained article about basics of Quick Xpath really thanks a lot for sharing

    Selenium Training Institute in Chennai

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. I wish to show thanks to you just for bailing me out of this particular trouble.As a result of checking through the net and meeting techniques that were not productive, I thought my life was done.

    Best PHP Training Institute in Chennai|PHP Course in chennai
    Best .Net Training Institute in Chennai
    Matlab Training in Chennai
    Embedded Training in Chennai
    SAS Training in Chennai

    ReplyDelete