在硒中选择Nth-of-type [英] Selecting Nth-of-type in selenium
问题描述
我试图使用By.cssSelector以类c3获取第n个dom元素,结构如下:
I'm trying to use By.cssSelector to grab the nth dom element with class c3 with a structure like this:
<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的第二个实例:
Testing my CSS selectors, I'm becoming increasingly confused. This selector selects the 2nd instance of c2/c3 correctly:
.c1:nth-of-type(2)
while:
.c2:nth-of-type(2)
.c3:nth-of-type(2)
没有选择。
更糟糕的是,将它转换为selenium,我似乎一直没有找到任何东西。有很多替代方法来选择这些元素(我可能只是做XPATH),但我缺乏对nth-of-type的理解驱使我疯了。任何人都可以提供洞察力,为什么第二2不工作或纠正我基本缺乏理解在这个选择器?
Even worse, translating this into selenium, I seem to consistently find nothing for all 3 versions. There are plenty of alternative ways to select these elements (I'll probably just do XPATH), but my lack of understanding on nth-of-type is driving me crazy. Can anyone offer insight to why the second 2 don't work or correct my basic lack of comprehension on this selector?
编辑:这是在Chrome(29/30 )和Firefox(24/25)
This has been in Chrome (29/30) and Firefox (24/25)
推荐答案
我不太确定哪个选择,但你应该玩:nth- *伪类。这里是一个CSS选择器,使用 nth-child()选择所有3个c3。
I'm not enirely sure which one you want to select, but you should play around more with the :nth-* pseudo-classes. Here is a CSS selector that selects all 3 c3's using nth-child()
div.c1 div.c3:nth-child(1)
没有真正指定你要选择哪一个。
Like i said, you haven't really specified which one you want to select.
但是我对nth-of-type的理解不够激励我疯狂。谁能提供洞察,为什么第二2不工作或纠正我对这个选择器的基本缺乏理解?
but my lack of understanding on nth-of-type is driving me crazy. Can anyone offer insight to why the second 2 don't work or correct my basic lack of comprehension on this selector?
请记住,所有的:nth - *()
伪类都依赖于他们的父母。让我翻译您的选择器:
One thing to keep in mind, is all of the :nth-*()
pseudo-classes are dependent on their parents. Let me translate your selector:
.c1:nth-of-type(2)
找到第二个子级别为c1的类别。
Find anything with a class of c1 that is a second child.
在您的情况下,< body>
很可能是父级,所以...
In your case, <body>
was most likely the parent, so...
<body>
<div .c1 />
<div .c1 /> // it highlights this one, because it's the 2nd child of the type ".c1"
<div .c1 />
</body>
现在让我解释为什么你的其他选择器不工作。
Now let me explain why your other selectors are not working.
.c2:nth-of-type(2)
和 .c3:nth-of-type(2) / code>也在查看父级的。因为您要指定父级,所以期望
< body>
作为父级。在您的情况下,< body>
不是父级.. < div .c1 />
是。实际上,该选择器正在寻找DOM -
Both .c2:nth-of-type(2)
and .c3:nth-of-type(2)
are looking at the parent's as well. since you are specifying a parent, it's expecting <body>
as the parent. In your case, <body>
isn't the parent.. the <div .c1 />
is. In reality, that selector is looking for the DOM -
<body>
<div .c1 />
<div .c2 /> // this **would** be the second nth-of-type, but it's not really this way.
<div .c1 />
</body>
使用不同的css选择器和伪类在 http://cssdesk.com 这是非常有帮助的自动实验。你会明白。
Play around with the different css selectors and pseudo-classes at http://cssdesk.com it's very helpful to actively experiment on your own. you'll figure it out.
这篇关于在硒中选择Nth-of-type的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!