XPath, CSS, DOM and Selenium: The Rosetta Stone

Some programming conventions are best represented in a chart. Nobody will claim that XPath or CSS are entirely intuitive, as they are terse, economical ways of identifying elements in a hierarchy. However, a chart with recipes and examples is a different matter. Suddenly, apps like Selenium IDE are made easier.

A little learning is a dangerous thing." [Alexander Pope, An Essay on Criticism]

Have you absorbed some knowledge of XPath or CSS or DOM, and tried to put it to use, and then realized that you do not know all the right incantations? Curiously, these three technologies are all designed to do similar things in selecting elements within markup, so it is possible to illustrate how you express the same target in each technology. The (XPath | CSS | DOM | Selenium) Rosetta Stone and Cookbook brings you all the recipes you need to be productive in each technology, and helps you to transfer your knowledge between them.

XPath, CSS, and DOM are a fairly diverse set of technologies yet they have quite a bit in common. Each provides powerful syntactic structure to select elements, XPath operating on general XML (including well-formed HTML), while CSS and DOM operate strictly on HTML. The wallchart shows you the proper syntax to specify selection locators in each of the three technologies. And because of their parallel nature, the wallchart is also organized as a cross-reference so you can leverage what you know in one of these technology towards another.

Finally, the wallchart cuts a swath across these three primary technologies to provide a Selenium perspective, showing you the idiosyncrasies of each that you need to know to apply those technologies with the Selenium web testing platform. Exceptions to the standard rules are highlighted and special Selenium syntaxes are provided. All the recipes, except those specifically noted, may be tested directly in Selenium IDE to see how they work. A validation test suite provided for the wallchart itself is a great place to start your experimentation!

Because your preferred format for a reference could differ from the next person's, you have two versions of the wallchart available here for download; they differ dramatically in style but are identical in content.

No. I can't read it either. The actual wallchart can be downloaded from the speech-bubble at the head of the article.

For the same information but arranged by groups.