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
//div[@class='foo']
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 <div class='foo bar'> 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 + " ')";
}
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?
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.
Hi
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...
Thanks
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.
Probably should have put the link to the project in my comment. Here it is http://code.google.com/p/cssselectors/