cancel
Showing results for 
Search instead for 
Did you mean: 

CSS :contains selector

Contributor

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.

5 REPLIES 5
Community Manager

RE: CSS :contains selector


Hi Andrey,


 


There are special methods in TestComplete that allow searching for the target object based on CSS selectors. Refer to the "Finding Web Objects Using CSS Selectors" article for more information.


 

---------
Tanya Gorbunova
SmartBear Community Manager

Did my reply answer your question? Give Kudos or Accept it as a Solution to help others. ⬇️⬇️⬇️
Contributor

RE: CSS :contains selector

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!
Community Manager

RE: CSS :contains selector


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.

---------
Tanya Gorbunova
SmartBear Community Manager

Did my reply answer your question? Give Kudos or Accept it as a Solution to help others. ⬇️⬇️⬇️
Contributor

RE: CSS :contains selector

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 🙂
New Contributor

Re: CSS :contains selector

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

MVC Developer at iFour Technolab Pvt Ltd
http://www.ifourtechnolab.com/
New Here?
Join us and watch the welcome video:
Announcements
Top Kudoed Authors