{"id":383,"date":"2014-06-15T16:12:23","date_gmt":"2014-06-15T20:12:23","guid":{"rendered":"http:\/\/qxf2.com\/blog\/?p=383"},"modified":"2017-06-14T01:59:27","modified_gmt":"2017-06-14T05:59:27","slug":"xpath-tutorial","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/xpath-tutorial\/","title":{"rendered":"The art of writing xpaths"},"content":{"rendered":"

Problem:<\/strong> Writing XPaths is hard and confusing when there are no unique identifiers<\/p>\n

XPath<\/a> (XML Path Language) is a query language for selecting nodes from Document Object Models<\/a> (DOM) like XML, HTML, etc. XPaths are frequently used with Selenium scripts to uniquely identify elements in page. This post is a descriptive tutorial on how to think about xpaths and write xpaths in the absence of unique identifiers.<\/p>\n

\n

Why this post? <\/h2>\n

In most web apps, testers do not find unique identifiers (like ids) to locate DOM elements easily. For a long time now, I have used both CSS selectors<\/a> and XPaths to uniquely identify DOM elements as part of our Selenium automation scripts. The standard XPath tutorials on the web cover the syntax and the terminology but do not cover the thought process behind arriving at an XPath in the absence of ids or other unique identifiers. Over the years, I found that despite my colleagues having access to Google<\/a>, I have had to spend a significant amount of my time teaching them art of writing good XPaths. While helping my fellow testers, I realized that the number one difficulty was to get the testers thinking correctly about XPaths. In this tutorial, I have decided to document the thought process behind arriving at an XPath when you do not have unique identifiers to work with. <\/p>\n

\n

Basics of XPath syntax <\/h2>\n

For newbies, I’ll give a quick run down of the basics of XPaths.<\/p>\n

1. XPaths usually begin with a double slash i.e., \/\/
\n2. reference html elements by its tag. So a link can be referenced by \/a
\n3. to reference attributes of a HTML element use the @ notation
\n4. text() and dot are special attributes of HTML elements: text() refers to the text within the element while dot is a substitute for ‘any attribute’
\n5. keywords contains<\/strong> and equals<\/strong> are useful for uniquely identifying nodes<\/p>\n

\n

The 3 most common XPath patterns<\/h2>\n

Most tutorials on XPaths will expose you to what I consider the three most common XPath patterns in a tester’s tool belt:
\n1. \/\/html_element[@id=”blah”]
\n2. \/\/html_element[@attribute=”value”]
\n3. \/\/html_element[contains(@attribute,”value”)]<\/p>\n

You can usually get some amount of Selenium automation working with just the above three patterns. But it is going to be a pain to maintain. I think XPaths get a bad rap simply because most testers do not evolve to using better XPaths. Here’s hoping we can change that! <\/p>\n

\n

The better way to write XPaths<\/h2>\n

In real life, things are rarely this straight forward. Not all nodes have ids or unique attributes. You need to come up with relative paths to known nodes and then proceed to your destination node. XPath axes<\/a> are a powerful tool and very useful in specifying relative position like parent, child, sibling, ancestor, descendant, etc. <\/p>\n

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. <\/p>\n

Scenario <\/h3>\n

Your friend Jose calls you up:
\nJose:<\/strong> Hey, want to checkout the new bar that opened near my place?
\nYou:<\/strong> Sure
\nJose:<\/strong> Drop by my place whenever and we can leave from here
\nYou:<\/strong> All I remember about your apartment was that it had a ton of flags as decoration. Remind me – how do I get to your place?
\nJose:<\/strong> Do you know Bobby Street?
\nYou:<\/strong> Yep
\nJose:<\/strong> Keep driving down on Bobby street. You will see a billboard that reads ‘Testing: Checking :: Chess: Checkers<\/strong>‘. Take the first right after that billboard. Keep driving and you should see my apartment to your left.
\nYou:<\/strong> What is your apartment number?
\nJose:<\/strong> I live in A-block and my apartment number is 602.<\/p>\n

\"xpath<\/a><\/p>\n

<\/p>\n

Guess what? You can now follow the directions rather easily even though each step of the directions above is non-unique. In your city, there are likely many billboards with the text ‘Testing: Checking :: Chess: Checkers<\/strong>‘ but on Bobby street there is possibly only one. There are likely many apartments on the street Jose lives but likely only one with flags as decoration. Further there could be many A-block, apartment number 602 in your city but within Jose’s apartment it is likely to be unique. You can make sense of this imprecise set of instructions because there is a pattern to the way your brain is solving the problem. <\/p>\n

Algorithm in real life <\/h3>\n

1. identify a known landmark closest to your destination (e.g.: Bobby street)<\/p>\n

2. identify a series of easily recognizable, fairly unique features between the landmark and your destination to get to the vicinity of your location (e.g.: billboard text, flags, apartment)<\/p>\n

3. use unique identifiers within this narrowed focus to zero in on the location (e.g.: A-block, apartment number 602 within the apartment with flags)<\/p>\n

PRO TIP:<\/strong> choose landmarks and identifiers that are less likely to change in the time frame that you plan to use them<\/p>\n

Applying the algorithm to write XPaths<\/h3>\n

If I converted the above directions to an XPath, it would look like this:<\/p>\n

1. Start with a known landmark closest to your destination:<\/strong><\/p>\n

 \/\/street[@name='Bobby Street'] <\/pre>\n
2. Identify the billboard<\/strong><\/p>\n
 billboard[text()='Testing: Checking :: Chess: Checkers']<\/pre>\n
   Sewing what we have till now, our XPath looks like this:<\/p>\n
\/\/street[@name='Bobby Street']\/billboard[text()='Testing: Checking :: Chess: Checkers']<\/pre>\n
3. Take the next right<\/strong> <\/p>\n
following::street[@direction='right'][1]<\/pre>\n
   The following<\/strong> keyword is a very useful xpath axes. Also, XPath indices begin at 1 and not zero.
\n   Sewing what we have till now, our XPath looks like this:<\/p>\n
\/\/street[@name='Bobby Street']\/billboard[text()='Testing: Checking :: Chess: Checkers']\/following::street[@direction='right'][1]\/<\/pre>\n
4. Identify the apartment<\/strong> (it has flags as decorations)<\/p>\n
apartment[contains(@decoration,'flags')]<\/pre>\n
   The keyword contains<\/strong> is often useful when equals is not enough.
\n   Sewing what we have till now, our XPath looks like this:<\/p>\n
\/\/street[@name='Bobby Street']\/billboard[text()='Testing: Checking :: Chess: Checkers']\/following::street[@direction='right'][1]\/apartment[contains(@decoration,'flags')]<\/pre>\n
5. Zero in on the location<\/strong><\/p>\n
descendant::house[@block='A' and @number='602']<\/pre>\n
   BTW, did you notice the other apartment on the same street? If you have searched for just house[@block=’A’ and @number=’602′], it is likely that you would have found a match in that apartment too. This is the reason that we had to narrow our focus, in Step 4, to the apartment with flags as decoration.
\n   The keyword  descendant <\/strong> is very useful when you have multiple children, grand-children of the same type.<\/p>\n
Putting it all together, the XPath you want is:<\/p>\n
\r\n\/\/street[@name='Bobby Street']\/billboard[text()='Testing: Checking :: Chess: Checkers']\/following::street[@direction='right'][1]\/apartment[contains(@decoration,'flags')]\/descendant::house[@block='A' and @number='602']\r\n<\/pre>\n
\n
And there you have it – a tutorial on the thought process behind writing XPaths. I hope you found it useful!  <\/p>\n
\n
P.S. 1:<\/strong> I have used a rather unusual approach to explaining XPaths – no HTML at all. Let me know your feedback<\/p>\n
P.S. 2:<\/strong> I am not going to write about CSS selectors because there is already a fantastic resource: http:\/\/flukeout.github.io\/<\/a><\/p>\n
P.S. 3:<\/strong> I have referenced 2 former world chess champions in this post. Can you guess which two?<\/p>\n
\n