selenium吧 关注：1,644贴子：3,238
- 4回复贴，共1页
不感兴趣
开通SVIP免广告
下面是 颓颓熊 的友情翻译~~
闲来翻译一下
这篇博文将向你显摆一些高级的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>如果我们想在文字列中选择第四行的元素（Goat），我们能用nth-type，在下面这个例子里，我们会选择到Goatcss=ul#recordlist li:nth-of-type(4)
如果我们选择第四个元素，且他只是一个li元素，我们能用一个过滤器（filtered）nth-child来选择Carcss=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选择器，因为它极大的简化了我的测试代码。
闲来翻译一下
这篇博文将向你显摆一些高级的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>如果我们想在文字列中选择第四行的元素（Goat），我们能用nth-type，在下面这个例子里，我们会选择到Goatcss=ul#recordlist li:nth-of-type(4)
如果我们选择第四个元素，且他只是一个li元素，我们能用一个过滤器（filtered）nth-child来选择Carcss=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选择器，因为它极大的简化了我的测试代码。
