Matching elements/Contains using CSSSelector

Question

I have very long page and i have extract the tr and td related to my question.

<tr>
<td colspan="2"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$dv$ctl01','')">Save</a>&nbsp;<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$dv','Cancel$-1')">Back</a></td>
</tr>
<tr>
.............
.............
</tr>
<tr>
<td colspan="2"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$dv$ctl08','')">Save</a>&nbsp;<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$dv','Cancel$-1')">Back</a></td>
</tr>

table#ctl00_ContentPlaceHolder1_.DetailsView tbody tr td a

gets me 4 matching elements

How can I select only the element which has "Save" ?

I have tried something like this:

table#ctl00_ContentPlaceHolder1_.DetailsView tbody tr td a:contains('Save')

does not work

`a:contains('Save')` should work. Unless there is something else you did not include in the question. — Alfero Chingono, Dec 10 '12 at 23:01
@adaptive No, `a:contains()` won't work with WebDriver. WebDriver only supports standard CSS selectors, and `:contains()` isn't part of the standard. — JimEvans, Dec 10 '12 at 23:10
Ooops!! That's what I get for not checking the tags... sorry — Alfero Chingono, Dec 10 '12 at 23:46

score 2 · Accepted Answer · answered Dec 10 '12 at 23:08

The :contains pseudoselector is not part of any level of the CSS selector standard. As such, it's not supported by By.cssSelector, so you can't do it using vanilla CSS selectors. You do have a few other options you could try.

You can loop through the elements returned by findElements, getting the text of each one, and breaking out of the loop when you find the one you want.
You can use XPath instead of CSS selectors.
You can create your own subclass of the By class that uses the Sizzle JavaScript CSS selector engine (often incorrectly called the "jQuery CSS selector engine") to use the Sizzle engine to find your elements, since Sizzle implements the non-standard psuedoselector.

score 0 · Answer 2 · answered Dec 10 '12 at 22:45

I've built a small test using what you've supplied, and filling in what I think is what you have outside of what you've supplied, and it is working.

<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-    ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">           
  </script>
  <script>

    $(document).ready(function() {
      $("#contentTable.tableClass tbody tr td a:contains('Save')").css("border", "2px     dotted blue");

    });
  </script>
</head>
<body style="font-size:62.5%;">

<table id="contentTable" class="tableClass">

  <tbody>
    <tr>
      <td colspan="2"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$dv$ctl01','')">Save</a>&nbsp;<a    href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$dv','Cancel$-1')">Back    </a>
      </td>
    </tr>
    <tr>
      <td colspan="2"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$dv$ctl08','')">Save</a>&nbsp;<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$dv','Cancel$-1')">Back     </a>
      </td>
    </tr>
  </tbody>

</table>

</body>
</html>

I've simplified your table id and class values, but otherwise I think your selector should be working. What are you trying to do with those elements once you have them selected?

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

If they are always the first element as your code then you could use the :first-child

table#ctl00_ContentPlaceHolder1_.DetailsView tbody tr td a:first-child

The xpath way would be

table#ctl00_ContentPlaceHolder1_.DetailsView tbody tr td a[text()='Save']

Otherwise as stated in CSS selector based on element text? there is not CSS way to target an element based on its text..

edited May 23 '17 at 12:03

Community

1
1

answered Dec 11 '12 at 00:41

Gabriele Petrioli

191,379
34
261
317

Matching elements/Contains using CSSSelector

3 Answers3