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.