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，下面講解以此為例
1)子元素 ? A>B
WebElement input=??driver.findElement(By.cssSelector("form>span>input"));//搜索輸入框
2)后代元素 ? A空格B
WebElement input=??driver.findElement(By.cssSelector("form input"));//搜索輸入框
3)第一個后代元素 :first-child
WebElement?span=?driver.findElemet(By.cssSelector("form :first-child"));//冒號前有空格，定位到form下所有級別的第一個子元素
可定位到三個元素：<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>
WebElement?span=?driver.findElemet(By.cssSelector("form input:first-child"));//冒號前無空格，定位到form下所有級別的第一個input元素
可定位到兩個元素：<input id="kw"..../> <input id="su"........./>
WebElement?span=?driver.findElemet(By.cssSelector("form>span:first-child"));//冒號前無空格，定位到form直接子元素中的第一個span元素
可定位到一個元素：<span id="s_kw_wrap".../>
4)最后一個子元素 ?? :last-child ?[類同:first-child]
WebElement?userName?=?driver.findEleme(By.cssSelector("form :last-child"));//冒號前有空格，定位到form下所有級別的第一個子元素
5)第2個子元素 ? ? :nth-child(N) ??[類同:first-child]
WebElement?userName?=?driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒號前有空格，定位到form下所有級別的第二個子元素
6.查詢兄弟元素
driver.findElement(By.cssSelector("form#form span+span"));?定位到a?再定位到和它相鄰的b
深入學習cssselector可訪問以下地址：
http://www.w3.org/TR/css3-selectors/
?
CSS3 選擇器——基本選擇器 ? http://www.w3cplus.com/css3/basic-selectors CSS3 選擇器——屬性選擇器 ??http://www.w3cplus.com/css3/attribute-selectors CSS3 選擇器——偽類選擇器 ??http://www.w3cplus.com/css3/pseudo-class-selector ?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
