在 selenium 中选择 Nth-of-type
Posted
技术标签:
【中文标题】在 selenium 中选择 Nth-of-type【英文标题】：Selecting Nth-of-type in selenium 【发布时间】：2013-11-23 10:30:44 【问题描述】：我正在尝试使用 By.cssSelector 来获取具有如下结构的 c3 类的第 n 个 dom 元素：
<div class="c1">
<div class="c2">
<div class="c3">...</div>
</div>
</div>
<div class="c1">
<div class="c2">
<div class="c3">...</div>
</div>
</div>
<div class="c1">
<div class="c2">
<div class="c3">...</div>
</div>
</div>
测试我的 CSS 选择器时，我变得越来越困惑。 此选择器正确选择了 c2/c3 的第二个实例：
.c1:nth-of-type(2)
同时：
.c2:nth-of-type(2)
.c3:nth-of-type(2)
什么都不选。
更糟糕的是，将其翻译成 selenium，我似乎始终找不到所有 3 个版本。有很多替代方法可以选择这些元素（我可能只做 XPATH），但我对 nth-of-type 的缺乏了解让我发疯了。谁能提供关于为什么第二个 2 不起作用或纠正我对这个选择器基本缺乏理解的见解？
这已在 Chrome (29/30) 和 Firefox (24/25) 中出现
【问题讨论】：
你测试过哪些浏览器？ 【参考方案1】：我不确定您要选择哪个，但您应该更多地使用 :nth-* 伪类。这是一个 CSS 选择器，它使用 nth-child() 选择所有 3 个 c3
div.c1 div.c3:nth-child(1)
就像我说的，你还没有真正指定要选择哪一个。
但是我对 nth-of-type 缺乏了解让我发疯了。谁能提供关于为什么第二个 2 不起作用或纠正我对这个选择器基本缺乏理解的见解？
要记住的一点是，所有:nth-*() 伪类都依赖于它们的父类。让我翻译你的选择器：
.c1:nth-of-type(2)
找到任何具有 c1 类的第二个孩子。
在您的情况下，<body> 很可能是父母，所以...
<body>
<div .c1 />
<div .c1 /> // it highlights this one, because it's the 2nd child of the type ".c1"
<div .c1 />
</body>
现在让我解释一下为什么你的其他选择器不起作用。
.c2:nth-of-type(2) 和 .c3:nth-of-type(2) 也在查看父母的。由于您指定了父级，因此它期望 <body> 作为父级。在您的情况下，<body> 不是父级.. <div .c1 /> 是。实际上，该选择器正在寻找 DOM -
<body>
<div .c1 />
<div .c2 /> // this **would** be the second nth-of-type, but it's not really this way.
<div .c1 />
</body>
在http://cssdesk.com 上使用不同的 css 选择器和伪类，这对您自己积极地进行实验非常有帮助。你会想办法的。
【讨论】：
"查找任何具有 c1 类的第二个孩子。"谢谢！那是我的误解。我将其解释为，在所有 .c1 类中，样式为 2nd。 是的 -:nth-* 伪类是一个非常有趣的世界.. 尤其是当您与 n 混淆时！ （例如：nth-of-type(2n+3)）。和他们一起玩会很有帮助:)
@wave 这是对 :nth- 选择器如何工作的常见误解。你不是唯一的，所以不要难过；）以上是关于在 selenium 中选择 Nth-of-type的主要内容，如果未能解决你的问题，请参考以下文章
在 python 中使用 selenium 从下拉菜单中选择多个选项
如何在 Python 上使用 Selenium 在日历中选择一天？