【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

以上代碼是百度首頁搜索輸入框和按鈕的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