In the previous post, we learnt about how we can create Xpaths, using various keywords and functions. Now we are going to put that knowledge to practice and we’ll see how we can design a new xpath, from the scratch.
I found this example, mentioned on the qxf2 blog to be the best example and I would use this same example in here. This example has a very good analogy with the direction mechanism that I told about in the previous post.
We have learnt so far that
- Absolute xpath start with a single slash ( / ), while relative xpath starts with double slash ( // ).
- Elements can be referenced by their tags. For example anchor tag can be referenced by ( /a ), while input tag can be referenced by ( /input ).
- We can use the @ notation to get the attributes.
- We can use methods like contains( ), starts-with( ), equals( ) to find elements.
I treat coming up with XPaths like following directions given to me by a human – imprecise and non-unique at each step, but when strung together are good enough to locate places accurately. So here goes a real life example of following directions before tackling the more advanced xpaths.
So one day my friend, Mathew called me up and asked me to visit his place, so that we can hang out and watch the FC Barcelona vs Real Madrid match at his place. He’s got a new giant sized TV, so naturally I am interested.
But I don’t know how I can reach his house. I haven’t seen it and haven’t been to his house before.
Mathew : Hey Mate, El Clasico is near. I got a new Plasma Screen. Come over to my place. We'll watch it on giant screen with lots of beer.
Me : Sounds so much fun. And that'd be awesome.
Mathew : Yeah!
Me : But I have never been to your house. How would I reach there. All I know from Zac, is that your flat has a ton of flags as a decoration. How would I reach your place?
Mathew : Do you know Baker Street?
Me : I do. Yes
Mathew : Keep driving down on the Baker Street. You will see a billboard that reads "Sell Your Old Stuff at OLX". Take the first right after that billboard. Keep driving and you will have my apartment at the left.
Me : What is your apartment number?
Mathew : I live in N-Block and my apartment number is 147.
Now, to find the way to reach Mathew’s house, we need to find the unique way, out of the non-unique elements. How’d we do that?
First of all, we apply a little bit of reasoning and narrow down our nodes- or the marking points :
- We identify the starting path – Baker Street.
- We identify the closest landmark – The Billboard.
- We identify a series of easily recognizable, unique features between landmark and vicinity of destination – the text on billboard, flags on apartment, direction to take.
- Now apply the most unique identifers to narrow down the location – block name, apartment number.
Now let’s start building the directions or the xpath.
- We start with the starting path that Mathew told us to use- which was Baker Street. So our xpath would start with
- Next, Mathew told us that there would be a billboard, with the text “Sell Your Old Stuff at OLX”. We’re gonna use that
billboard[text( )='Sell Your Old Stuff at OLX']
Now combining with the path from above point, our combined path now looks
//street[@name='Baker Street']/billboard[text( )='Sell Your Old Stuff at OLX']
- Now, after the billboard, we have to follow the direction to right.
Now, a point to note here is the use of following and index 1 after the attribute direction. Note that Mathew said ” First right after the billboard”. So in order to select the first right after billboard, we use the following axes, because we have the select the direction right after the billboard, and we have to select the first right, so we use an index of 1 . So now, our combined xpath would look like
//street[@name='Baker Street']/billboard[text( )='Sell Your Old Stuff at OLX']/following::street[@direction='right']
- Now Mathew’s apartment, has a lot of flags as decoration. To narrow down the apartments that we search, we will look for such kinds of apartments
Combining the above, now our xpath looks like
//street[@name='Baker Street']/billboard[text( )='Sell Your Old Stuff at OLX']/following::street[@direction='right']/apartment[contains(@decoration,'flags')]
- Now that we have narrowed down the apartment types, it’s time for us to select the house. Among the apartments, there may be N number of apartments, in block A, with number 602. To find the correct apartment, we need to get the descendent, of the apartment, narrowed down from step above
descendant::house[@block='A' and @Number='602']
Combining this with the xpath, that we have already created up to the apartment, we have the correct xpath or simply path to Mathew’s apartment as
//street[@name='Baker Street']/billboard[text( )='Sell Your Old Stuff at OLX']/following::street[@direction='right']/apartment[contains(@decoration,'flags')]/descendant::house[@block='A' and @Number='602']
So this is going to our final path to Mathew’s house. And if I follow, this path, I would be able to watch El Clasico, in his home, with a giant plasma screen, with full enthusiasm.