Selenium, XPath, and Firebug

Armed with Selenium, Xpath, and Firebug you're ready to automate almost any web test case. Looking at the Selenium Reference guide most of the actions take a locator. The easiest locator to use is the id attribute of the element you are performing the action on. If you or you're team are developing with automated web tests in mind, then there should be an id on all the significant elements. If there is no id on the element, don't fret you can use my next favorite locator: XPath.

Here's a tutorial to XPath if you are not familiar with the language.

...

Okay so now you've got your selenium script and the xpath of that link inside the table you want to click (for example). You run your selenium script and it errors saying the element you're trying to click does not exist or could not be found. You go back to your script and try to figure out what's wrong with your XPath expression

selenium.click("//table/td/a[contains(.,'Important link')]");

In my head I'm thinking "Click on the cell that contains the link that says Important link". What the heck is wrongs with this code?!? After trial and error you figure out it's missing the tr in the path

selenium.click("//table/tr/td/a[contains(.,'Important link')]");

When I first started with XPath and Selenium I would spend hours developing the XPath expression, run the selenium test, watch it fail on the XPath command, edit it, and repeat till it worked. This was an inefficient use of time and brain power.

That's when Firebug came in to save the day. Firebug has an awesome console where you can do javascript debugging and object inspection. Using the console you can test your XPath expression and determine if the element actually exists before putting it into your selenium script. To use it navigate to the page you want to test and then open up firebug. Click on the console tab, then click on the little red triangle pointing upward to expand the console. Inside the console you can write javascript to evaluate your XPath expression. Fortunately firebug comes with a built in function that evaluates XPath expressions, $x.

Here's the snippet of code I use

var node = $x( [your xpath expression here] );
console.dir(node);

Click run and if your XPath is valid it should return the dom element allowing you to inspect it. If your XPath is invalid it won't return anything. Here's a screen shot





Now you can test your XPath independently of your selenium script and be sure that your locator is correct. This will save you lots of time and increase your confidence in what your selenium actions are doing.