Selenium官網的Document里推薦使用CSS locator，而不是XPath來定位元素，原因是CSS locator比XPath locator速度快，特別是在IE下面（IE沒有自己的XPath 解析器(Parser)），比xpath更高效更準確更易編寫，缺點是根據頁面文字定位時沒有xpath直接。

因為前端開發人員就是用CSS Selector設置頁面上每一個元素的樣式，無論那個元素的位置有多復雜，使用CSS Selector都能非常精準的定位到頁面Elements。

CssSelector常用定位

1.根據tagName

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

2.根據ID
　webDriver.findElement(By.cssSelector("input#username"));html標簽和#id
　webDriver.findElement(By.cssSelector("#username"));只是#id

3.根據className
　　單一class：webDriver.findElement(By.cssSelector(".username"));.class
　　復合class：webDriver.findElement(By.cssSelector(".username.**.***"));.classA.classB

4.根據元素屬性
　　1)精準匹配：?
　　　[A] ?webDriver.findElement(By.cssSelector("input[name=username]"));屬性名=屬性值,id,class,等都可寫成這種形式
? ? ? ? ? ? [B] ?webDriver.findElement(By.cssSelector("img[alt]"));存在屬性。例如img元素存在alt屬性
　　 ? [C] ?webDriver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多屬性
　　2)模糊匹配：（正則表達式匹配屬性）
　　　　[A] ?^= ?webDriver.findElement(By.cssSelector(Input[id ^='ctrl']));匹配到id頭部 如ctrl_12
　　 ? ?　[B] ?$= ?webDriver.findElement(By.cssSelector(Input[id $='ctrl']));匹配到id尾部 如a_ctrl
　　　　[C] ?*= ?webDriver.findElement(By.cssSelector(Input[id *= 'ctrl']));匹配到id中間如1_ctrl_12

5.查詢子元素

以百度首頁搜索輸入框和按鈕的html為例說明：
<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>　　1)子元素 ? A>B

　　　　WebElement input= ?webDriver.findElement(By.cssSelector("form>span>input"));//搜索輸入框

　　2)后代元素 ? A空格B

　　　　WebElement input= ?webDriver.findElement(By.cssSelector("form input"));//搜索輸入框

　　3)第一個后代元素　　:first-child

　　　　WebElement span= webDriver.findElemet(By.cssSelector("form :first-child"));//冒號前有空格，定位到form下所有級別的第一個子元素
　　　　　　可定位到三個元素：<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>

　　　　WebElement span= webDriver.findElemet(By.cssSelector("form input:first-child"));//冒號前無空格，定位到form下所有級別的第一個input元素
　　　　　可定位到兩個元素：<input id="kw"..../> <input id="su"........./>

　　　　WebElement span= webDriver.findElemet(By.cssSelector("form>span:first-child"));//冒號前無空格，定位到form直接子元素中的第一個span元素
　　　　　　可定位到一個元素：<span id="s_kw_wrap".../>

　　4)最后一個子元素 ? :last-child ?[類同:first-child]
　　　　WebElement userName = webDriver.findEleme(By.cssSelector("form :last-child"));//冒號前有空格，定位到form下所有級別的第一個子元素

　　5)第2個子元素 ? ?:nth-child(N) ?[類同:first-child]
　　　　WebElement userName = webDriver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒號前有空格，定位到form下所有級別的第二個子元素

? ? ? ?6)查詢兄弟元素
　　webDriver.findElement(By.cssSelector("form#form span+span")); 定位到a 再定位到和它相鄰的b


更多可參考https://www.w3.org/TR/css3-selectors/和 http://www.w3cplus.com/css3/attribute-selectors中介紹。

一般情況，我最多用class樣式來定位，因為很多網站的元素基本都有class。參考代碼如下：

package com.net; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.support.ui.ExpectedCondition; import org.openqa.selenium.support.ui.WebDriverWait;public class zhihu {public static void spider(String keyword){//爬蟲System.getProperties().setProperty("webdriver.chrome.driver","D:\\dev\\workspace\\ocweb\\libs\\chromedriver.exe");WebDriver webDriver = new ChromeDriver();//訪問網址webDriver.get("http://zhihu.sogou.com/");WebElement eleKW = webDriver.findElement(By.id("query"));eleKW.clear();eleKW.sendKeys(keyword);WebElement eleBtn=webDriver.findElement(By.cssSelector("input.btn-search"));eleBtn.click();//等待頁面加載完畢，直到條件滿足 (new WebDriverWait(webDriver, 30)).until(new ExpectedCondition<Boolean>() { public Boolean apply(WebDriver dr) { int index = dr.getPageSource().indexOf("result-about-list"); if(index != -1){ return true; //找到，退出等待}else{ return false; //未找到，繼續等待} } });List<WebElement> eleBoxs=webDriver.findElements(By.cssSelector("div.result-about-list"));for(WebElement eleBox:eleBoxs){WebElement eleTitle=eleBox.findElement(By.cssSelector("h4.about-list-title"));WebElement eleAnswer=eleBox.findElement(By.cssSelector("p.about-answer"));WebElement eleTxt=eleBox.findElement(By.cssSelector("p.about-text"));System.out.println(eleTitle.getText()+eleAnswer.getText()+eleTxt.getText());} webDriver.close();webDriver.quit();}}public static void main(String[] args) {zhihu.spider("大數據"); } }

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的模拟浏览器自动化测试工具Selenium之四cssSelector元素定位开发篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。