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.

1269-Image1.jpg

No. I can’t read it either. The actual wallchart can be downloaded below.

1269-Image2.jpg

For the same information but arranged by groups.

Downloads

Tags: ,

  • 158661 views

  • Rate
    [Total: 254    Average: 4.4/5]
  • Anonymous

    Missing download links
    The links to download the wallcharts are missing.

  • dirq

    Download links
    He says the links are at the bottom of the page, but in fact, they’re at the top next to the article title.

  • Phil Factor

    Quote from the article
    ‘The actual wallchart can be downloaded from the speech-bubble at the head of the article’ (quote from Michael’s article).
    I referred to this wallchart in my article ‘How to Import Data from HTML pages’ http://bit.ly/ek86Vg Without the wallchart, I wouldn’t have been able to finish the article!

  • Anonymous

    thanks!
    Michael,

    I love it, thanks!

    Peter

  • Anonymous

    download is easy
    just a click on the wallchart starts download too.
    p.

  • BugMeNot

    thanks and please update css no longer supports contains
    selenium no longer supports css contains.
    see:
    https://code.google.com/p/selenium/issues/detail?id=987

  • Александр Хотемской

    Would love to have this updated 🙁
    A lot was changed since then