在selenium中使用css选择器进行元素定位

1.大家在使用selenium元素定位的时候，通常更多使用的是XPATH，css定位方式用得比较少

   但有时候css定位方式还是有一些优势的，

   优势1：一般情况下定位速度要比XPATH快

   优势2：语法要比XPATH更简洁

下面简要介绍一下css元素选择器的语法

常见语法

*	通用元素选择器，匹配任何元素
E	标签选择器，匹配所有使用E标签的元素
.info	class选择器，匹配所有class属性中包含info的元素
#footer	id选择器，匹配所有id属性等于footer的元素
E,F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E > F	子元素选择器，匹配所有E元素的子元素F
E + F	毗邻元素选择器，匹配紧随E元素之后的同级元素F （只匹配第一个）
E ~ F	同级元素选择器，匹配所有在E元素之后的同级F元素
E[att='val']	属性att的值为val的E元素 （区分大小写）
E[att^='val']	属性att的值以val开头的E元素 （区分大小写）
E[att$='val']	属性att的值以val结尾的E元素 （区分大小写）
E[att*='val']	属性att的值包含val的E元素 （区分大小写）
E[att1='v1'][att2*='v2']	属性att1的值为v1，att2的值包含v2 （区分大小写）
E:contains('xxxx')	内容中包含xxxx的E元素
E:not(s)	匹配不符合当前选择器的任何元素

例如这样一段html代码的网页

  

     

     

     

     

     

     

  

  

     

       

Heading

       

• Cat

       

• Dog

       

• Car

       

• Goat

     

   

匹配示例：

locator	匹配
css=div css=div.formdiv
css=#recordlist css=ul#recordlist
css=div.subdiv p css=div.subdiv > ul > p	Heading
css=form + div
css=p + li css=p ~ li	二者定位到的都是 Cat 但是storeCssCount的时候，前者得到1，后者得到4
css=form > input[name=username]
css=input[name$=id][value^=SYS]
css=input:not([name$=id][value^=SYS])
css=li:contains('Goa')	Goat
css=li:not(contains('Goa'))	Cat

2.css中的结构性定位

结构性定位就是根据元素的父子、同级中位置来定位，css3标准中有定义一些结构性定位伪类如nth-of-type，nth-child，但是使用起来语法很不好理解，这里就不做介绍了。

Selenium中则是采用了来自Sizzle的css3定位扩展，它的语法更加灵活易懂

Sizzle Css3的结构性定位语法

E:nth(n) E:eq(n)	在其父元素中的E子元素集合中排在第n+1个的E元素 (第一个n=0)
E:first	在其父元素中的E子元素集合中排在第1个的E元素
E:last	在其父元素中的E子元素集合中排在最后1个的E元素
E:even	在其父元素中的E子元素集合中排在偶数位的E元素 (0,2,4…)
E:odd	在其父元素中的E子元素集合中排在奇数的E元素 (1,3,5…)
E:lt(n)	在其父元素中的E子元素集合中排在n位之前的E元素 (n=2,则匹配0,1)
E:gt(n)	在其父元素中的E子元素集合中排在n位之后的E元素 (n=2，在匹配3,4)
E:only-child	父元素的唯一一个子元素且标签为E
E:empty	不包含任何子元素的E元素，注意，文本节点也被看作子元素

匹配示例：

例如还是段的代码

Heading

• Cat
• Dog
• Car
• Goat

locator	匹配
css=ul > li:nth(0)	Cat
css=ul > *:nth(0) css=ul > :nth(0)	Heading
css=ul > li:first	Cat
css=ul > :first	Heading
css=ul > *:last css=ul > li:last	Goat
css=ul > li:even	Cat, Car
css=ul > li:odd	Dog, Goat
css=ul > :even	Heading
css=ul > p:odd	[error] not found
css=ul > li:lt(2)	Cat
css=ul > li:gt(2)	Goat
css=ul > li:only-child css=ul > :only-child css=ul > *:only-child	[error] not found (ul没有only-child)
css=div.subdiv > :only-child	… … … …

3.

css中的结构性定位

结构性定位就是根据元素的父子、同级中位置来定位，css3标准中有定义一些结构性定位伪类如nth-of-type，nth-child，但是使用起来语法很不好理解，这里就不做介绍了。

Selenium中则是采用了来自Sizzle的css3定位扩展，它的语法更加灵活易懂

Sizzle Css3的结构性定位语法

E:nth(n) E:eq(n)	在其父元素中的E子元素集合中排在第n+1个的E元素 (第一个n=0)
E:first	在其父元素中的E子元素集合中排在第1个的E元素
E:last	在其父元素中的E子元素集合中排在最后1个的E元素
E:even	在其父元素中的E子元素集合中排在偶数位的E元素 (0,2,4…)
E:odd	在其父元素中的E子元素集合中排在奇数的E元素 (1,3,5…)
E:lt(n)	在其父元素中的E子元素集合中排在n位之前的E元素 (n=2,则匹配0,1)
E:gt(n)	在其父元素中的E子元素集合中排在n位之后的E元素 (n=2，在匹配3,4)
E:only-child	父元素的唯一一个子元素且标签为E
E:empty	不包含任何子元素的E元素，注意，文本节点也被看作子元素

匹配示例：

例如还是段的代码

  

     

Heading

     

• Cat

     

• Dog

     

• Car

     

• Goat

  

locator	匹配
css=ul > li:nth(0)	Cat
css=ul > *:nth(0) css=ul > :nth(0)	Heading
css=ul > li:first	Cat
css=ul > :first	Heading
css=ul > *:last css=ul > li:last	Goat
css=ul > li:even	Cat, Car
css=ul > li:odd	Dog, Goat
css=ul > :even	Heading
css=ul > p:odd	[error] not found
css=ul > li:lt(2)	Cat
css=ul > li:gt(2)	Goat
css=ul > li:only-child css=ul > :only-child css=ul > *:only-child	[error] not found (ul没有only-child)
css=div.subdiv > :only-child	… … … …