您的位置：首页 > Web前端 > CSS

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

2017-05-04 10:04 531 查看
一、CSS简介

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

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





二、定位实例

1、以如下html定位为例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> css locate </title>
 </head>
 <body>
  <div class="formdiv">
    <form name="fnfn">
        <input name="username" type="text"></input>
        <input name="password" type="text"></input>
        <input name="continue" type="button"></input>
        <input name="cancel" type="button"></input>
        <input value="SYS123456" name="vid" type="text">
        <input value="ks10cf6d6" name="cid" type="text">
    </form>
    <div class="subdiv">
        <a href="http://www.baidu.com" id="baiduUrl">baidu</a>
        <ul id="recordlist">
            <p>Heading</p>
            <li>Cat</li>
            <li>Dog</li>
            <li>Car</li>
            <li>Goat</li>
        </ul>
    </div>
  </div>
 </body>
</html>
 


2、CSS匹配实例：

cssSelector匹配
css=div<div class="formdiv">
css=div.formdiv<div class="formdiv">
css=#recordlist

css=ul#recordlist		<ul id="recordlist">
css=div.subdiv p<p>Heading</p>
css=div.subdiv>ul>p<p>Heading</p>
css=form+div<div class="subdiv">
css=p+li<li>Cat</li>
css=p~li<li>Cat</li> 得到4个li中的第一个
css=form>input[name=username]<input name="username" type="text"></input>
css=input[name$=id][value^=SYS]<input value="SYS123456" name="vid" type="text">
css=input[value*='SYS']<input value="SYS123456" name="vid" type="text">
css=a:link<a href="http://www.baidu.com">baidu</a>
css=input:first-child<input name="username" type="text"></input>
css=input:last-child<input value="ks10cf6d6" name="cid" type="text">
css=li:nth-child(2)<li>Cat</li> 因为这个li是ul下的第二个元素，所以是child（2）
css=:root<html>
csdn表格不显示边框，所以截个图好看点：





三、XPATH和CSS定位比较

  还是以上面的html为例：

定位方式XPathCSS
标签//divdiv
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']//pdiv p
By index//li[4] 定位第四个lili:nth-child(5)
By content//li[contains(text(),'Goa')]li contains('Goa') 该方法

已经废弃
根据子元素回溯定位父元素//*[./a[@id='baiduUrl']]

//div[.//p[text()='Heading']]

匹配到：<div class="subdiv">		？
根据兄弟元素定位//ul[preceding-sibling::a[@id='baiduUrl']]

//ul[preceding-sibling::a[//div[@class='subdiv']/a]]

都匹配到：<ul id="recordlist">		a+ul

a#baiduUrl+ul

匹配到：<ul id="recordlist">
截图如下：



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

可以看到，CSS定位语法比XPath更为简洁、灵活，而且CSS定位的速度还比XPath快，推荐使用CSS定位
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  自动化测试 css selenium
相关文章推荐
新的分享
章节导航