selenium - 无法使用 css 选择器找到元素

Question

使用 C# (.Net) 为 FF/IE 使用 Selenium Webdriver

下面是我的页面源代码，我正在尝试使用 CssSelector 从我的页面中查找/包含特定名称，我尝试使用以下代码但导致错误，有什么帮助吗？

//代码

driver.FindElement(By.CssSelector("td:contains('John John')"))

//错误：

e {"Unable to find element with css selector == td:contains('John John')"}  System.Exception {OpenQA.Selenium.NoSuchElementException}

//我的html代码：

 <div id="ctl00_ContentPlaceHolder1_AddeCardControl1_gv_ctl01_RecordCount" style="float:right; padding-right:10px; margin-top:3px;">
  <b>308</b> Items Found
 </div>
 </td>
</tr>
<tr class="item">
 <td align="center"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$gv','Select$0')">Edit</a></td>
 <td align="center" style="width:15px;"></td>
 <td>John John</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td><img src="check.png" alt='Active' style='display: ;' /></td>
 <td>9/7/2012 11:15:08 PM</td>
</tr>
<tr class="altItem">
 <td align="center"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$gv','Select$1')">Edit</a></td>
 <td align="center" style="width:15px;"></td>
 <td>John Schulz</td>
 <td>&nbsp;</td>
 <td>Visitors</td>
 <td>&nbsp;</td>
 <td><img src="check.png" alt='Active' style='display: ;' /></td>
 <td>9/7/2012 6:28:29 PM</td>
</tr>
<tr class="item">
 <td align="center"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$gv','Select$2')">Edit</a></td>
 <td align="center" style="width:15px;"></td>
 <td>Parker Smith</td>
 <td>&nbsp;</td>
 <td>Visitors</td>
 <td>&nbsp;</td>
 <td><img src="check.png" alt='Active' style='display: ;' /></td>
 <td>9/7/2012 6:01:28 PM</td>
</tr>
<tr class="altItem">
 <td align="center"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$gv','Select$3')">Edit</a></td>
 <td align="center" style="width:15px;"></td>
 <td>Test 123</td>
 <td>&nbsp;</td>
 <td>Visitors</td>
 <td>&nbsp;</td>
 <td><img src="check.png" alt='Active' style='display: ;' /></td>
 <td>9/7/2012 1:36:45 PM</td>
</tr>
<tr class="item">
 <td align="center"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$AddControl1$gv','Select$4')">Edit</a></td>
 <td align="center" style="width:15px;">

Answer 1

:contains 伪选择器不是 W3C CSS 选择器标准的一部分。因此，浏览器不支持使用它来选择元素。一些 JavaScript CSS 选择器引擎（例如 Sizzle，jQuery 使用的引擎）提供了一个 :contains 伪选择器，但不能依赖它的存在。

如果必须通过元素的文本内容来查找元素，此时唯一的解决方案是使用 XPath。在您的情况下如何找到这个的一个（非常糟糕的）示例如下：

IWebElement element = driver.FindElement(By.XPath("//td[contains(., 'John John')"));

请注意，更好的解决方案始终是让您正在自动化的应用程序为您需要查找的元素提供适当的 ID。您应该只作为最后的手段使用文本来查找元素。

Answer 2

使用 javascript 执行器单击元素可能会更好。我正在使用一个非常慢的 IE9 64 位模拟器，似乎单击某些按钮的唯一方法是使用 javascript 执行程序。

Answer 3

你可以试试这个

var webElements = (Driver.FindElements(By.XPath(elementXpath))).ToList();
webElements.FindIndex(item  => item.Text.Contains("John John").Click()

其中“elementXpath”是表“名称”中每个单元格的路径。所以你得到名字列表，然后找到一个匹配项。您将点击您的项目。

Answer 4

CSS 选择器在这里不是很有用，因为 CSS 选择器作用于 html 结构，即 web 元素的类型、关系和属性；它们不能很好地处理 html 内容，在本例中是内部文本内容“John John”。

但是，xpath 将适用于这项工作。您需要的函数是text()返回元素的内部文本内容：

//td[text()='John John']

所以你的 webdriver 代码应该是这样的：

driver.FindElement(By.xpath("//td[text()='John John']"));

PS 所有定位器在 Firefox 中使用Firepath验证。

Answer 5

您可以使用以下代码：

driver.FindElement(By.XPath("//td[contains(text(), 'John John')"));