Selenium Tips: CSS Selectors

这篇博文将向你显摆一些高级的CSS规则和伪类（注：定义一些链接样式的东东，稍后有空研究）来帮助你从XPATH 选择器转向CSS，一个更兼容所有浏览器的方式。

 下个节点（Next sibling）

第一个例子对游历元素列表有用，比如表单（form）或者文字列（ul）元素，下个节点（next sibling） 将告诉selenium 去找页面上同一个父节点中下一个临近的元素。让我们来看一个利用表单（form）去查找username后临近元素的例子。

<form>
<input class="username"></input>
<input class="alias"></input>
</form>

 让我们手把手写一个css 选择器，它会让我们选择一个username后的input，既，类名是alias的input，但如果页面元素重新排列后会选择到另一个完全不同的东东。

css=form input.username + input

 注：如果要选择username的input的话，so easy，css=form input.username 就可以了。

属性值（Attribute values）

如果你想要元素的子节点们，你能在selenium中使用一种属性选择器，并基于它来选择你要的东西。下面我们来看个选择表单（form）中选择“username”而不需要使用类名（class）的方法。

<form>
<input name="username"></input>
<input name="password"></input>
<input name="continue" type="button"></input>
<input name="cancel" type="button"></input>
</form>

只要用我们的方法就可以轻松的选择username元素，哪里不会点哪里，而不用类名或者ID号。

css=form input[name='username']

这个方法甚至可以链接多个属性值，更准确的满足我们的选择

css=input[name='continue'][type='button']

这个例子，selenium会在input（name=“continue” 并且 type=“button”）上玩耍。

选择一个具体的匹配（Choosing a specific match）

Selenium中的CSS选择器允许我们更细致的浏览列表下的元素。如果我们有一个文字列（ul）并且我们在没有任何其他元素的辅助下，想选择第四行（li）元素，我们需要使用 nth-child 或者 nth-of-type

<ul id="recordlist">
<p>Heading</p>
     <li>Cat</li>
     <li>Dog</li>
     <li>Car</li>
     <li>Goat</li>
 </ul>

如果我们想在文字列中选择第四行的元素（Goat），我们能用nth-type，在下面这个例子里，我们会选择到Goat

css=ul#recordlist li:nth-of-type(4)

如果我们选择第四个元素，且他只是一个li元素，我们能用一个过滤器（filtered）nth-child来选择Car

css=ul#recordlist li:nth-child(4)

注意，如果你不为nth-child具体定义一个类型，它会无视类型为你选择第四个子节点，在selenium中这个可能对测试css层更有用处，下面这个例子会选中car。

css=ul#recordlist *:nth-child(4)

字符串匹配（Sub-string matches）

在Selenium中CSS还有一个又去的功能，允许字符串中匹配一些特殊符号比如 ^=,$=,*=。我将定义他们，然后给出一些例子：

^=	匹配前缀
$=	匹配后缀
*=	匹配字符串

css=a[id^='id_prefix_']

匹配一个id开头是id_prefix_的链接

css=a[id$='_id_sufix']

匹配一个id结尾是id_sufix的链接

css=a[id*='id_pattern']

匹配一个id包含是id_pattern的链接

内文字匹配（Matching by inner text）

最后，来介绍一个最有用的伪类 :contains() ，它将包含文字块的内容匹配出来

css=a:contains('Log Out')

这个例子将会在页面上找出‘Log Out’按钮无论它在哪儿。这是迄今为止我最喜欢的CSS选择器，因为它极大的简化了我的测试代码。