Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

XPath CSS Class Matching

I’m writing Selenium tests again, which means a lot of XPath. Here’s a trick I learned thanks to this article on Push Button Paradise.

The problem is, how do you write XPath that matches one class in a multi-class element like

<div class='foo bar'>

? The standard XPath equality operator matches a full string, so


won’t work. The solution is arcane but I promise it works:

//div[contains(concat(' ',normalize-space(@class),' '),' foo ')]

Note that there must be spaces on either side of the class name ‘foo’.

Since this is quite a mouthful, I’ve extracted it into a helper method. Here it is in Java:

 * Generates a partial xpath expression that matches an element whose 'class' attribute
 * contains the given CSS className. So to match &lt;div class='foo bar'&gt; you would
 * say "//div[" + containingClass("foo") + "]".
 * @param className CSS class name
 * @return XPath fragment
protected static String containingClass(String className) {
  return "contains(concat(' ',normalize-space(@class),' '),' " + className + " ')";

  1. Joseph Palermo says:

    Good to know.

    Something I don’t know though: Assuming I’m using a version of Selenium that supports CSS selectors, is there anything I can do with XPath that CSS can’t do?

  2. Alex Chaffee says:

    Yes, XPath is more powerful and there are a few things you can do with it that you can’t with CSS Selectors. Most notably, CSS is lacking a [parent selector]( and since on this particular gig I’m layering tests on top of an existing app it’s easier for me to use XPath’s “..” than to go in and change the app to put an id on the parent.

    But you should definitely consider using CSS Selectors since their syntax is clearer and more concise for the 95% of real-world cases you will actually encounter, assuming your HTML is peppered with enough unique _id_ or _class_ attributes to cut down on the XPath spaghetti.

  3. Anwarul Kabir says:


    Can some one point to me some documents on using CSS query with Selenium IDE. I am currently using xpath to do the test but my team lead want me to change it and use css selectors. So I am looking for some document that will show me the step by step process…


  4. Rich says:

    Hey, I haven’t really been pushing this and it’s been a while since I worked on it, but I did develop a library for doing CSS selections on arbitrary XML documents. I’m pretty sure I’ve implemented all of the CSS3 selectors. About the only thing that I haven’t done yet is any kind of performance tuning or optimizations. But I’d be interested in feedback.

  5. Rich says:

    Probably should have put the link to the project in my comment. Here it is

  6. Hadas says:

    Nice post!

  7. Oleg says:

    Hi! Thanks for the “contains” solution, really helps me! :)

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *