CssSelector是我最喜歡的元素定位方法，Selenium官網(wǎng)的Document里極力推薦使用CSS locator，而不是XPath來定位元素，原因是CSS locator比XPath locator速度快，特別是在IE下面（IE沒有自己的XPath 解析器(Parser)）他比xpath更高效更準(zhǔn)確更易編寫，美中不足是根據(jù)頁面文字時(shí)略有缺陷沒有xpath直接。

因?yàn)榍岸碎_發(fā)人員就是用CSS Selector設(shè)置頁面上每一個(gè)元素的樣式，無論那個(gè)元素的位置有多復(fù)雜，他們能定位到，那我們使用CSS Selector肯定也能非常精準(zhǔn)的定位到頁面Elements。

CssSelector常用定位

1.根據(jù)tagName

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

2.根據(jù)ID

　　driver.findElement(By.cssSelector("input#username"));html標(biāo)簽和#id

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

3.根據(jù)className

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

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

4.根據(jù)元素屬性

　　1)精準(zhǔn)匹配：?

　　　　[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)模糊匹配：（正則表達(dá)式匹配屬性）

　　　　[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

　　　　更多正則匹配原則請(qǐng)查看CSS3 選擇器——屬性選擇器??http://www.w3cplus.com/css3/attribute-selectors

5.查詢子元素

1 <form id="form" class="fm" name="f"> 2 　　<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap"> 3 　　　　<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"> 4 　　</span> 5 　　<span id="s_btn_wr" class="btn_wr s_btn_wr bg"> 6 　　　　<input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下"> 7 　　</span> 8 </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)第一個(gè)后代元素　　:first-child

　　　　WebElement?span=?driver.findElemet(By.cssSelector("form :first-child"));//冒號(hào)前有空格，定位到form下所有級(jí)別的第一個(gè)子元素

　　　　　　可定位到三個(gè)元素：<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>

　　　　WebElement?span=?driver.findElemet(By.cssSelector("form input:first-child"));//冒號(hào)前無空格，定位到form下所有級(jí)別的第一個(gè)input元素

　　　　　　可定位到兩個(gè)元素：<input id="kw"..../> <input id="su"........./>

　　　　WebElement?span=?driver.findElemet(By.cssSelector("form>span:first-child"));//冒號(hào)前無空格，定位到form直接子元素中的第一個(gè)span元素

　　　　　　可定位到一個(gè)元素：<span id="s_kw_wrap".../>

　　4)最后一個(gè)子元素 ??:last-child ?[類同:first-child]

　　　　WebElement?userName?=?driver.findEleme(By.cssSelector("form :last-child"));//冒號(hào)前有空格，定位到form下所有級(jí)別的第一個(gè)子元素

　　5)第2個(gè)子元素 ? ?:nth-child(N)??[類同:first-child]

　　　　WebElement?userName?=?driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒號(hào)前有空格，定位到form下所有級(jí)別的第二個(gè)子元素

6.查詢兄弟元素

　　driver.findElement(By.cssSelector("form#form span+span"));?定位到a?再定位到和它相鄰的b

深入學(xué)習(xí)cssselector可訪問以下地址：

http://www.w3.org/TR/css3-selectors/

?

CSS3 選擇器——基本選擇器? http://www.w3cplus.com/css3/basic-selectorsCSS3 選擇器——屬性選擇器??http://www.w3cplus.com/css3/attribute-selectorsCSS3 選擇器——偽類選擇器??http://www.w3cplus.com/css3/pseudo-class-selector?常用方法：

#input?選擇id為input的節(jié)點(diǎn)

.Volvo?選擇class為Volvo的節(jié)點(diǎn)

div#radio>input?選擇id為radio的div下的所有的input節(jié)點(diǎn)

div#radio input?選擇id為radio的div下的所有的子孫后代input節(jié)點(diǎn)

div#radio>input:nth-of-type(4)?選擇id為radio的div下的第4個(gè)input節(jié)點(diǎn)

div#radio>nth-child(1)?選擇id為radio的div下的第1個(gè)子節(jié)點(diǎn)

div#radio>input:nth-of-type(4)+label?選擇id為radio的div下的第4個(gè)input節(jié)點(diǎn)之后挨著的label節(jié)點(diǎn)

div#radio>input:nth-of-type(4)~labe?選擇id為radio的div下的第4個(gè)input節(jié)點(diǎn)之后的所有l(wèi)abel節(jié)點(diǎn)

input.Vovlo[name='identity']?選擇class為.Volvo并且name為identity的input節(jié)點(diǎn)

input[name='identity'][type='radio']:nth-of-type(1)?選擇name為identity且type為radio的第1個(gè)input節(jié)點(diǎn)

input[name^='ident']?選擇以ident開頭的name屬性的所有input節(jié)點(diǎn)

input[name$='entity']?選擇以'entity'結(jié)尾的name屬性的所有input節(jié)點(diǎn)

input[name*='enti']?選擇包含'enti'的name屬性的所有input節(jié)點(diǎn)

div#radio>*.not(input)?選擇id為radio的div的子節(jié)點(diǎn)中不為input的所有子節(jié)點(diǎn)

input:not([type='radio'])?選擇input節(jié)點(diǎn)中type不為radio的所有節(jié)點(diǎn)

轉(zhuǎn)載于:https://www.cnblogs.com/clarke157/p/6432546.html

總結(jié)

以上是生活随笔為你收集整理的CssSelector之selenium元素定位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。