使用 CSSSelector 匹配元素/包含答案

【问题标题】：Matching elements/Contains using CSSSelector使用 CSSSelector 匹配元素/包含
【发布时间】：2012-11-28 09:53:58
【问题描述】：

我的页面很长，我已经提取了与我的问题相关的 tr 和 td。

<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

给我 4 个匹配的元素

如何只选择具有"Save" 的元素？

我尝试过这样的事情：

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

没用

【问题讨论】：

你能和我们分享一下这张桌子吗？
a:contains('Save') 应该可以工作。除非您没有在问题中包含其他内容。
@adaptive 不，a:contains() 不适用于 WebDriver。 WebDriver 仅支持标准 CSS 选择器，:contains() 不是标准的一部分。
糟糕！这就是我不检查标签的结果......对不起

标签： html css css-selectors webdriver selenium-webdriver

【解决方案1】：

:contains 伪选择器不属于任何级别的 CSS 选择器标准。因此，By.cssSelector 不支持它，所以你不能使用 vanilla CSS 选择器来做到这一点。您确实可以尝试其他一些选择。

您可以遍历findElements 返回的元素，获取每个元素的文本，并在找到所需的元素时跳出循环。
您可以使用 XPath 代替 CSS 选择器。
您可以创建自己的 By 类的子类，该类使用 Sizzle JavaScript CSS 选择器引擎（通常被错误地称为“jQuery CSS 选择器引擎”）来使用 Sizzle 引擎来查找您的元素，因为 Sizzle 实现了非-标准伪选择器。

【讨论】：

【解决方案2】：

我使用您提供的内容构建了一个小型测试，并填写了我认为您提供的内容之外的内容，并且它正在工作。

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

我已经简化了您的表 id 和类值，但除此之外我认为您的选择器应该可以工作。选择这些元素后，您打算如何处理它们？

【讨论】：

【解决方案3】：

如果它们始终是您的代码的第一个元素，那么您可以使用:first-child

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

xpath 方式是

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

否则，如 CSS selector based on element text? 所述，没有 CSS 方法可以根据元素的文本定位元素..

【讨论】：