Forum Discussion

azakharov's avatar
azakharov
Contributor
11 years ago

CSS :contains selector




Hi


 


Are there any plans on implementing CSS :contains selector?


It's one the simplest and my most favorite selector. In many cases I don't have any id, class, value, name etcto work with so I have to use text.


For example:  a:contains("Log Out").


 


I can achieve the same thing with XPath text() secector but I would prefer to use CSS as it's usually faster and more elegant.


 


Thank you.

  • TanyaYatskovska's avatar
    TanyaYatskovska
    SmartBear Alumni (Retired)
    11 years ago

    Hi Andrey,


     


    It looks like the W3C Selectors Level 3 specification recommends using the following selector instead of the :contains pseudo-class:


    [att*=val]


    Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.


     


    It works in TestComplete.

  • azakharov's avatar
    azakharov
    Contributor
    11 years ago
    Thank you Tanya. It's a great article but it seems that ":contains" CSS pseudo class is not supported currently. Is there any chance it might be included with the next release? Thanks!
  • azakharov's avatar
    azakharov
    Contributor
    11 years ago
    Thanks Tanya! This aproach works almost everytime except for situations when there is no reliable attribute and value to work with.



    For example here's css path to find cell in a table:

    html body table.frame_table tbody tr td.frame_body div#divDashBody table.dataGrid tbody tr#row.datacell2 td

    The problem is this table is dynamic i.e. what you locate by this css path now might not be the same next minute.



    The only reliable way to find cell is to use it's text content. In other words what this cell :contains. Currently I use xPath text()='some text' locator for this situations but I like locating elements by CSS locators way more :)
  • anand9796's avatar
    anand9796
    New Contributor
    6 years ago

    :contains() selector selects elements containing the specified string.

    The string can be contained directly in the element as text, or in a child element.

    This is mostly used together with another selector to select the elements containing the text in a group.

     

    Note: The text is case sensitive.