A way to match on text using CSS locators

  • 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.

  • Hannibal

    Hannibal Correct answer

    9 years ago
    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. :)

    Neither of those work unfortunately. I know I can use link=Log Out but just seeing if there was a solution in CSS.

    Sorry to hear that :( Unfortunately I don't think CSS has match exact param. But I might be mistaken. Hope you find an answer soon mate. :) Cheers.

    Sorry, I made a mistake... please find edited answer... hope THAT helps. :)

    Wow, that worked! I really didn't think it would. Nice job proving me wrong.

    Awesome! :) Glad to hear that. And glad i could help. Cheers! :)

    I tried both single quote /double quote around the search text but don't get it working. Did I miss something :-/ I was using Selenium IDE to test my locator

    Ooh... Yeah.. This probably only works when using the RC. I don't know 'bout the IDE. It doesn't have much of the support of programming languages. :(

    :contains() is not part of the current CSS3 specification so it will not work on all browsers, only ones that implemented it before it was pulled. (see http://www.w3.org/TR/css3-selectors)

    aww. so there is no contains now is that right? ugh.

    The relevant section of the spec is here: Blank. I haven't found any way in CSS to select by element inner text. When I need to do this, I either use XPath, or I select a group of elements by CSS and then filter by the contained text (which is slower, however).

  • 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.

    nice explanation of differences, thanks for the link

    Its very error prone sharing a link. Content of that link could change.

  • For those who are looking to do Selenium css text selections this script might be of some use

    Trick is to select parent of element of one that you are looking for and then search for child that has the text.

    public static IWebElement FindByText(this IWebDriver driver, string text)
    {
        var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
        var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
        return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
    }
    

    this will return first element if there is more than one since it's always one element in my case.

    This looks to be dependent on jQuery being available to execute the javascript?

    @David it absolutely is, but it should be possible to rewrite it in pure JavaScript.

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM