Unable to find CSS selector by :contains()

Question

Unable to find CSS selector using :contains().

I have followed the instructions from https://www.browserstack.com/guide/css-selectors-in-selenium at #5 – Inner text but still, no result is shown, Can someone please help me/Tell me how to find Web element using text, CSS only

Here is Sample Dom

<ul id='id'>
    <li class='class'>
        <a class='class_class2' href="/Myaccount/summary">"Summary"</a>
    <li class='class'>
        <a class='class_class2' href="/Myaccount/Profile">"Profile"</a> 
</ul>

Here : a:contains('Summary')

score 2 · Answer 1 · edited Jan 06 '21 at 07:49

2

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

https://stackoverflow.com/a/4781167/6793637

Contains: is no longer available

you should use xpath to find elements using innerText

xpath:

   //a[contains(text(),"Summary")]

You can get exact match as

   //a[text()="Summary"]

edited Jan 06 '21 at 07:49

Cosmin

2,354
2
22
39

answered Jan 06 '21 at 00:31

PDHide

18,113
2
31
46

undetected Selenium · Answer 2 · 2021-01-07T22:22:05.153

The :contains pseudo-class isn't in the CSS Spec and is not supported by either Firefox or Chrome (even outside WebDriver).

You can find a couple of relevant detailed discussion in:

Alternative

To locate the element with text as Summary you can use either of the following css-selectors:

Using first-child:
```
ul#id li:first-child > a
```
Using nth-child():
```
ul#id > li:nth-child(1) > a
```

tl; dr

References:

Unable to find CSS selector by :contains()

2 Answers2

Alternative

tl; dr