第 n 个类型的 CSS 选择器答案

【问题标题】：nth-of-type css selector第 n 个类型的 CSS 选择器
【发布时间】：2012-12-31 19:23:24
【问题描述】：

下面是我的 HTML 页面的 sn-p：

<td id="Platinum" align="center" width="16%">
    <div></div> 
    <a>link1</a>
</td>
<td></td>
<td id="Platinum" align="center" width="16%">
    <div></div>
    <a>link2</a>
</td>
<td id="Platinum" align="center" width="16%">
    <div></div>
    <a>link3</a>
</td>

这里我要选择 id='platinum' 的第三个 td 元素

我尝试的是driver.findElement(By.cssSelector("#platinum:nth-of-type(3)"));。

和

driver.findElement(By.cssSelector("td[id='platinum']:nth-of-type(3)"));

两者都不知道如何使用id='platinum' 选择第三个 td

【问题讨论】：

那么什么浏览器和什么版本的 Selenium？
为什么他们都共享同一个ID？
@Arran：我使用的是 Firefox 11.0 和 Selenium 2.28.0
@BoltClock：我不知道为什么，但他们共享相同的 id...
元素 id 必须是唯一的！该网站应该使用一个类。

标签： selenium webdriver css-selectors selenium-webdriver

【解决方案1】：

有一个没有 ID 的空 td，这会干扰 :nth-of-type() 计数。选择器的意思是“nth td element”，而不是“nth td element with id='platinum'”。因此，具有该 ID 的第三个td 实际上是整行中的第四个td。

无法使用 CSS 选择器选择具有特定 ID 的第三个 td 元素。您应该改用 XPath：

driver.findElement(By.xpath("//td[@id='Platinum'][3]"));

【讨论】：

By.cssSelector(td[id='platinum']:nth-of-type(1)) 工作正常
那是因为它是第一个 td 并且它具有该 ID。但这不是您在问题中寻找的元素，所以我不确定您的意思是什么。

【解决方案2】：

首先。你不能有多个同名的ID。你应该使用类。然后您可以使用相同的方法再次尝试，但使用类。代码将如下所示：

<td class="Platinum" align="center" width="16%">

【讨论】：

感谢您的快速回答。你所说的是写，但我正在测试以下 url franchising.com/find_a_franchise 这里的项目有上面提到的具有相同 ID 的 HTML

【解决方案3】：

补充一下，如果你在 JQuery 中尝试过这个，你可能会得到相同的结果。 “#id”可能是使用 document.getElementByID() 函数的快捷方式，该函数只会返回带有 ID 的第一个元素，因为 ID 在给定文档中是唯一的。

【讨论】：