Hello Testers – as many readers are probably aware, both FirefoxFirebug and Chrome have a console panel for evaluating JavaScript, testing XPath expressions / CSS selectors (i.e. inspecting the DOM), and analyzing the HTML. To learn more about the Console, check out the following:

Google: http://code.google.com/chrome/devtools/docs/console.html

Firebug: http://getfirebug.com/commandline

The syntax used for inspecting the DOM of XPath and CSS is slightly different.

XPath syntax:

$x("")

CSS syntax:

$$("")

Given the code block:

<div><a href=”http://www.google.com/”>Google</a> , <a href=”http://www.amazon.com/”>Amazon</a></div>

The HTML output is:

GoogleAmazon

Some associated XPath and CSS selectors are:

$x(“//div[starts-with(@class,'element')]//a[contains(@href, 'google.com')]“)

$x("//a[contains(text(), 'Google')]")
$x("//div[@class='element-block']//a[last()]") selects Amazon
$x("//div[@class='element-block']//a[2]") selects Amazon
$$("a[href='http://www.google.com/']")
$$("a[href*='google']") * = Contains
$$("a[href^='http://www.google']") ^ = Begins With
$$("a[href$='.com/']") $ = Ends With
$$("div.element-block a[href*='google'] + a") selects Amazon  

As illustrated below, using the console is a fast and direct way to test CSS / XPath.

test xpath css chrome console Inspecting XPath Expressions and CSS Selectors using Firefox/Chrome

Hopefully, this helps expand your knowledge of XPath and CSS testing.