A way to match on text using CSS locators

Question

So I use xpath locators and slowly converting to CSS.
I haven't found a way to do an exact match based on text.

For example converting //a[text()='Log Out'].

I know you can do css=a:contains('Log Out') but I want to match exactly to the text. Also I know I can do link=Log Out but looking for a solution with CSS.

Answer 1

css=a[text='Log Out'] or a[innertext='Log Out']

Can you please try this one out?

Or if that doesn't work and you still don't want to use xpath because it's slow, you can always try: link=Log Out. That's still better then xpath.

EDIT:

So i found a possible solution for you mate. If you are trying to find an exact String you could always use Regular expression like this:

css=div:contains(“^ab$”) 

Just replace div with a and there you go. This will find ONLY AB in whatever text div it looks for. OFC if you have more then one links with text AB (which is a bad thing :P ) then it will find them all..

Try this and see if it helps. :)

Answer 2

This is a nice place for a few CSS selectors.

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Thought it might be useful for people following this thread.

Answer 3

I might miss something, but the following two work (with <div class="item"><div class="text">Trouble</div>):

css=div.item > div.text:contains("Trouble")
//div[@class='item']/div[@class='text' and text() ="Trouble"]

However this one does not:

css=div.item > div.text:contains("^Trouble$")

Does ^$ really have its regex meaning in css?