selenium之CSS Selector定位

什么是CSS Selector？

CSS (Cascading Style Sheets) 是一种用于渲染 HTML 或者 XML 文档的语言，CSS 利用其选择器可以将样式属性绑定到文档中的指定元素。在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

Css Selector定位实际就是HTML的CSS选择器的标签定位。
详见：HTML之CSS

工具

• 谷歌浏览器可以使用chropath；
• 火狐可以使用chropath for firefox。

Css Selector使用方法

1、Css Selector支持ID、Class的定位 与HTML中CSS定位相同

# 号代表id 定位id为xx的标签
 
#i1
 
. 代表Class 定位class为xx的标签
 
.c1
 
Class定位还提供了多个Class定位 通过连续 . 来缩小范围
 
.c1.c2.c3

2、Css Selector支持标签定位

与Css相同 支持标签选择器，但并没有什么用，一个页面重复的标签太多
定位方式 ：直接输入标签名称

3、Css Selector支持任意属性定位

属性定位方式与css相同,直接中括号，加上属性就可以了
[name='n1']

4、属性定位不足以满足我们的定位需求，Css Selector提供了标签属性组合定位

与css 定位相同 等同于我们标签属性选择器
input[name='n1']
 
 
当与ID、Class 组合使用时书写方式更为简单 
input.c1
input#i1

5、Css Selector提供了多属性组合过滤

Css Selector 的多属性组合选择过滤 没有and 只需要多个[] 连接 就可以
 
select[name='city'][size='4'][multiple="multiple"]

6、同样Css Selector也支持层级关系定位

与Xpath的不同 Css Selector通过 > 来区分层级的界定
 
select>option[value='3']

7、Css Selector模糊匹配

^= 匹配元素属性以什么开头
input[value^="登"]
 
$= 匹配属性以什么结尾
input[value$="录"]  
 
*= 匹配属性包含什么值 input
[value*="录"]

CSS Selector所有的定位方法，详见：http://www.w3school.com.cn/cssref/css_selectors.asp