An example traversal

The element retrieval and traversal can be done quite easily by what is known as a browsers console. In all the three browsers, the console can be invoked by pressing the F12 key on the keyboard. In Chrome, the Elements tab will help in finding the XPath. One can traverse back and forth in the DOM using '/..' and ('//' or '/'). Let's see what the Chrome console looks like.

The following snapshot shows the Chrome console with the username field highlighted because we tried to find an element through it's XPath . In order to search for any element, just press Ctrl + F on the console. A search box opens where you can type the XPath:

A similar console in Internet Explorer is called Developer Options and in Firefox it is called Firepath. In Firefox, one must remember to first add the firebug plugin from the Firefox plugins page (go to the Tools | Add-ons menu and then select Add-ons from the left pane). Only then can Firepath be accessed using the F12 key.

Apart from the consoles, which come built-in with the browsers, there are a few extensions such as XPath helper in Chrome and MRI in Internet Explorer. MRI is a bookMarklet for IE. One can get it from http://westciv.com/mri/ as a free installation. All the instructions are available on this website.