What tool can I use to test the :contains() CSS3 pseudo-class in a browser?

Question

I am trying to develop CSS selectors to use with Selenium. In particular I want to use the pseudo-class :contains(). Although the W3 has a draft of CSS3 with :contains() it appears that the final version didn't include it.

I am using Chrome's tools to help me check my CSS selectors and make sure I am doing it right. Chrome doesn't appear to implement :contains(), which is understandable.

Is there a tool that I can use that will allow me to try out selectors that use :contains() on our webpages?

I am using a Mac with Lion. I am also potentially limited to using Firefox 3.5.7 (I was told to hold off on updating for now).

Answer 1

jQuery's selector engine also implements the :contains() pseudo-class. It is to my knowledge that jQuery and Selenium implement it the same way.

I'm not sure how you would be able to test it on sites that don't make use of jQuery, but on sites that do, it's just a matter of firing up your browser's JavaScript console, and running jQuery selectors in the console.

Here's an example with viewing this very Stack Overflow question on Chrome's JavaScript console (you may get different results depending on whether you're logged in or not):

> $("#mainbar div[id]:contains('selector')").get() /* DOM objects with .get() */

[<div class=​"question" id=​"question">​…​</div>​, <div id=​"answers">​…​</div>​, <div id=​"answer-9007154" class=​"answer">​…​</div>, <div id=​"answer-9008184" class=​"answer">​…​</div>​]