【WebDriver】selenium使用CSS定位页面元素

一、CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)

CSS 选择器参考手册：http://www.w3school.com.cn/cssref/css_selectors.asp

二、定位实例

1、以如下html定位为例：

 
  
 
 
  

    

        
        
        
        
        
        
    
    

        baidu
        

            
Heading
            
Cat
            
Dog
            
Car
            
Goat
        
    
  
 

 

2、CSS匹配实例：

cssSelector	匹配
css=div
css=div.formdiv
css=#recordlist css=ul#recordlist
css=div.subdiv p	Heading
css=div.subdiv>ul>p	Heading
css=form+div
css=p+li	Cat
css=p~li	Cat 得到4个li中的第一个
css=form>input[name=username]
css=input[name$=id][value^=SYS]
css=input[value*='SYS']
css=a:link	baidu
css=input:first-child
css=input:last-child
css=li:nth-child(2)	Cat 因为这个li是ul下的第二个元素，所以是child（2）
css=:root

csdn表格不显示边框，所以截个图好看点：

三、XPATH和CSS定位比较

  还是以上面的html为例：

定位方式	XPath	CSS
标签	//div	div
By id	//div[@id='recordlist']	div#recordlist
By class	//div[@class='subdiv'] //div[contains(@class,'subdiv')]	div.subdiv
By 属性	//input[@name='username']	input[name=username] input[name^=user] input[name$=name] input[name*=erna]
定位子元素	//ul[@id='recordlist']/* //ul/p	ul#recordlist>* ul#recordlist>p
定位后代元素	//div[@class='subdiv']//p	div p
By index	//li[4] 定位第四个li	li:nth-child(5)
By content	//li[contains(text(),'Goa')]	li contains('Goa') 该方法 已经废弃
根据子元素回溯定位父元素	//*[./a[@id='baiduUrl']] //div[.//p[text()='Heading']] 匹配到：	？
根据兄弟元素定位	//ul[preceding-sibling::a[@id='baiduUrl']] //ul[preceding-sibling::a[//div[@class='subdiv']/a]] 都匹配到：	a+ul a#baiduUrl+ul 匹配到：

截图如下：

    注意：根据兄弟元素定位时只能从上面的兄弟找下面的兄弟，如：css=p+li，写成li+p是不行的。

可以看到，CSS定位语法比XPath更为简洁、灵活，而且CSS定位的速度还比XPath快，推荐使用CSS定位