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

Posted 2023-03-06

【中文标题】如何使用 Selenium 的标准 CSS 选择器（nth-of-type 或 nth-child）选择嵌套元素？

【英文标题】：How to select nested elements using standard CSS selectors (nth-of-type or nth-child) for Selenium?

【发布时间】：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

【参考方案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 */