如何使用 Selenium 的标准 CSS 选择器（nth-of-type 或 nth-child）选择嵌套元素？答案

【问题标题】：How to select nested elements using standard CSS selectors (nth-of-type or nth-child) for Selenium?如何使用 Selenium 的标准 CSS 选择器（nth-of-type 或 nth-child）选择嵌套元素？
【发布时间】：2013-05-09 07:34:57
【问题描述】：

如何使用 nth-child 或 nth-of-type 为 B（或 C）选择段落标签？我正在使用 Selenium WebDriver。

<tr>
    <td>
        <p class="myClass">A</p>
    </td>
</tr>
<tr>
    <td>
        <p class="myClass">B</p>
    </td>
</tr>
<tr>
    <td>
        <p class="myClass">C</p>
    </td>
</tr>

背景：我正在尝试使用 Selenium WebDriver 进行自动化测试，并且由于 nth(i) 仅适用于 IDE，因此我正在尝试确定如何使用标准 CSS 选择器获取元素。

选择第一个元素时，它有效，但选择第 n 个元素时无效。我认为这是由于嵌套造成的。
这不起作用：
.myClass:nth-of-type(2)（未找到定位器，根据 Selenium IDE）
.myClass:nth-child(2)（未找到定位器，根据 Selenium IDE）

【问题讨论】：

对我来说很好，见这里：jsfiddle.net/b2QmE

标签： css selenium selenium-webdriver css-selectors

【解决方案1】：

:contains() CSS 选择器功能不适合你吗？

driver.FindElements(By.cssSelector("p.myClass:contains('B')"));

回答：不，因为 :contains() 是一个 JQuery 伪函数。

如果您使用 C#，请为 JQuery 功能导入 SizSelCsZzz。然后你可以这样做： driver.FindElements(new ByJQuery.ByJQuerySelector("p.myClass:contains('B')", true));

另外，对于nth-child，它也是一个JQuery 伪函数。同样：

using SizSelCsZzz;

namespace YourNamespaceHere
{
   public class YourClass
   {
      By selectB = new ByJQuery.ByJQuerySelector("p.myClass:nth-child(2)", true);
   }
}

【讨论】：

【解决方案2】：

这适用于 Selenium WebDriver：

String css = ".myClass";
List<WebElement> list = driver.findElements(By.cssSelector(css));
WebElement e = list.get(n);

这并不理想，但它确实有效。

【讨论】：

n 应该是什么？
n 是要从元素列表中检索的元素的索引
@BoltClock - ragamufin 说了什么。

【解决方案3】：

p 标签没有兄弟元素，因为它们位于不同的列上。尝试在 tr 标签上使用 nth-child 伪类。例如，改变奇数行的背景：

table tr:nth(odd){
    background-color: #color-code;
}

【讨论】：

【解决方案4】：

我不知道 selenium（所以这可能没用），但如果您需要使用标准 CSS 选择器，您可以像这样选择“C”：

table tr + tr + tr > td > p {color:blue;}

【讨论】：

【解决方案5】：

用这个来选择B：

table tr:nth-child(2) td p {/*your styles here */}

【讨论】：