【Selenium专题】元素定位之CssSelector

CssSelector是我最喜欢的元素定位方法，Selenium官网的Document里极力推荐使用CSS locator，而不是XPath来定位元素，原因是CSS locator比XPath locator速度快，特别是在IE下面（IE没有自己的XPath 解析器(Parser)）他比xpath更高效更准确更易编写，美中不足是根据页面文字时略有缺陷没有xpath直接。

因为前端开发人员就是用CSS Selector设置页面上每一个元素的样式，无论那个元素的位置有多复杂，他们能定位到，那我们使用CSS Selector肯定也能非常精准的定位到页面Elements。

CssSelector常用定位

1.根据tagName

　　driver.findElement(By.cssSelector("input")

2.根据ID

　　driver.findElement(By.cssSelector("input#username"));html标签和#id

　　driver.findElement(By.cssSelector("#username"));只是#id

3.根据className

　　单一class：driver.findElement(By.cssSelector(".username"));.class

　　复合class：driver.findElement(By.cssSelector(".username.**.***"));.classA.classB

4.根据元素属性

　　1)精准匹配：

　　　　[A] driver.findElement(By.cssSelector("input[name=username]"));属性名=属性值,id,class,等都可写成这种形式

[B] driver.findElement(By.cssSelector("img[alt]"));存在属性。例如img元素存在alt属性

　　　　[C] driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多属性

　　2)模糊匹配：（正则表达式匹配属性）

　　　　[A] ^= driver.findElement(By.cssSelector(Input[id ^='ctrl']));匹配到id头部如ctrl_12

　　　　[B] $= driver.findElement(By.cssSelector(Input[id $='ctrl']));匹配到id尾部如a_ctrl

　　　　[C] *= driver.findElement(By.cssSelector(Input[id *= 'ctrl']));匹配到id中间如1_ctrl_12

　　　　更多正则匹配原则请查看CSS3 选择器——属性选择器 http://www.w3cplus.com/css3/attribute-selectors

5.查询子元素

<form id="form" class="fm" name="f">
　　<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">
　　　　<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd">
　　</span>
　　<span id="s_btn_wr" class="btn_wr s_btn_wr bg">
　　　　<input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下">
　　</span>
</form>

案例html